前端|JS不跨域操控网易云音乐外链播放器网易|外链播放器|js跨域|音乐

JS不跨域操控网易云音乐外链播放器今天写个人网站，用到了背景音乐。
一开始想使用H5的audio标签，蛮成功的，但是传到服务器上后加载缓慢（腾讯云服务器学生优惠版，最低的配置），体验很差。
使用外链播放器因此自然而然想到了外链，去看了网易云音乐，网站上可以生成外链播放器！瞬间高兴，网易云的加载速度是很快的，终于可以脱离乌龟一样的加载速度了。
首先把想要的背景音乐加入歌单，然后生成外链播放器

文章图片

复制代码，把这个iframe粘贴进html，使用CSS将其隐藏

iframe { display: none; }

事实证明效果很棒，几乎瞬间就能加载并播放了。
可是这样就没法显示歌名了，而且无法切歌。网易云白色的播放器界面又和我的网站很不搭，并且我自己写了播放控件。
想通过js操作iframe，发现，果然不能跨域。
于是我又陷入了沉思。
JS不跨域操控网易云音乐外链播放器 【前端|JS不跨域操控网易云音乐外链播放器】这次放弃了歌单，从单曲页重新生成了一个外链播放器。
仔细观察了一下iframe的地址。

http://music.163.com/outchain/player?type=2&id=32717169&auto=1&height=32

发现其中有个id是歌曲的id！
观察网易云音乐单曲页的url，发现

http://music.163.com/#/song?id=22688487

是不是发现了什么，嘿嘿。试了一下，换了id就会自动切到相应的歌曲。
我们只需要对id下手，就可以操纵外链播放器切歌了。
批量获取去歌曲名和id 首先把要添加的背景音乐放入一个歌单里，接着进入歌单页，F12，切换到console。

var eles = window.frames["contentFrame"].document.querySelectorAll('a b'); var eleStr = ""; for (var i = 0; i < eles.length; i++) { var name = eles[i].textContent; var id = eles[i].parentNode.getAttribute('href').split('=')[1]; eleStr += "{name: '" + name + "', id: '" + id + "'}, \n"; } eleStr

将这段代码粘上去并执行，得到的是如下结果

“{name: ‘そして仆は途方に暮れる’, id: ‘22822501’}, {name: ‘Will (Piano)’, id:
‘26142087’}, {name: ‘1967’, id: ‘757567’}, {name: ‘風見鶏’, id:
‘22688487’}, {name: ‘美丘 -MAIN THEME-‘, id: ‘452424’}, {name: ‘ONE’,
id: ‘22688371’}, {name: ‘ユーフォリア’, id: ‘29463838’}, {name: ‘あの橋を渡ろう’,
id: ‘26214171’}, {name: ‘紅い瞳に映るセカイ(Arrange ver.)’, id: ‘28556040’},
{name: ‘Hello Mr. Christmas’, id: ‘5330974’}, {name: ‘S-WILL’, id:
‘27890719’}, {name: ‘“冬のソナタ”~初めから今まで’, id: ‘625568’}, {name:
‘Moonrise….Moonset feat.Chieko Kinbara’, id: ‘22800602’}, {name:
‘FEEL ME’, id: ‘499186’}, {name: ‘Itsuka (Volin Guitar)’, id:
‘26142085’}, {name: ‘light dance - guitar’, id: ‘26115581’}, {name:
‘Fade Away’, id: ‘16846096’}, {name: ‘憂いの夕暮れ’, id: ‘29755170’},
{name: ‘Memories of you’, id: ‘36496671’}, {name: ‘My Soul’, id:
‘5308028’}, {name: ‘Only Wish’, id: ‘5079881’}, {name:
‘The truth that you leave’, id: ‘139774’}, {name: ‘やさしい星座’, id:
‘515270’}, {name: ‘雨のち想い出’, id: ‘515278’}, {name: ‘Ever Eternity’,
id: ‘28941070’}, {name: ‘四月は君の嘘’, id: ‘30245039’}, {name:
‘四月は君の嘘～PianoSolo’, id: ‘30245088’}, {name:
‘No One - Guitar & Strings Quartet version -‘, id: ‘30854798’},
{name: ‘雨霏’, id: ‘32717169’}, {name: ‘2003’, id: ‘524655’}, {name:
‘Sad Cafe’, id: ‘5331446’}, {name: ‘Distance’, id: ‘26450086’},
{name: ‘Wedding Bell’, id: ‘22688493’}, {name: ‘始まり’, id: ‘445683’},
“

没错是以对象的形式，将其放入一个数组叫做songName。
写一个随机数函数random，功能为传入数组，返回数组元素个数内的随机值。
这样我们的“下一首”函数可以这样写

function nextSong() { var randomSong = random(songName); //播放第randomSong首歌 var songNameDis = document.querySelector('#bgm'); //显示歌名的地方 songNameDis.textContent = songName[randomSong].name; //显示歌名 var songSrc = "http://music.163.com/outchain/player?type=2&id=" + songName[randomSong].id + "&auto=1&height=32" //组装要播放的歌曲的相应iframe的url document.querySelector('iframe').setAttribute('src', songSrc); //修改该url }

这样即可实现播放下一首。
上一首同理，写个栈即可。
只要有了id，通过这种方法，我么可以对外链播放器进行随意的操作。