H5增加了很多的标签，面试的时候，如果面试官问你H5都有哪些新标签，你回答header、footer、nav。

这么回答几乎是无效的，因为这些标签在H5里面的角色，相当于鸡骨头、鱼刺、蘑菇腿——全是鸡肋，至少你得答出来audio、video、canvas，这些才是H5的核心功能，本文我们就重点说一下audio。

audio广泛的应用于各种项目中，游戏背景、各种播放器，可以说有声音的地方就有audio，当然因为各种限制和坑，很容易让前端人员陷入尴尬，比如在iphone下audio 是不允许autoplay的，如果前端人员不知道这个坑，产品经理又拿微信做对比，那这个锅前端就背定了。

所以本文通过对audio的核心知识的讲解，让小伙伴们一来不背锅，二来不加班。

第一步非常简单你就把audio当成图片使用，搞出个src,剩下ul是歌曲列表，然后是一堆功能按钮，不再赘述。

这样的播放控制条很丑，产品经理会很不满意，当然了，如果产品经理说真好看，那你就换公司吧，我们需要隐藏控制条，然后自己用各种按钮和标签模拟一个。

第一个功能，播放暂停，

然后整下一曲，

这里大家要注意，我使用的是数组的形式，因为数组要比单独处理某一个音乐更方便。下面是单曲循环

这里涉及到一个坑，很多人会觉得我直接在mp3播放onend事件里面在播放一次原来的音乐不就可以了吗？

确实可以问题是麻烦，因为自身就有了loop属性，但是随机播放或者整个列表重复就没有属性了，这里就要使用switch case判断。

这里算是一个功能实现技巧，通过开关，上面说这些都很简单，我们实现一个看起来复杂其实非常简单的的功能，进度条，其实进度就是当前时间/总时间，这里要用一个timeupdate事件，因为播放的过程中时间是不断变化的，

这里，给大家顺便留一个作业，如何实现进度条拖拽改变，播放进度呢？提示

最后给大家说两个坑，第一个坑是mp3加载，建议使用preloadjs 而不是preload属性，

第二给大家一个事件，

这个事件用在页面加载完，但是mp3如果没有加载到位会出现获取音乐时长NaN问题，用这个就OK了。