见我的博客 https://blog.wyue.site/2020/04/12/1/

转载前请联系我，联系方式请见我博客 https://blog.wyue.site/

一直想做个博客中的音乐播放器，之前做的那个版本因为啥懂不懂就瞎写的，性能太差，搞不好就把网页搞卡死了。最近重新修改了一下，新版本就流畅很多了。纯前端实现，可以用在各种静态博客中，比如hexo，hugo等。

可以先体验一下, 点这里哦

大概思路

主要是用到APlayer这个组件，自己写的部分主要在于网易云音乐的部分。

简而言之就是利用网易云音乐的api，通过网易云音乐的歌单id，获取音乐的url地址，歌词，歌名，歌手信息等。

网易云音乐api

关于网易云音乐的api，如果不滥用的话，可以用我搭在heroku上的这个

https://y-cloud-music-api.herokuapp.com/

api网址就是这个，想要看接口细节的话，可以通过点开链接看文档，也可以看我的代码实现的例子。

代码

首先上代码，代码在这里

https://gist.github.com/xfdywy/57b61f13a1a4e48d69c611bdbff407d2

自己copy下来到一个文件里面去，搞一个http server，然后用类似 http://localhost:端口号 就可以跑起来看效果了。比如你用vscode，可以右击用 open with live server，又或者你用webstorm，直接点“浏览器打开”应该就可以。

如果你直接点开html文件，可能会遇到问题，因为你是file：//协议打开的，需要是http：//协议（我猜的我不懂）。

分析

大概分这么几步

先写个网页ui
引用APlayer模块
跟网易云音乐api交互，获得歌曲信息
把歌曲信息传给APlayer进行播放。

新版本修改了逻辑，我先获取第一首歌的信息，然后传给播放器播放，之后再去获取剩下的，并且所有api的交互都是用axio进行异步操作，保证网页的流畅性，可以一边播放一边获取剩下的歌的信息，这样就不会出现网页等好久都刷不出来的情况了。等第一首歌放到一半，后面的肯定也都加载出来了，完美~

网页ui

我写的巨丑。。。。哪位大佬给改改，帮我改改吧。
其实就是一个输入框，一个提交按钮，一个播放器占位符,
gist代码的27行以上。

APlayer 模块

根据APlayer的文档，new一个对象就好了，在gits文件的第200行。

文档在这里：

https://aplayer.js.org/#/zh-Hans/

需要传几个参数，比如

var ap = new APlayer({container: document.getElementById('player1'),lrcType: 1,fixed: false,audio: first_song,});

container是之前html代码预留的div
lrcType是歌词的类型，我这里选1，具体可以看文档
fixed: 是否开启吸底模式,
audio: 参数是一个 array，每个元素是一个对象，每个对象需要的属性下面来说。

歌曲信息

主要是歌曲的url地址，为了美观还需要歌词，封面等，需要通过api获取。

 var input = document.getElementById("subdiv2");

首先获取输入框的歌单id

 var playlist =   downloadplaylist(input.textContent);playlist = await playlist;

然后获取歌单中所有歌曲的id

 var first_song = await  loadplaylist([playlist[0]]) ;

先获取第一首歌的信息，之后传给播放器，开始播放。

var rest_songs =  await  loadplaylist(playlist.slice(1)) ;ap.list.add(rest_songs);

之后再同步获取剩下的歌曲信息，并且加到播放器中去。

我代码的逻辑是：

downloadplaylist 函数输入为网易云音乐的歌单id，返回值为歌单中所有歌曲的id。

loadplaylist 函数的输入为所有歌曲的id，输出为上面说到的audio需要的 array

gist代码 160-173行是调用其他几个小函数与api进行交互，分别获取信息

这里注意我们143到152行提出get请求后，这些请求是以async的方式同时请求出去的，互相不阻塞。直到所有的get请求都发出去了，我们再利用await的方法把结果都拿到（154-156行），这样性能会比较好。

178-185行是把其中一首歌的信息封装到一个对象里面去，tmp。然后把tmp放到 res这个array里面去，不断循环这段代码就可以把歌单里面所有歌曲的信息都封装好了。

总结

主要是学习了axio的使用，以及async 和await的使用。
此外82到93行简单试验了一下addEventListener的用法。

作为一个外行，如果有更好的想法，欢迎与我交流，可以在博文下面留言，也可以去博客的留言板留言。

我博客音乐的网址： https://blog.wyue.site/music

APlayer 网址： https://aplayer.js.org/#/

axio 网址：http://axios-js.com/

静态博客网页中的网易云音乐播放器相关推荐

HTML+CSS+JAVASCRIPT 高仿低配网页版网易云音乐播放器 1
HTML+CSS+JAVASCRIPT 高仿低配网页版网易云音乐播放器前言没有使用任何框架,只是想用最简单纯js的代码实现下前台: Javascript+jQuery 后台: php/nodej ...
HTML网页调用网易云音乐播放器代码
表现形式一:单曲播放调用代码: <iframe frameborder="no" border="0" marginwidth="0" ...
移动应用开发——uni-app框架仿网易云音乐播放器学习心得
目录一.uni-app框架介绍 1.什么是 uni-app 2.为什么要选择uni-app 3.uni-app 统一规范 4.uni-app功能框架二.开发工具与项目创建 1.开发工具 2.项目创 ...
vue3 + TypeScript + vant +pinia 实现网易云音乐播放器
vue3 + TypeScript + vant +pinia 实现网易云音乐播放器实现功能每日推荐私人FM 歌单广场排行榜歌手歌曲播放 mv播放上下滑动切换云盘上传用户登录歌单创 ...
YesPlayMusic:一个高颜值多音频资源的网易云音乐播放器
都2023年了还有人不知道这款开源免费下载的多音频,高颜值的音乐播放器吗(文末有下载地址) 首先我们来看一下YesPlayMusic的特性和网易云音乐播放器的功能大同小异,少了歌曲评论的功能,这个功 ...
第三方网易云音乐播放器ieaseMusic Mac中文版v1.3.4版
ieasemusic mac中文版是目前mac平台上最好的网易云音乐播放器,与网易云音乐官方客户端最大的区别是,官方的就是「客户端」,完全按照其产品内容进行直接堆砌布局,而 ieaseMusic 是基 ...
树莓派云音乐c语言,基于树莓派的红外遥控版网易云音乐播放器
基于树莓派的红外遥控版网易云音乐播放器.下面是遥控键盘示意图: CH- CH CH+ << >> || - + EQ 0 100+ 200+ 1 2 3 4 5 6 7 8 9 ...
linux树莓派网易云音乐,基于树莓派的红外遥控版网易云音乐播放器
基于树莓派的红外遥控版网易云音乐播放器.下面是遥控键盘示意图: CH- CH CH+ << >> || - + EQ 0 100+ 200+ 1 2 3 4 5 6 7 8 9 ...
如何在网页中嵌入网易云音乐
1.用 iframe 标签实现第一种:无播放列表 1 <iframeframeborder="0"border="1" 2 marginwidth=&q ...

静态博客网页中的网易云音乐播放器