html5,audio音乐播放器

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

       正式内容前,可以先预览一下效果,http://xxyy.ahthw.com//xiaoyu/musicV1.0/Music1.0.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,或者在线留下邮箱地址,我会把源文件分享给你。希望能一起交流技术和经验!

猜你喜欢

转载自blog.csdn.net/u014703834/article/details/44257547