Question

<!doctype html>
<html>
     <head>
          <meta charset="UTF-8" />
      <title>Tytuł strony...</title>
 </head>
 <body>
        <div id="lista_mp3">
            <p>mp3/the_patients_heart_is_beating_very_fast.mp3</p>
            <p>mp3/get_across.mp3</p>
        </div>
        <audio id="player" controls autoplay src="mp3/the_patients_heart_is_beating_very_fast.mp3"></audio>
        <script>
            var lista_mp3 = document.getElementById("lista_mp3");
            var audio = document.getElementById("player");
            var paragrafy = lista_mp3.querySelectorAll("p");
            lista_mp3.addEventListener("click",function(e){
                audio.src=e.target.innerHTML;
                audio.playbackRate = 0.5;
                audio.play();
            },true);
            setTimeout(function(){paragrafy[0].click();console.log("klik "+paragrafy[0].innerHTML);},4000);
            setTimeout(function(){paragrafy[1].click();console.log("klik "+paragrafy[1].innerHTML);},8000);

        </script>
 </body>

你好。

当我在这两段中单击“手动”时，一切正常。 mp3文件被替换，音乐开始播放；）。不幸的是，当我使用click（）方法时，音频没有运行。 setTimeout启动功能，替换mp3地址，但声音没有开始。有趣的是，当我在调用setTimeout之前调用任何段落时，click（）方法将运行音频。到底是怎么回事？有人知道吗对不起我的英语，希望您能理解我的写作。

非常感谢您。

Answer 1

我认为没有用户交互，您就无法播放音频/视频。它可以防止网站惹恼用户。

由于setTimeout函数位于事件侦听器之外，因此无需任何用户交互即可执行，因此无法播放音频。
setTimeout中的click（）方法会触发程序性单击，而不是实际用户的单击，因此click事件侦听器将不会播放音频，但会更改音频元素的src，因为该操作不需要用户干预，因此程序性单击可以也这样做。

如何使用点击方法播放音频？

1 个答案: