网易云音乐随机听歌组件

发表于 更新于 分类于

本文实现了一种网易云音乐随机听歌的组件

网易云音乐一直提供外链播放器，这为博客系统的搭建带来了新组件。

然而，官方的插件只能播放一首音乐，而如果我们想要实现随机听音乐的效果，就只能靠自己魔改代码了。

先来分析一下网易云音乐的外链播放器组件。我们在网易云音乐网页版中，选取一首歌曲，在歌曲页面中点击“生成外链播放器”，可以得到一串外链播放器的代码，如下所示（以一首《卡农》为例）：

1
<iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=330 height=86 src="https://music.163.com/outchain/player?type=2&id=29414800&auto=0&height=66"></iframe>

这段代码嵌入到网页中，则会是下面的效果：

这个组件实现了音乐播放功能，但是只能循环播放一首音乐。我们想播放多首音乐，怎么办？

先来分析上面这段代码吧。可以看到，这段代码定义了一个iframe框架，其中border/width/height等属性是对框架长宽和边框等的设置，而能让我们听歌的关键在于最后的那一段src链接。

那么我们看一下这个链接：https://music.163.com/outchain/player?type=2&id=29414800&auto=0&height=66

链接通过GET传参，定义了四个参数，分别是type/id/auto/height。研究了一下发现，id是音乐的标识符，auto定义了是否允许自动播放（0为不允许，1为允许），height定义了播放器高度。那么如果我们想播放多首音乐，只要改变id的参数就行了。

下面上代码，一共分三块。

第一块是HTML，这里定义了一个iframe框架和一个按钮，包在一个div里面。

1
2
3
4
5
6
<div id='MusicPlayer' style="width:100%;height:100%;">
<div id='mp-content' style="width:100%;height:auto;">
<!--replace this xml with netease iframe-->
</div>
<button id='mp-shuffle-btn' onclick='shuffle("1");'>切歌</button>
</div>

第二块是JavaScript代码，实现了随机切歌的功能

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<script>
var lastIndex = -1;
// 下面定义了一个数组mList，这个数组的每个元素均为一首音乐的id，注释后面是乐曲名
var mList=[
'1492283139',//疾如猛火
'1392438000',//Raindrop
'1910966474',//华灯星聚
'5197160',//Proud of you
'1645112',//For River(Johnny Version)
'5284529',//祝福-叶倩文
'757757',//朝(早晨)-ゴンチチ
'28219176',//虹之间
'29097535',//彩蝶舞夏
'5188837',//卡农-1
'478507889',//卡农-2
'1439409941',//Rainbow Mile
'569214126',//可能否
'27946926',//Positive Outlook
'1645140'//To the moon(Ending Version)
]
// 一首歌曲的id可以通过网易云音乐网页版获取
// 查看方法为在网易云音乐网页版里，点进一首歌的主页，然后读取浏览器地址栏里面的URL
// 此时的URL里会有一个"id=xxxxx"，这里就是音乐的id。

// 接下来我们定义一个切歌的函数，其中auto参数指定是否允许随机播放
function shuffle(auto){
var mlen  = mList.length;        
var index = Math.floor(Math.random()*100000%mlen); // 随机取下标
if(index==lastIndex){ // 如果下标取重了（随机选到的歌曲和当前播放的相同）
if(index+1<mlen) index += 1; // 则切换到播放列表的下一首歌
else index = 0; // 如果正在播放最后一首歌，那么切换到第一首歌
}
lastIndex = index;
var mID  = mList[index];
var mXML = '<iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=100% height=92 paddingwidth="0" src="https://music.163.com/outchain/player?type=2&id={{id}}&auto={{auto}}&height=66"></iframe>'; //定义iframe框架的代码
mXML = mXML.replace('{{id}}',mID);
mXML = mXML.replace('{{auto}}',auto);
document.getElementById('mp-content').innerHTML = mXML; //将新iframe代码插入HTML
}
shuffle('0'); //加载页面时一并载入歌曲，但是自动播放设置为关闭
</script>

第三段是css样式表，可以帮我们把组件弄得好看一点

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<style>
#mp-shuffle-btn{
 width:84px;
 height: 42px;
 float: right;
 margin: 0px 0 0 0 ;
 border: 0px;
 padding: 0 0px 0 0px;
 background-color: #046c99;
 color: #fff;
 font-size: 16px;
 font-weight: bold;
 box-shadow: 0px 0px 4px rgba(127,127,198,0.5);
 cursor: pointer;
 }
#mp-shuffle-btn:hover {background-color: #0587bf;} 
#mp-shuffle-btn:active {background-color: #0587bf;}
</style>

使用时把这三段代码放在一起，粘贴到网页内既可。

实际使用效果：

（PS：另一个小组件，随机句子切换，可以查看我朋友Eamon的博客文章）

（PPS：我发现如果把iframe里面的URL修改一下，把type设置为0，id设置为歌单id，height加高100px，变成 https://music.163.com/outchain/player?type=0&id=774883428&auto=0&height=166 这个样子，则可以播放歌单里面的音乐，还能选歌，感觉好神奇😂）

旧评论系统备份：

1
2
3
WarrenZhang(2022-09-08 19:56:49):
	评论区放个链接：https://music.163.com/outchain/player?type=0&id=2444388851&auto=0&height=166
	这个歌单是我自己的，不过网易云音乐的外链好像只能展示前十首音乐qwq