audio 元素能够播放声音文件或者音频流-html5播放音频

代码:自动循环播放、显示播放控件

<!DOCTYPE HTML>
<html>
<body>
<!-- 音频加载方式一-->
<audio autoplay="autoplay" loop="loop" src="song.mp3" controls="controls">
</audio>
<!-- 音频加载方式二-->
<audio controls="controls">
  <source src="song.mp3" type="audio/mpeg">
</audio>
</body>
</html>

演示:

说明:

<audio> 标签的属性

属性描述
autoplayautoplay如果出现该属性,则音频在就绪后马上播放。
controlscontrols如果出现该属性,则向用户显示控件,比如播放按钮。
looploop如果出现该属性,则每当音频结束时重新开始播放。
preloadpreload

如果出现该属性,则音频在页面加载时进行加载,并预备播放。

如果使用 "autoplay",则忽略该属性。

srcurl要播放的音频的 URL。

 

 

要在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、付费专栏及课程。

余额充值