时间: 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标签
关键词：