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

2024-04-27 15:05:29

字体：大中小

来源：转载

供稿：网友

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

今天写个人网站，用到了背景音乐。一开始想使用H5的audio标签，蛮成功的，但是传到服务器上后加载缓慢（腾讯云服务器学生优惠版，最低的配置），体验很差。

使用外链播放器

因此自然而然想到了外链，去看了网易云音乐，网站上可以生成外链播放器！瞬间高兴，网易云的加载速度是很快的，终于可以脱离乌龟一样的加载速度了。

首先把想要的背景音乐加入歌单，然后生成外链播放器

外链播放器

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

iframe { display: none;}

事实证明效果很棒，几乎瞬间就能加载并播放了。可是这样就没法显示歌名了，而且无法切歌。网易云白色的播放器界面又和我的网站很不搭，并且我自己写了播放控件。

想通过js操作iframe，发现，果然不能跨域。于是我又陷入了沉思。

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，通过这种方法，我么可以对外链播放器进行随意的操作。

上一篇：Webpack + Tomcat + Nginx/Apache实现前后端开发分离

下一篇：children和childNodes差异