html5 audio菜鸟,html5，audio音乐播放器

终于，做了自己原来一直想要实现的事儿，得出的结果是，有些事儿一旦开始做了，那么它就并不是很难。现在的我，正听着自己的播放器放出的《光辉岁月》写这篇周六清晨的博文。写的不是很好，但也请各位前辈担待一下我这个什么都不懂的菜鸟，也希望各位前辈积极地指正我的错误，小弟感激不尽！

本项目主要用到了html5的audio标签以及它所自带的方法和属性，IE9+浏览器兼容。

值得一提的是，在项目中，遇到了这样的一个问题，根据正常的思维，一首音乐播放的流程是这样的：

点击事件更换audio的src，音乐重新加载,audio.load(),然后播放音乐audio.play()，在然后去获取音乐的总时长，audio.duration，但是这时候获取的时间总设计NaN，这个问题让我纠结了许久，想必也大概能分析出问题的原因，当浏览器去执行的audio.play()的时候，音乐可能还未加载，就已经执行了audio.duration，所以获取到的时间值总是为NaN，再次感谢无痕哥提供的解决方案。通过监听这首歌是否已经播放(canplay)，去获取时间,相关的Api，http://www.w3school.com.cn/tags/av_event_canplay.asp

解决代码：

MusicPlayer.addEventListener('canplay', function(e){

$AllTime.text(makeTime(MusicPlayer.duration));//makeTime是处理把秒处理成00:00格式的函数

AllTime = MusicPlayer.duration;

}, false);      其实这个问题，还是由于自己第一次写，经验少，没有仔细查看Api导致的，希望和我一样的菜鸟不会犯和我一样的错误。

在整体效果中，有一个根据内容的高度和容器的高度对比来添加虚拟滚动条的效果，关于滚动条代码请参考上一篇博文：

具体的项目代码就不在这里一一体现，有兴趣的朋友可以加我QQ：756500909，或者在线留下邮箱地址，我会把源文件分享给你。希望能一起交流技术和经验！