时间: 2019-11-16阅读: 52标签: 标签
最近玩博客上瘾了,什么装修的玩意,都想尝试一下。下面介绍一下如何往博客中添加音乐播放器,文章参考自网络。
在浏览游戏百科中的BGM部分,想把页面中的音频像音乐播放器一样自动地一首接一首播放,参考了这篇博客以后,写了以下代码,在开发者工具的控制台里运行就行。应该说适用范围比上述参考博客要广,不受DOM树结构影响。
进入网易云音乐找到自己喜欢的音乐播放界面,点击左侧的生成外链播放器按钮。
var audios = document.getElementsByTagName("audio");for(var i=0;iaudios.length;i++){ var current = audios[i]; current.addEventListener('ended', function () { console.log(`${this.src} ended`); var audioArr = document.getElementsByTagName("audio"); for(var j=0;jaudioArr.length;j++){ if ( this == audioArr[j] ) { var nextAudio = audioArr[j+1] nextAudio.play(); console.log(`${nextAudio.src} started.`) break; } } }, false);}audios[0].play();
如果希望在播放下一首之前能够先缓冲一下,可以添加一些代码
得到如下红框标记的代码,由于博客园不支持iframe标签,需要将iframe标签换成embed
标签。
var audios = document.getElementsByTagName("audio");for(var i=0;iaudios.length;i++){ var current = audios[i]; // current.preload = "auto"; // 缓冲所有 current.addEventListener('ended', function () { console.log(`${this.src} ended`); var audioArr = document.getElementsByTagName("audio"); for(var j=0;jaudioArr.length;j++){ if ( this == audioArr[j] ) { var nextAudio = audioArr[j+1]; nextAudio.play(); audioArr[j+2].preload = "auto"; // 缓冲下一首 console.log(`${nextAudio.src} started.`); break; } } }, false);}audios[0].play();audios[1].preload = "auto"; // 缓冲下一首
然后将代码粘贴到公告设置的公告里面:
10bet,
返回前台页面,就可以看到音乐播放器躺在公告栏了,以后写代码累了,就可以听听歌放松放松了。
如果想多添加一个歌单的话,请参照如下方法:
本文由10bet发布于Web前端,转载请注明出处:自动播放页面中所有audio标签
关键词: