記錄一下 將后台返回 音頻流 進行播放 轉載請注明出處
1 // 實時獲取后台返回的 音頻流（MP3流）並進行播放 2 export function baseAudioFetch(params) { 3 return new Promise((resolve, reject) => { 4 axios({ 5 method: 'post', 6 url: 'http://172.30.102.224:8080/api/v1/tts/bd/text2AudioRetMP3?content=' + params.content + '&userID=' + 7 params.userID, 8 responseType: 'arraybuffer' 9 }).then((response) => { 10 11 // 將 blob 數據轉換成 url 12 let mp3Url = window.URL.createObjectURL(new Blob([response.data])) 13 console.log(mp3Url) 14 15 // 進行音頻播放 16 audio = new Audio(); 17 audio.src = mp3Url; 18 audio.play(); 19 20 21 resolve('語音播放成功'); 22 }).catch((error) => { 23 showToast('資源請求出錯'); 24 reject(error); 25 }) 26 }) 27 }
優化：全局聲明播放
1 // 全局聲明 audio 2 let audio = null; 3 4 // 實時獲取后台返回的 音頻流（MP3流）並進行播放 5 export function baseAudioFetch(params) { 6 return new Promise((resolve, reject) => { 7 axios({ 8 method: 'post', 9 url: 'http://172.30.102.224:8080/api/v1/tts/bd/text2AudioRetMP3?content=' + params.content + '&userID=' + 10 params.userID, 11 responseType: 'arraybuffer' 12 }).then((response) => { 13 14 // 將 blob 數據轉換成 url 15 let mp3Url = window.URL.createObjectURL(new Blob([response.data])) 16 17 // 進行音頻播放 18 try { 19 //是否已經聲明過 20 if (audio == null) { 21 audio = new Audio(); 22 audio.addEventListener('ended', function() { 23 localStorage.setItem('audioEnded', true); 24 }, false); 25 } 26 if (mp3Url) { 27 audio.src = mp3Url; 28 audio.play(); 29 } 30 } catch (e) {} 31 32 33 resolve('語音播放成功'); 34 }).catch((error) => { 35 showToast('資源請求出錯'); 36 reject(error); 37 }) 38 }) 39 }