没有使用任何框架,只是想用最简单纯js的代码实现下
鄙人野生前端一只,gis专业,自学前端已经一年多了,为什么要写个音乐播放器呢?原因有两个:
我模仿的是网易云音乐的PC端,所用到的技术都是前端的基本技术 HTML、CSS、JAVASCRIPT
由于我是自学的,没有那么多规矩,我这个人看到是我感兴趣的,我立马就会去做,这个播放器也不例外。
首先先的将它“画”出来(HTML+CSS)
我仔细看了下网易云音乐PC端的布局,大致分为四部分,四个模块
无图不真相
然后呢,写页面逻辑JavaScript
播放(暂停)按钮,这个可以通过 play()
和 pause()
方法实现
这个通过监听timeupdate
事件,实施更新当前播放位置,
通过监听鼠标移动事件,改变进度条的长度
audio.muted=true
实现网易云音乐获取歌单的API
http://www.sychzs.cn/api/play...[id]
id 歌单id
因为涉及到跨域问题。暂时我前台这边又没有办法跨域,所以参考了网上的代码,写个PHP做代理 (2018-09-14更新:现在代码已改为Nodejs做代理服务),这样就不存在跨域问题了。
获取到歌单数据后,重新渲染下DOM
网易云音乐获取歌曲的API
http://www.sychzs.cn/search...[songname]&type=1&limit=10
s 搜索内容
type 搜索类型
limit 搜索返回结果数
主要是歌词和歌词滚动
网易云音乐获取歌词API
http://www.sychzs.cn/api/song...[id]
id 歌曲id
歌词滚动,先把获取到的歌词数据分割成时间点和歌词两部分,将这两部分存入dataset中,
通过监听timeupdate事件,判断和当前播放时间相近的歌词,记录它的getBoundingClient()的top值,将滚动条设置到指定位置 例如:ele.srcollTop=100;
总结能力太差了,原谅理科生的无奈
完整源码,点击查看
后台代码,点击查看
此文源自我的博客