网站音频无法自动播放?求Chrome兼容的HTML解决方案
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:
mutedis the key here—it's what lets Chrome allow auto-play without user interactioncontrols="false"hides the play/pause buttonsloopkeeps the audio playing on repeat- I swapped
audio/mp3foraudio/mpegsince 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
autoplayattribute 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




