Vue接收接口返回的mp3格式数据并支持在页面播放音频

在Vue中接收接口返回的mp3数据并支持在页面播放音频，可以使用HTML5的<audio>元素结合Vue的响应式特性来实现。以下是一个简单的示例：

<template>
  <div>
    <audio ref="audioPlayer" controls>
      <source :src="audioSrc" type="audio/mpeg">
      您的浏览器不支持 audio 元素。
    </audio>
    <button @click="playAudio">播放音频</button>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      audioSrc: '', // 存储音频的Base64编码字符串
    };
  },
  methods: {
    fetchAudioData() {
      // 假设fetchAudio是一个返回mp3数据的接口函数
      fetchAudio().then(response => {
        // 假设返回的数据是一个Blob对象
        response.blob().then(blob => {
          // 将Blob对象转换为Base64编码的字符串
          this.audioSrc = URL.createObjectURL(blob);
        });
      });
    },
    playAudio() {
      const audioPlayer = this.$refs.audioPlayer;
      if (audioPlayer) {
        audioPlayer.load(); // 重新加载音频，以确保播放最新的音频内容
        audioPlayer.play(); // 播放音频
      }
    }
  },
  created() {
    this.fetchAudioData(); // 获取音频数据
  }
};
</script>

在这个示例中，我们定义了一个audioSrc数据属性来存储音频的Base64编码字符串。在组件的created生命周期钩子中，我们调用fetchAudioData方法来获取音频数据，并将其转换为可以在<audio>元素中使用的URL。playAudio方法用于控制音频的播放。当用户点击播放按钮时，音频会被加载并播放。