Chrome浏览器隐藏播放器后音频无法后台自动播放的解决及调速需求

问题描述 #

编写了如下HTML代码，期望页面中欢迎文字开始显示时，隐藏的audio播放器在后台自动播放指定音频，但当前代码无法实现该功能。此外，希望设置audio播放器的默认播放速度，实现文字动画与音频的同步，使用浏览器版本为Chrome 108.0.5359.99。

原代码 #

<html>
<body>
  <section>
     <video src="smoke.mp4" autoplay muted></video>
    
    <div id="player">
    <audio autoplay hidden>
     <source src="Playstation 4 StartUp Sound Effect.mp3" type="audio/mpeg"> #PROBLEM
    </audio>
</div>
    
    <h1>
       <span>W</span>
       <span>E</span>
       <span>L</span>
       <span>C</span>
       <span>O</span>
       <span>M</span>
       <span>E</span>
    </h1> 
   </section>

<style>
body 
  {
  margin: 0;
  padding: 0;
  background:black;
  }

section
  {
  height:100vh;
  background:#000; 
  }

video
  {
  object-fit:cover;
  }
   
h1
 {
 margin:0;
 padding:0;
 position:absolute;
 top:50%;
 transform: translateY(-50%);
 width:100%;
 text-align:center;
 color:#ddd;
 font-size:5em;
 font-family:sans-serif;
 letter-spacing:0.2em;
 }

h1 span
 {
 display:inline-block;
 animation: animate 1s linear forwards;
 }

@keyframes animate
 {
 0%
 { 
  opacity:0;
  transform: rotateY(90deg);
  filter:blur(10px);
 }

100%
 { 
  opacity:1;
   transform: rotateY(0deg);
   filter:blur(0px);
 }
 }

h1 span:nth-child(1)
{
 animation-delay: 1s;
}
    
h1 span:nth-child(2)
{
 animation-delay: 1.5s;
}

h1 span:nth-child(3)
{
 animation-delay: 2s;
}

h1 span:nth-child(4)
{
 animation-delay: 2.5s;
}

h1 span:nth-child(5)
{
 animation-delay: 3s;
}

h1 span:nth-child(6)
{
 animation-delay: 3.75s;
}

h1 span:nth-child(7)
{
 animation-delay: 4s;
}
</style>
     
</body>

<script>
document
  .querySelector('video')
  .addEventListener('ended', function(e) {
    e.target.style.display = 'none';
  });
</script>
</html>

问题原因及解决步骤 #

1. Chrome自动播放限制 #

Chrome的自动播放策略要求音频播放必须关联用户交互，或页面已有正在播放的媒体（如你的静音视频）。原代码中audio的autoplay属性无法触发播放，因为时机不匹配且未利用已有播放上下文。

2. 音频播放时机不匹配 #

原代码中音频尝试页面加载时自动播放，但欢迎文字的第一个动画延迟1s才开始，两者时机不同步。

3. 播放速度设置缺失 #

未设置audio的playbackRate属性，无法调整播放速度匹配动画节奏。

解决步骤 #

• 给audio元素添加唯一ID，方便脚本控制
• 利用页面中已有的静音视频播放上下文，初始化音频加载
• 监听欢迎文字第一个字符的动画开始事件，或通过定时器匹配动画延迟时间触发音频播放
• 设置playbackRate属性调整音频播放速度

修改后的完整代码 #

<html>
<body>
  <section>
     <video src="smoke.mp4" autoplay muted></video>
    
    <div id="player">
    <!-- 添加ID并移除autoplay，由脚本控制播放 -->
    <audio id="welcomeAudio" hidden>
     <source src="Playstation 4 StartUp Sound Effect.mp3" type="audio/mpeg">
    </audio>
</div>
    
    <h1>
       <span>W</span>
       <span>E</span>
       <span>L</span>
       <span>C</span>
       <span>O</span>
       <span>M</span>
       <span>E</span>
    </h1> 
   </section>

<style>
body 
  {
  margin: 0;
  padding: 0;
  background:black;
  }

section
  {
  height:100vh;
  background:#000; 
  }

video
  {
  object-fit:cover;
  }
   
h1
 {
 margin:0;
 padding:0;
 position:absolute;
 top:50%;
 transform: translateY(-50%);
 width:100%;
 text-align:center;
 color:#ddd;
 font-size:5em;
 font-family:sans-serif;
 letter-spacing:0.2em;
 }

h1 span
 {
 display:inline-block;
 animation: animate 1s linear forwards;
 }

@keyframes animate
 {
 0%
 { 
  opacity:0;
  transform: rotateY(90deg);
  filter:blur(10px);
 }

100%
 { 
  opacity:1;
   transform: rotateY(0deg);
   filter:blur(0px);
 }
 }

h1 span:nth-child(1)
{
 animation-delay: 1s;
}
    
h1 span:nth-child(2)
{
 animation-delay: 1.5s;
}

h1 span:nth-child(3)
{
 animation-delay: 2s;
}

h1 span:nth-child(4)
{
 animation-delay: 2.5s;
}

h1 span:nth-child(5)
{
 animation-delay: 3s;
}

h1 span:nth-child(6)
{
 animation-delay: 3.75s;
}

h1 span:nth-child(7)
{
 animation-delay: 4s;
}
</style>
     
</body>

<script>
const video = document.querySelector('video');
const welcomeAudio = document.getElementById('welcomeAudio');
// 设置音频播放速度，根据实际需要调整数值，比如0.9或1.1
welcomeAudio.playbackRate = 1.0;

// 利用视频播放的上下文初始化音频，绕过自动播放限制
video.addEventListener('play', () => {
  // 预加载音频
  welcomeAudio.load();
});

// 监听第一个字符的动画开始事件，触发音频播放
document.querySelector('h1 span:first-child').addEventListener('animationstart', () => {
  welcomeAudio.play().catch(err => {
    // 捕获播放失败的情况，比如用户未交互（虽然有视频上下文，但极端情况仍可能失败）
    console.log('音频播放失败:', err);
  });
});

video.addEventListener('ended', function(e) {
  e.target.style.display = 'none';
});
</script>
</html>

额外说明 #

• 确保音频文件路径正确，若与HTML文件不在同一目录，需调整src路径
• playbackRate的取值范围通常是0.25到4.0，可根据文字动画的节奏反复测试调整，达到最佳同步效果
• 若仍存在播放问题，可尝试添加一个隐藏的用户交互触发（如页面加载后监听任意点击事件，提前激活音频上下文）

内容的提问来源于stack exchange，提问作者user14178341