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

Chrome 66新自动播放政策是否会影响audio标签及相关依赖应用?

Chrome 66自动播放政策对

Hey there! Let's break down your questions clearly—this autoplay policy tripped up a lot of devs when it first launched, so I get why you're asking.

一、对

Short answer: No, the <audio> tag itself isn't altered—what's restricted is its automatic playback behavior.

Before Chrome 66, you could drop <audio autoplay> into your code and it'd fire up as soon as the page loaded. Now, that autoplay attribute only works if specific conditions are met:

  • The user has already interacted with your page (a click, tap, or keyboard input all count)
  • Your site is on Chrome's "high media engagement" whitelist (meaning the user has regularly played media here before)
  • The audio is muted (<audio autoplay muted>) — browsers let this slide because it doesn't interrupt the user

All other <audio> attributes (like src, controls, loop) work exactly as they did before. The tag itself is totally intact; it's just the automatic playback trigger that's locked down.

二、会对依赖

It depends entirely on how your app is set up:

  • If your app plays audio without any prior user interaction (like a background soundtrack that starts on page load), then yes—Chrome will block this autoplay. Users might see a tiny playback icon in the address bar, or nothing at all, and your audio won't play as expected.
  • If your autoplay is triggered after a user action (like clicking a "start game" button that plays sound effects), you're in the clear. The policy was designed to allow exactly this kind of user-initiated media.
  • If your audio is muted when it autoplays, that's allowed too. You can then unmute it later once the user interacts with your app (like tapping an "unmute" button).

Also, keep in mind: If a user visits your site often and regularly interacts with your media, Chrome might add your site to its whitelist. But this is based on user behavior, so you can't count on it for all visitors.

三、针对依赖自动播放应用的适配建议

If your app is now broken because of this policy, here are some practical workarounds:

  • 引导用户主动交互: Add a clear "Play Audio" or "Start Experience" button. Once they click it, trigger the audio playback. This is the most reliable, policy-compliant approach.
  • 静音自动播放+手动取消静音: Load your audio with autoplay muted, then when the user interacts with your app, run audio.muted = false to turn on the sound. This lets you preload the audio without annoying users.
  • 检测自动播放是否被拦截: Use the Promise returned by audio.play() to check if playback was blocked, then show a friendly message to users. Example code:
const audioElement = document.querySelector('audio');
audioElement.play()
  .then(() => {
    // 播放成功
  })
  .catch(error => {
    // 自动播放被拦截,提示用户
    console.log("自动播放被拦截!请点击播放按钮启动音频。");
  });

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

火山引擎 最新活动