html5 audio标签播放后端base64编码的文件流

html中audio填充格式参考:
地址1

后端参考代码

file = open(wav_path, 'rb')  # 用open函数以二进制方式读取文件
info = file.read()  # 直接读全部的信息就行
# 这里base64.encode返回了bytes数据,但bytes数据没法在json中传输,所以我用str()将其转为str类型数据后,取b'...'内的数据。
base64_info = str(base64.b64encode(info))[2:-1]
file.close()
  • 3
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要在Vue中播放后端传输的MP3音频文件,你可以使用HTML5的`<audio>`元素和JavaScript的`Audio`对象。以下是实现的步骤: 1. 在Vue组件中,使用`<audio>`元素来创建一个播放器: ```html <audio ref="audioPlayer" controls></audio> ``` 2. 在Vue组件的`created`钩子函数中,通过后端API获取MP3音频,并将其传递给`Audio`对象: ```javascript created() { // 调用后端API获取MP3音频 this.getAudioStream().then(stream => { this.playAudio(stream); }); }, methods: { getAudioStream() { // 使用axios或其他库来发送请求获取MP3音频 return axios.get('/api/audio/stream', { responseType: 'arraybuffer' }).then(response => { return response.data; }); }, playAudio(stream) { const audioContext = new AudioContext(); audioContext.decodeAudioData(stream, buffer => { const source = audioContext.createBufferSource(); source.buffer = buffer; source.connect(audioContext.destination); source.start(); this.$refs.audioPlayer.srcObject = source; }); } } ``` 在上述代码中,我们使用了`AudioContext`来解码音频,并通过`createBufferSource`创建一个音频源。然后,我们将音频源连接到`AudioContext`的目标(通常是扬声器),并开始播放音频。最后,我们将音频源赋值给`<audio>`元素的`srcObject`属性,以便在浏览器中显示播放控件和音频。 请注意,由于涉及到音频的解码,这可能会在一些旧版本的浏览器中存在兼容性问题。此外,你需要根据你的后端API返回的音频格式进行适当的解码和处理。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值