You need to enable JavaScript to run this app.
最新活动
大模型
产品
解决方案
定价
生态与合作
支持与服务
开发者
了解我们

网站音频无法自动播放?求Chrome兼容的HTML解决方案

Fixing Auto-Looping Audio in Chrome

Hey there! I totally get how frustrating it is when code that used to work suddenly breaks, especially when you're still learning. Let's break down why your old code isn't working anymore and get you a solution that works with Chrome's current rules.

First off, the main issue here is Chrome's updated autoplay policy. Modern browsers (Chrome included) now block auto-playing audio that has sound unless the user has already interacted with the page—this is to stop annoying, unexpected sounds from popping up as soon as someone visits a site. Your old code didn't account for this new rule, so Chrome is blocking it.

Here are two solutions that fit your needs (auto-play, loop, no controls) and work in Chrome right now:

Option 1: Muted Auto-Play (No User Interaction Needed)

If you're okay with the audio starting muted (you can add a button later to unmute it if you want), this will work immediately when the page loads:

<audio loop autoplay muted controls="false">
  <source src="audiofile1.mp3" type="audio/mpeg">
  Your browser doesn't support audio playback.
</audio>

Quick notes on this code:

  • muted is the key here—it's what lets Chrome allow auto-play without user interaction
  • controls="false" hides the play/pause buttons
  • loop keeps the audio playing on repeat
  • I swapped audio/mp3 for audio/mpeg since it's the standard MIME type for MP3 files, which helps with cross-browser compatibility

Option 2: Sound Auto-Play After User Interaction

If you need the audio to start with sound, Chrome requires the user to interact with the page first (like clicking anywhere). We can use a little JavaScript to trigger the audio as soon as someone clicks the page:

<audio id="bgAudio" loop controls="false">
  <source src="audiofile1.mp3" type="audio/mpeg">
  Your browser doesn't support audio playback.
</audio>

<script>
// Start the audio when the user clicks anywhere on the page (only once)
document.addEventListener('click', function() {
  const audio = document.getElementById('bgAudio');
  if (!audio.played.length) {
    audio.play();
  }
});
</script>

How this works:

  • We removed the autoplay attribute since we're triggering playback manually
  • The first time the user clicks anywhere on the page, the audio starts looping with sound
  • The controls stay hidden, just like you wanted

Why Your Old Code Broke

Your original code used both <embed> (a pretty outdated tag that modern browsers don't prioritize) and an <audio> tag without the muted attribute. Chrome's autoplay policy blocks that un-muted auto-play request, which is why it stopped working.

内容的提问来源于stack exchange,提问作者Eeli Salmi

火山引擎 最新活动