javascript onload 播放音频文件

Question

我有一个带有按钮的音频文件，当我单击它时播放音频，当我再次单击音频暂停时，我也想在页面直接加载音频播放而不单击按钮时

我在 html 中尝试了autoplay ，但没有成功

我试过allow="autoplay"也没有用

我试过window.addEventListener('load')也没有用

我读到我应该使用muted ，但它也没有用

我正在使用 chrome 和 firefox

那么如何使此音频在刷新或加载页面时工作，当我单击按钮时，音频将暂停，当我再次单击时，音频将暂停

我搜索了堆栈溢出但没有解决我的问题

 let audio = document.querySelector('.music audio'); let audioBtn = document.querySelector('.music.musicBtn i'); audio.volume = 0.2; window.addEventListener("load", () => { audio.play(); }); audioBtn.addEventListener("click", () => { if (audio.paused) { audio.play(); audioBtn.classList.add('fa-volume-up'); audioBtn.classList.remove('fa-volume-mute'); } else { audio.pause(); audioBtn.classList.add('fa-volume-mute'); audioBtn.classList.remove('fa-volume-up'); } });

 .musicBtn { background: transparent; padding: 1.5rem 2rem; font-size: 3rem; border: none; cursor: pointer; }

 <div class="music"> <audio id="audio" style="display:none;" src="music/music.mp3" allow="autoplay" controls autoplay loop></audio> <button class="musicBtn"><i class="fas "></i></button> </div> <script src="https://kit.fontawesome.com/9e5ba2e3f5.js" crossorigin="anonymous"></script>

Answer 1

你不能，因为浏览器只允许作为用户交互的结果播放声音。 您可以尝试劫持任何单击或鼠标移动以启用声音的平缓，但没有办法真正做到仅在加载时。

https://developer.mozilla.org/en-US/docs/Web/Media/Autoplay_guide

Answer 2

您可以通过单击 DOM 加载上的播放按钮来尝试手动交互，以便播放音频，

if (document.readyState === 'complete') {
   document.getElementById('#playButton').click();
}