html5，audio音乐播放器

最终，做了自己原来一直想要实现的事儿。得出的结果是，有些事儿一旦開始做了，那么它就并非非常难。

如今的我，正听着自己的播放器放出的《光辉岁月》写这篇周六清晨的博文。写的不是非常好。但也请各位前辈担待一下我这个什么都不懂的菜鸟，也希望各位前辈积极地指正我的错误，小弟感激不尽！

正式内容前，能够先预览一下效果，http://xxyy.ahthw.com//xiaoyu/musicV1.0/Music1.0.html (在这里。再次感谢王哥提供的server。)

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

关于audio相关的Api请參阅：http://www.w3school.com.cn/tags/html_ref_audio_video_dom.asp

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

点击事件更换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导致的，希望和我一样的菜鸟不会犯和我一样的错误。

在总体效果中，有一个依据内容的高度和容器的高度对照来加入虚拟滚动栏的效果，关于滚动栏代码请參考上一篇博文：

http://blog.csdn.net/u014703834/article/details/44159921

详细的项目代码就不在这里一一体现，有兴趣的朋友能够加我QQ：756500909。或者在线留下邮箱地址，我会把源文件分享给你。

希望能一起交流技术和经验！