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

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

// 实时获取后台返回的 音频流（MP3流）并进行播放
export function baseAudioFetch(params) {
  return new Promise((resolve, reject) => {
    axios({
      method: 'post',
      url: 'http://172.30.102.224:8080/api/v1/tts/bd/text2AudioRetMP3?content=' + params.content + '&userID=' +
        params.userID,
      responseType: 'arraybuffer'
    }).then((response) => {

      // 将 blob 数据转换成 url
      let mp3Url = window.URL.createObjectURL(new Blob([response.data]))
      console.log(mp3Url)

      // 进行音频播放
      audio = new Audio();
      audio.src = mp3Url;
      audio.play();


      resolve('语音播放成功');
    }).catch((error) => {
      showToast('资源请求出错');
      reject(error);
    })
  })
}

优化：全局声明播放

// 全局声明 audio
let audio = null;

// 实时获取后台返回的 音频流（MP3流）并进行播放
export function baseAudioFetch(params) {
  return new Promise((resolve, reject) => {
    axios({
      method: 'post',
      url: 'http://172.30.102.224:8080/api/v1/tts/bd/text2AudioRetMP3?content=' + params.content + '&userID=' +
        params.userID,
      responseType: 'arraybuffer'
    }).then((response) => {

      // 将 blob 数据转换成 url
      let mp3Url = window.URL.createObjectURL(new Blob([response.data]))

      // 进行音频播放
      try {
        //是否已经声明过
        if (audio == null) {
          audio = new Audio();
          audio.addEventListener('ended', function() {
            localStorage.setItem('audioEnded', true);
          }, false);
        }
        if (mp3Url) {
          audio.src = mp3Url;
          audio.play();
        }
      } catch (e) {}


      resolve('语音播放成功');
    }).catch((error) => {
      showToast('资源请求出错');
      reject(error);
    })
  })
}

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

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

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