也许很早的时刻就有主意做一个音乐播放器玩玩，之前能够还斟酌过做APP，大一的时刻第一个html的静态页面也是做的音乐网站，想一想，也许小时刻比较喜好音乐吧。但是，如今入了前端大坑，就用h5做一个耍耍好了。功用不多，UI不美，But，演习了html5中audio及其API的运用。迎接吐槽~

功用思绪剖析

用了这么多年的音乐播放软件，现在已经是网易云音乐的重度用户。
一个基本的音乐播放器基本功用有：播放、停息、歌曲切换。
用户体验基本功用：歌曲腾跃播放、音量调解、歌曲单曲或列表轮回。
当相识这些以后，再瞅一眼audio的api，简直了，基本上都能完成，开做。

页面完成

采纳了比较喜好的深蓝渐变背景加生机黄搭配，界面没啥好说的，萝卜白菜，各有所爱。
用css3媒体查询完成相应式，删除不必要的地区。

js完成

1.设置默许属性

默许不自动播放audio.autoplay = false;
默许不单曲轮回audio.loop = false;
初始化音量audio.volume = 0.5;
默许不自动缓冲加载audio.autobuffer = false;

2.基本功用完成

这里不提了，有想相识的能够去github(地点)看源码。
3.细节完成

①应用定时器及时显现歌曲播放时候，应用百分比来动态转变进度条的长度。

②应用audio.readyState来设置缓冲进度，用css3来完成腻滑转变

③可点击歌曲进度条恣意位置完成跳转播放，音量同理
④完成静音，单曲轮回和列表轮回

在线音乐完成

此次采纳的是网易云音乐的API来举行在线音乐的完成。此处参考了小青年的文章html5+ XMLHttpRequest 与mui ajax用法详解。
应用事宜托付，为动态加载的效果绑定监听事宜。将搜到的资本数据加载到audio中去，然后播放在线资本。
本来想到场localStorage存储播放列表的，关于体验还有所斟酌，毕竟只是个玩儿的东西，所以保存主意了，没有到场。

上效果

不能不认可，总结才能真的有够差，直接上效果吧：(http://fehey.com/hey-Audio/)
喜好的能够去github看源码，有什么革新，迎接留言（star也不介意哦?）~

个人博客：(http://fehey.com/)