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>