时间戳

首页 > 解决方案 > 如何使用 HTML 和 Javascript 在循环中自动播放页面加载？

javascript - 如何使用 HTML 和 Javascript 在循环中自动播放页面加载？

问题描述

我在 SO 上找到了很多关于自动播放、循环播放和加载播放的帮助。但是，似乎没有答案可以一起回答所有这些问题。

我尝试了 2 个解决方案： 解决方案#1 - HTML

<audio src="" id="music" loop muted></audio>

解决方案#1 - JS

window.addEventListerner('load',()=>{
document.querySelector('#music').src = music.data[rand].preview //I am setting this to a .mp3 file
document.getElementById("music").play()
document.getElementById('music').muted = false
}

该方案要求用户在播放 mp3 之前与 DOM 进行交互

现在，解决方案 #2是使用 iframe

<iframe loop="true" src="" allow="autoplay" id="music" style="display:none"></iframe>

解决方案#2 JS 看起来像：

window.addEventListerner('load',()=>{
document.querySelector('#music').src = music.data[rand].preview //I am setting this to a .mp3 file
}

此解决方案会自动播放 .mp3 文件，但不会循环播放。

有人可以提供一个在加载时自动播放并循环播放的解决方案。我只使用 .mp3。没有视频。谢谢！

标签： javascripthtml

解决方案

我得到了解决方案：使用视频标签并将其作为 mp3 播放。它有点hacky

<video type="audio/mpeg" src="" allow="autoplay" id="music" style="display:none" loop autoplay></video>

在 JS 文件中执行

Inside any of your event listener
document.querySelector('#music').play()

这将在页面加载时自动播放并保持循环。

推荐阅读