HTML，无法通过在 Chrome 浏览器中隐藏播放器来在后台自动播放音频文件

Question

代码：

<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>

当欢迎信息开始出现在屏幕上时，我想让播放器在后台播放音频文件而不出现，但是我添加的内容不起作用。 我怎么解决这个问题？ 另外，是否可以将播放器的速度设置为默认值？ 我必须加快速度，以便文本和音乐同步

声音文件链接： https ://djlunatique.com/playstation-4-start-up-sound-effect/

视频文件链接： https ://drive.google.com/file/d/1ncI67cgjRGoQZHF6I0dEpXwvFwCKxFPK/view

浏览器版本：Chrome 108.0.5359.99

Answer 1

我试过你的代码，它似乎有效，请看这里

也许文件名上的空格有问题，另外，有一种简单的方法可以使用 JS 中的 playbackRate 属性更改视频/音频速度（默认速度为 1）。 例如：

<div id="player">
        <audio class="myAudio" autoplay hidden>
        <!--Add the class "myAudio"-->
          <source src="sound.mp3" type="audio/mpeg" />
          #PROBLEM
        </audio>
</div>
<script>
      let audio = document.querySelector(".myAudio");
      <!--Select the audio element-->
      audio.playbackRate = 2;
      <!--Set the speed to 2x-->
</script>

所有这些代码都在我之前链接的页面中，因此您可以轻松更改速度和复制粘贴

编辑：我忘了说，谷歌浏览器有一个影响 mp3 文件的特殊错误，如果音频不起作用，我建议您在其他浏览器中尝试（或者可能更改您的音频格式类型）。

HTML，无法通过在 Chrome 浏览器中隐藏播放器来在后台自动播放音频文件

问题描述

1 个解决方案

解决方案1
0 2022-12-15 18:04:35

HTML，无法通过在 Chrome 浏览器中隐藏播放器来在后台自动播放音频文件

问题描述

1 个解决方案

解决方案1 0 2022-12-15 18:04:35

解决方案1
0 2022-12-15 18:04:35