【前端标签-audio】网页播放一个音频和多个音频

标签的属性

属性	值	描述
autoplay	autoplay	如果出现该属性，则音频在就绪后马上播放。
controls	controls	如果出现该属性，则向用户显示控件，比如播放按钮。
loop	loop	如果出现该属性，则每当音频结束时重新开始播放。
preload	preload	如果出现该属性，则音频在页面加载时进行加载，并预备播放.如果使用 “autoplay”，则忽略该属性。
src	url	要播放的音频的 URL。

1.播放一个音频
在idea中建一个文件夹存放本地.MP3文件

body中输入:

<audio controls>
    <source src="/audio/The%20truth%20that%20you%20leave.mp3">
</audio>

运行在浏览器显示,即可播放

2.播放多个音频
第1在网页中只能播放一个音频,若想播放按顺序播放多个音频:

<div id="audioBox">
    <script type="text/javascript">
        window.onload = function(){
            var arr = ["http://96.ierge.cn/12/181/363120.mp3","http://96.ierge.cn/12/185/370503.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
            function playEndedHandler(){
                myAudio.src = arr.pop();
                myAudio.play();
                console.log(arr.length);
                !arr.length && myAudio.removeEventListener('ended',playEndedHandler,false)
            }
        }
    </script>
</div>

播放玩一首歌曲后自动播放下一首,到放完为止