第六节：用标签打造一个属于自己的HTML5音乐播放器
上一章节，我们刚刚讲了<video>标签，今晚，我们讲的是<audio>标签，这两个东东除了表示的内容不一样以外，其他的特性相似的地方真的太多了，属性和用法几乎一样，也就说，如果上一章节你理解了，那么这一节你学起来会：毫无压力。
<audio>标签：用于在文档中表示音频内容。利用它，你可以在你的个人网站上放一首你喜欢的歌。
<audio src="music.mp3"></audio>
用法很简单，跟<video>标签一样，属性src指定音频文件地址。
如果你仅仅这样写，页面上不会看到有明显的东西，<audio>标签默认是隐藏的。
对于不支持<audio>标签的浏览器，会把标签的文本内容显示出来。
<audio src="music.mp3">
别试了，是你的浏览器渣渣
</audio>
( 大家都叫我：IE8 )
为了方便我们对音频文件进行控制，操作它的进度、播放暂停、音量等等，我们可以给它添加controls属性：
<audio src="m.mp3" controls></audio>
用法跟<video>标签一样。对于加上了controls属性， 不同的浏览器会展示不同样式的控制面板。
( chrome浏览器的音频控制面板 )
( firefox浏览器的音频控制面板 )
( IE浏览器的音频控制面板 )
哪个好看就见仁见智了~~
跟<video>标签一样，<audio>标签也有一个字标签：<source>。
它们的作用和用法都一样，就是用来引入多个音频，浏览器会选择一个支持的音频格式进行加载，对于不支持<audio>标签的浏览器，<source>元素也可以作为浏览器不识别的内容加入到文档中。
<audio>
<source src="music.mp3">
<source src="music.ogg">
<source src="music.wav">
</audio>
注：主流的音频文件格式有：mp3、wav、ogg。不同的浏览器对三种格式支持程度不一样。其中mp3格式支持度最好。
autoplay属性：加载完成后，自动播放。也非常简单、使用。
<audio src="m.mp3" autoplay></audio>
loop属性：顾名思义，循环播放。
<audio src="m.mp3" loop></audio>
preload属性：用来控制音频在什么时候进行加载。
<audio src="m.mp3" preload="auto"></audio>
对应的值有3种：
none：默认不加载，等有需要的时候再加载。
metadata：元数据，默认不加载，但是可以提取该音频的元数据信息。
auto：自动加载，网页加载完就加载整个音频。
muted属性：静音效果。
<audio src="m.mp3" muted></audio>
加了muted属性，音频即使在播放的时候，也是没有声音，除非用户手动调整控制面板的音量。
JavaScript可以通过video对象控制网页视频；同样可以audio对象操作网页音频。
首先我们通过getElementById(ID)方法获取到一个audio对象。假设id为“music“。
<audio id="music" src="m.mp3"></audio>
let m = document.getElementById('music');
控制加载：
m.load();//加载
如果你的<audio>标签是手动生成的节点，可以用load方法来实现加载。
控制播放：
m.play();//播放
调用play( )方法可以执行播放。
控制暂停：
m.pause();//暂停
调用pause( )方法可以执行暂停播放。
指定播放时间：
m.fastSeek(20);
这样的话，音频会定位到20秒的播放位置。不过目前只有Firefox浏览器支持，你可以通过currentTime属性来实现。
获取和设置已播放的时间
m.currentTime
通过currentTime属性，你可以拿到当前音频播放了多久，返回的数字以( s )秒为单位。
m.currentTime = 10;
你也可以给它赋值，这样，音频会定位到10秒的播放位置。
是否自动播放：
m.autoplay = true;//自动播放
可以直接在<audio>标签上加上autoplay属性，也可以通过JavaScript来设置autoplay属性。它是一个布尔值，true代表自动播放，false代表非自动播放。
是否循环播放：
m.loop = true;//循环播放
可以直接在<audio>标签上加上loop属性，也可以通过JavaScript来设置loop属性。它也是一个布尔值，true代表循环播放，false代表单曲播放。
是否显示控制面板：
m.controls = true;//显示控制面板
可以直接在<audio>标签上加上controls属性，也可以通过JavaScript来设置controls属性。它也是一个布尔值，true代表显示控制面板，false代表隐藏控制面板。
是否静音：
m.muted = true;//静音
可以直接在<audio>标签上加上muted属性，也可以通过JavaScript来设置muted属性。它也是一个布尔值，true代表静音，false代表有声音。
是否暂停：
m.paused //是否暂停
判断音频当前是否暂停，返回true代表暂停，返回false代表正在播放；默认是true；该值只能读取，不能修改。
调用play( )方法后，m.paused的值会变成false；调用pause( )方法后，m.paused的值会变成true。
调节音量：
m.volume = 0.1;
音量的取值范围在：0（无声）~1（最大声）之间。可以对volume属性赋合理的值或者做一些运算，来改变音频的音量。
以上就是<audio>标签很常用也很实用的一些属性和方法了。只要掌握了这些知识点，你就可以实现一个自己的音乐播放器。当然，<audio>标签还有其他属性，我不在这里展开， 学习的阶段只要掌握以上这些就够了，有兴趣的同学可以自行去网上搜索
掌握了<audio>标签的属性
旧版浏览器不支持<audio>标签的处理方式
用JavaScript操作audio对象来控制音频
-
结合以上的知识点，实现一个属于自己的HTML5 音乐播放器。功能：播放/暂停、静音、调节音量、调节播放进度、切换歌曲、单曲模式/循环模式。