原创

zplayer播放器、网易云音乐直链


先安利一个迷你的音乐播放器,精简小巧,一共就200多行js,可以学习一下;github下载后放进项目,在需要使用的页面引入js及css即可使用

下载地址 zplayer

实例创建:

img

创建实例时需要用到音乐的外链url、图片pic、歌词lrc几个参数,于是我百度了一下,整理了如何从网易云获取这些参数:

1.音乐外链url

这里用的方法时网易云音乐提供的直链API:

https://music.163.com/song/media/outer/url?id=xxx.mp3

这里的“id=xxx.mp3”中的“xxx”是根据你需要的歌曲id进行替换的,例如歌曲《水星记》在线试听地址为:

https://music.163.com/#/song?id=441491828

则替换id后的直链url为:

https://music.163.com/song/media/outer/url?id=441491828.mp3

2.歌词lyc

歌词当然还是用网易云配套的啦,这里要用到带有审查元素的浏览器(例如Chrome,Firefox),打开网易云试听页面,选择你要抓取歌词的歌曲后,按F12打开审查窗口,点击NetWork切换面板,按F5刷新请求截取数据,在窗口中找到一个lyric开头的文件,右击选择copy response:

img

然后点击窗口中的Console切换面板,输入x= ,然后Ctrl+V粘贴刚才复制的数据,回车:

img

继续在窗口中输入x.lrc.lyric ,回车后窗口中输出的文本就是歌词了;有些外语歌有中文歌词,这时可以输入x.tlyric.lyric后回车,窗口中输出的就是中文歌词了:

img

img

3.封面pic

封面的获取就很简单了,在你要获取的封面图片上右键,选择检查,在打开的Elements窗口中的img标签中选中src属性里的链接即可:

img

也可根据自己需要的尺寸替换url中对应的param参数,如

原本:    http://p1.music.126.net/U-0qobZAtfxplzArDlXQiQ==/6655343883007883.jpg?param=130y130    
替换后:http://p1.music.126.net/U-0qobZAtfxplzArDlXQiQ==/6655343883007883.jpg?param=300y300
正文到此结束