自动播放页面中所有audio标签

来源:http://www.chinese-glasses.com 作者:Web前端 人气:120 发布时间:2020-03-16
摘要:时间: 2019-11-16阅读: 52标签: 标签     最近玩博客上瘾了,什么装修的玩意,都想尝试一下。下面介绍一下如何往博客中添加音乐播放器,文章参考自网络。 在浏览游戏百科中的BGM部分

时间: 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();

   10bet 1

如果希望在播放下一首之前能够先缓冲一下,可以添加一些代码

得到如下红框标记的代码,由于博客园不支持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 2

然后将代码粘贴到公告设置的公告里面:

10bet 3

10bet, 

返回前台页面,就可以看到音乐播放器躺在公告栏了,以后写代码累了,就可以听听歌放松放松了。

如果想多添加一个歌单的话,请参照如下方法:

10bet 4

本文由10bet发布于Web前端,转载请注明出处:自动播放页面中所有audio标签

关键词:

频道精选

最火资讯