HTML5音乐播放<audio>标签实例

audio是HTML5引进的新元素。在文档中表示音频内容，此便签的引入使得网页播放音乐变得简单。

audio使用起来相当的简单：

<audio></audio>

此元素有如下几个常用属性

• src（音频的地址）
• autoplay（自动播放）
• controls（是否显示控制面板）
• loop（循环播放）
• volume（音量，值：0-1）

代码

在index.html中加入如下代码就可实现最基本的音乐播放功能。

<audio src="XXX" autoplay controls loop></audio>

送一个测试用的src：

src="http://mr3.doubanio.com/fb36b2b75e5b369e637ab01674816df5/0/fm/song/p1947687_128k.mp4"

JSbin效果：

JavsScripts渲染

也可以使用JavsScripts渲染出来：

(function() {
    $audio = document.createElement('audio');
    $audio.loop = true;
    $audio.autoplay = true;
    $audio.controls = true;
    document.body.appendChild($audio);
    $audio.src = `XXX`;
})()

JSbin效果：

参考链接：

• MDN：<audio>