今天寫個人網站，用到了背景音樂。 一開始想使用H5的audio標簽，蠻成功的，但是傳到服務器上后加載緩慢（騰訊云服務器學生優惠版，最低的配置），體驗很差。
因此自然而然想到了外鏈，去看了網易云音樂，網站上可以生成外鏈播放器！瞬間高興，網易云的加載速度是很快的，終于可以脫離烏龜一樣的加載速度了。
首先把想要的背景音樂加入歌單，然后生成外鏈播放器
復制代碼，把這個iframe粘貼進html，使用CSS將其隱藏
iframe { display: none;}事實證明效果很棒，幾乎瞬間就能加載并播放了。 可是這樣就沒法顯示歌名了，而且無法切歌。網易云白色的播放器界面又和我的網站很不搭，并且我自己寫了播放控件。
想通過js操作iframe，發現，果然不能跨域。 于是我又陷入了沉思。
這次放棄了歌單，從單曲頁重新生成了一個外鏈播放器。 仔細觀察了一下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下手，就可以操縱外鏈播放器切歌了。
首先把要添加的背景音樂放入一個歌單里，接著進入歌單頁，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，通過這種方法，我么可以對外鏈播放器進行隨意的操作。
新聞熱點
疑難解答
