将 音频流（MP3流）并进行播放

 记录一下  将后台返回 音频流 进行播放  转载请注明出处

 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 }

 

传送门：  二进制文件流的下载 vue+axios

　　　　 vue 下载文件（后台返回为二进制流）

               vue.js接收并下载文件流（blob对象）

posted @ 2021-01-05 17:25  思猿客  阅读(3291)  评论(0)  编辑  收藏  举报