今天写个人网站,用到了背景音乐。
一开始想使用H5的audio标签,蛮成功的,但是传到服务器上后加载缓慢(腾讯云服务器学生优惠版,最低的配置),体验很差。
因此自然而然想到了外链,去看了网易云音乐,网站上可以生成外链播放器!瞬间高兴,网易云的加载速度是很快的,终于可以脱离乌龟一样的加载速度了。
首先把想要的背景音乐加入歌单,然后生成外链播放器
复制代码,把这个iframe粘贴进html,使用CSS将其隐藏
事实证明效果很棒,几乎瞬间就能加载并播放了。
可是这样就没法显示歌名了,而且无法切歌。网易云白色的播放器界面又和我的网站很不搭,并且我自己写了播放控件。
想通过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。
将这段代码粘上去并执行,得到的是如下结果
“{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,功能为传入数组,返回数组元素个数内的随机值。
这样我们的“下一首”函数可以这样写