推广 热搜: page  使用  音视频  个数  选择  搜索引擎  企业  百度  可以  父亲 

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

   日期:2024-12-20     作者:0pxbg    caijiyuan   评论:0    移动:http://ww.kub2b.com/mobile/news/8998.html
核心提示:今天写个人网站,用到了背景音乐。一开始想使用H5的audio标签,蛮成功的,但是传到服务器上后加载缓慢(

今天写个人网站,用到了背景音乐。
一开始想使用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,功能为传入数组,返回数组元素个数内的随机值。
这样我们的“下一首”函数可以这样写

本文地址:http://ww.kub2b.com/news/8998.html     企库往 http://ww.kub2b.com/ ,  查看更多

特别提示:本信息由相关用户自行提供,真实性未证实,仅供参考。请谨慎采用,风险自负。

 
 
更多>同类最新文章
0相关评论

文章列表
相关文章
最新动态
推荐图文
最新文章
点击排行
网站首页  |  关于我们  |  联系方式  |  使用协议  |  版权隐私  |  网站地图  |  排名推广  |  广告服务  |  积分换礼  |  网站留言  |  RSS订阅  |  违规举报  |  鄂ICP备2020018471号