动手打造一款网易云音乐网页播放器插件

作为一个前端狗,自己动手写插件为博客添加新功能,那是必须的。于是最近做了一个网易云音乐播放器插件,可以放在博客上听歌用,再也不用愁服务器上就那几首歌不够听了,而且想听哪个歌单还可以手动设置,自我感觉还挺好。

左边显示专辑图像、歌手名-歌曲名,中间是播放控制以及进度条,右边是切换播放模式和展开播放列表

下面来说说我的思路,一个播放器,基本的功能有:播放/暂停、上一首/下一首、循环/顺序/随机播放、显示进度条和当前播放时间。这些功能都可以用函数去实现,整体封装进一个对象,播放器初始化的时候就是new一个对象的实例。

播放列表可展开/收起

判断一首歌是否播放完毕时,这块我想了好久,一开始想的是实时获取audio元素的currentTime属性,跟歌曲总长度相比,一致就说明这首歌播放完了。但是实际上这种方法根本不可行:因为实时获取属性是死循环判断,会阻塞JavaScript执行线程;第二是因为currentTime属性是一个double值,而歌曲总长度是一个大概的整数值,这没法相等。后来用的方法是给audio元素绑定ended事件监听器(原来audio标签还有这个属性,我一开始都不知道,早知道就不用浪费那么多时间了),这样一来,一旦一首歌播放完了,就会自动切换另外一首播放。

为了优化性能,我启用了Web本地存储,首次获取歌单JSON数据时会把JSON字符串存入localstorage,第二次调用播放器插件时就无需再获取歌单,直接从localstorage调用。由于网易云有外链时间限制,一个外链接只能当天用,所以我还存了获取歌单JSON时的时间,下次获取时比对时间,是同一天就不用再获取歌单,不是的话就需要重新获取。

调用这个插件的话,直接在网页head标签里引入以下JavaScript文件。最好提前引入jQuery,不引入也可以,我做了检测,如果没引入jQuery会自动引入。

<head>
    <meta charset='UTF-8'>
    <script src="jquery.min.js"></script>
    <!--jQuery也可以不手动引入-->
    <script src="https://staticfile.oss-cn-shenzhen.aliyuncs.com/js/musicplayer-compressed.js" async="async"></script>
</head>

最后要特别感谢一下提供网易云歌曲API的博主,他的这篇文章里有详细的网易云API调用说明。原本还想自己写后端接口的,但是时间不多了,前天刚把WordPress站点恢复(卸载软件的时候不小心把Web运行环境也给卸了,然后从一个十天前的快照备份把整个服务器恢复……)。

发表评论

电子邮件地址不会被公开。 必填项已用*标注

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据