HTML5 如何实现播放多个MP3音频

方法一：audio标签

<audio>标签是HTML5中的新标签，定义声音用于嵌入音频内容，比如音乐或其他音频流。用的比较多音频格式是.mp3。

<audio>标签常用属性如下表

属性	值	描述
autoplay	autoplay	添加该属性后，音频会自动播放
controls	controls	设置后，显示控件，如播放按钮、音量
loop	loop	添加该属性后，当音频播放结束后会重新开始播放
preload	preload	音频显示页面加载，准备播放，如已添加autoplay,则忽略该属性
src	url	播放音频的URL（地址）。

目前，html5<audio>标签只能同时播放一个音频文件，如何要添加多个MP3音频文件，然后按顺序一个接着一个连续播放，需要用JS代码来实现。

通过js来实现<audio>标签连续播放多个MP3音频，代码如下：

<div id="audioBox"><script type="text/javascript">window.onload = function () {var arr = ["http://other.web.ra01.sycdn.kuwo.cn/resource/n3/128/95/48/111_02.mp3","http://other.web.rd01.sycdn.kuwo.cn/resource/n3/7/75/111_01.mp3"]; //把需要播放的歌曲从后往前排，这里已添加两首音乐，可继续添加多个音乐var myAudio = new Audio();myAudio.preload = true;myAudio.controls = true;myAudio.src = arr.pop(); // 每次读数组最后一个元素myAudio.addEventListener('ended', playEndedHandler, false);myAudio.play();document.getElementById("audioBox").appendChild(myAudio);myAudio.loop = false; // 禁止循环，否则无法触发ended事件function playEndedHandler() {myAudio.src = arr.pop();myAudio.play();console.log(arr.length);!arr.length && myAudio.removeEventListener('ended', playEndedHandler, false);//只有一个元素时解除绑定}}</script>
</div>

方法二：weixinAudio.js

weixinAudio.js生成的样式比较好看

代码如下：

<div id="weixinAudio" align="center" class="weixinAudio"><audio src="" id="media" width="1" height="1" preload=""></audio><span id="audio_area" class="db audio_area"><span class="audio_wrp db"><span class="audio_play_area"><i class="icon_audio_default"></i><i class="icon_audio_playing"></i></span><span id="audio_length" class="audio_length tips_global"></span><span class="db audio_info_area"><strong class="db audio_title">标题</strong><span class="audio_source tips_global">来源</span><span id="audio_times" class="audio_times tips_global">00:00</span></span><span id="audio_progress" class="progress_bar" style="width: 0%;"></span></span></span>
</div>
<div class="clear5"></div>
<script src="weixinAudio.js?v=22" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">var i = 1;var audios = eval('{$voices_json}'); // 语音地址数组document.getElementById("media").onended = function () {if (audios[i]) {this.setAttribute('src', audios[i]);i++;this.play();} else {alert('播报完成！');}};$('.weixinAudio').weixinAudio({autoplay: false,src: audios[0],});
</script>

HTML5 如何实现播放多个MP3音频相关推荐

HTML5 audio 如何实现播放多个MP3音频
<audio>标签是HTML5中的新标签,定义声音用于嵌入音频内容,比如音乐或其他音频流.用的比较多音频格式是.mp3. <audio>标签常用属性如下表属性值描述 au ...
html 多个mp3,HTML5 audio 如何实现播放多个MP3音频
标签是HTML5中的新标签,定义声音用于嵌入音频内容,比如音乐或其他音频流.用的比较多音频格式是.mp3. 标签常用属性如下表属性值描述 autoplay autoplay 添加该属性后,音频会 ...
html5自动播放音乐外链,HTML5 audio 如何实现播放多个MP3音频
标签是HTML5中的新标签,定义声音用于嵌入音频内容,比如音乐或其他音频流.用的比较多音频格式是.mp3. 标签常用属性如下表属性值描述 autoplay autoplay 添加该属性后,音频会 ...
html5播放多个mp3,HTML5 audio 如何实现播放多个MP3音频
标签是HTML5中的新标签,定义声音用于嵌入音频内容,比如音乐或其他音频流.用的比较多音频格式是.mp3. 标签常用属性如下表属性值描述 autoplay autoplay 添加该属性后,音频会 ...
html如何播放多个mp3,HTML5_audio_如何实现播放多个MP3音频
&lt不的期是范添事大部会基近说小间进围砖本的;audio>标签是HTML5中的新标签,定义声音用于嵌入音频内容,比如音乐或其他音频流.用的比较多音频格式支器事的后功发久这含层请间业在屏 ...
python播放音频文件_详解使用pygame播放一段MP3音频文件
近日,在梳理pygame模块的时候发现一个很有用的模块mixer模块,这个模块翻译过来就是混音器,它可以加载和播放音频文件,甚至可以对混音器进行设置和处理,其功能非常强大.今天,我们一起来梳理一下混音 ...
html5录制mp3,html5 录制mp3音频，支持采样率和比特率设置
13年的时候做过html5录音,一个问题是保存的wav格式文件很大,当初用了一个迂回的方式,上传到服务器后调用 lame 编码器转换,但由于文件大,上传较慢.不得不说,前端技术发展真是日新月异,有人实 ...
java h5在线音频_html5 mp3音频播放代码网页在线录音
特效描述:html5 mp3音频播放网页在线录音.本地设置麦克风权限,才能正常预览代码结构 1. 引入JS 2. HTML代码 Html5网页JavaScript录制MP3音频录制停止上传 ...
html5 录制mp3音频，支持采样率和比特率设置
13年的时候做过html5录音,一个问题是保存的wav格式文件很大,当初用了一个迂回的方式,上传到服务器后调用 lame 编码器转换,但由于文件大,上传较慢.不得不说,前端技术发展真是日新月异,有人实 ...

HTML5 如何实现播放多个MP3音频

方法一：audio标签

方法二：weixinAudio.js

HTML5 如何实现播放多个MP3音频相关推荐

最新文章

热门文章