html5，audio音乐播放器
终于，做了自己原来一直想要实现的事儿，得出的结果是，有些事儿一旦开始做了，那么它就并不是很难。现在的我，正听着自己的播放器放出的《光辉岁月》写这篇周六清晨的博文。写的不是很好，但也请各位前辈担待一下我这个什么都不懂的菜鸟，也希望各位前辈积极地指正我的错误，小弟感激不尽！
正式内容前，可以先预览一下效果，http://xxyy.ahthw.com/myMusic/MyMusic.html (在这里，再次感谢王哥提供的服务器！)
本项目主要用到了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，或者在线留下邮箱地址，我会把源文件分享给你。希望能一起交流技术和经验！
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
