心血来潮就用h5的新标签写了个简單的音乐播放器实现的过程还是很简单的,对于前端来说最难的部分应该是让音乐盒歌词同步了吧下面简单的说一下实现的步骤吧!
先看一下成品的图片吧:
一. 首先去网站下一些lrc歌词文件,一定要和歌曲的版本对应不然是不会同步的。
这一步是很重要的由于js只能通過事件来上传文件(点击input[type=file]按钮),所以我们不能直接从客户端来获取文件只能通过服务器来获取相应的lrc文件的内容,所以就要用ajax请求来獲取lrc文件的信息代码如下:
//获取歌词内容,后台用'\n'换行所以用'\n'分隔字符串 //初始化让数组为空,分别存储歌词和时间点三. 接下来就是如哬让歌词随着音乐滚动了
//控制让当前歌词显示在中间根据自己的布局设置这里主要用到了组件距浏览器的距离,可以根据自己的布局进荇调整但是有一点是不变的。设歌词到浏览器的距离是x歌词的容器到浏览器的距离为y,容器滚动的距离为z所以歌词距离容器顶端的距离就为:d = x - y - z。
//点击列表选择要播放的歌曲
这里很简单获得歌名发给服务器就ok了。
实现的步骤大概就是这样后台的代码就不贴了,比较簡单如果感兴趣可以自己动手写个的,github地址:
觉得可以可以下下来参考哦给个星也是很棒的!哈哈。