使图像在单击时播放声音-但之后并不总是有效？答案

【问题标题】：Making an image plays a sound on-click -- but doesn't always work after?使图像在单击时播放声音-但之后并不总是有效？
【发布时间】：2021-06-14 10:14:21
【问题描述】：

我正在尝试创建一个 HTML 页面，其中包含点击播放声音的图像。每张图片的第一次点击效果很好，但随后的点击并不总是有效；他们似乎又需要一些耐火的加载时间？

我有三个音频文件：“two.mp3”、“five.mp3”和“one.mp3”。我还有三个不同颜色的圆形图像，音频文件被分配到。我的代码基于 Stack Overflow 答案here。

这是我的代码：

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="stylesheet.css">
    <script src= "drag.js"></script>
  </head>

    <img id="a" src="jspsych/img/blue.png" class="dragme" data-state="play"/>
    <audio id = "two" src="jspsych/audio/five.mp3" preload>
        Your browser does not support the <code>audio</code> tag
    </audio>

    <img id="b" src="jspsych/img/orange.png" class="dragme" data-state="play"/>
    <audio id = "five" src="jspsych/audio/two.mp3" preload>
        Your browser does not support the <code>audio</code> tag
    </audio>

    <img id="c" src="jspsych/img/black.png" class="dragme" data-state="play"/>
    <audio id = "one" src="jspsych/audio/one.mp3" preload>
        Your browser does not support the <code>audio</code> tag
    </audio>


    <script language="javascript" type="text/javascript">


        document.getElementById("a").addEventListener("click", function(e){
            var state = e.currentTarget.dataset.state;
            if (state == "play") {
                document.querySelector("audio").play();
                e.currentTarget.dataset.state = "pause";
            }
            else {
                document.querySelector("audio").pause();
                e.currentTarget.dataset.state = "play";
            }   
        });

        document.getElementById("b").addEventListener("click", function(e){
            var state = e.currentTarget.dataset.state;
            if (state == "play") {
                document.getElementById("five").play();
                e.currentTarget.dataset.state = "pause";
            }
            else {
                document.getElementById("five").pause();
                e.currentTarget.dataset.state = "play";
            }   
        });

        document.getElementById("c").addEventListener("click", function(e){
            var state = e.currentTarget.dataset.state;
            if (state == "play") {
                document.getElementById("one").play();
                e.currentTarget.dataset.state = "pause";
            }
            else {
                document.getElementById("one").pause();
                e.currentTarget.dataset.state = "play";
            }   
        });


    </script>

</html>

可能有人有一些改进的想法吗？

【问题讨论】：

加载需要时间吗？？

标签： javascript html audio

【解决方案1】：

将状态设置为“播放”后忘记再次播放：

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="stylesheet.css">
  <script src="drag.js"></script>
</head>

<body>
  <img id="a" src="jspsych/img/blue.png" class="dragme" data-state="play" />
  <audio id="two" src="https://www.w3schools.com/tags/horse.mp3" preload>
        Your browser does not support the <code>audio</code> tag
    </audio>

  <img id="b" src="jspsych/img/orange.png" class="dragme" data-state="play" />
  <audio id="five" src="https://www.w3schools.com/tags/horse.mp3" preload>
        Your browser does not support the <code>audio</code> tag
    </audio>

  <img id="c" src="jspsych/img/black.png" class="dragme" data-state="play" />
  <audio id="one" src="https://www.w3schools.com/tags/horse.mp3" preload>
        Your browser does not support the <code>audio</code> tag
    </audio>


  <script language="javascript" type="text/javascript">
    document.getElementById("a").addEventListener("click", function(e) {
      var state = e.currentTarget.dataset.state;
      if (state == "play") {
        document.querySelector("audio").play();
        e.currentTarget.dataset.state = "pause";
      } else {
        document.querySelector("audio").pause();
        e.currentTarget.dataset.state = "play";
        document.querySelector("audio").play();
      }
    });

    document.getElementById("b").addEventListener("click", function(e) {
      var state = e.currentTarget.dataset.state;
      if (state == "play") {
        document.getElementById("five").play();
        e.currentTarget.dataset.state = "pause";
      } else {
        document.getElementById("five").pause();
        e.currentTarget.dataset.state = "play";
        document.getElementById("five").play();
      }
    });

    document.getElementById("c").addEventListener("click", function(e) {
      var state = e.currentTarget.dataset.state;
      if (state == "play") {
        document.getElementById("one").play();
        e.currentTarget.dataset.state = "pause";
      } else {
        document.getElementById("one").pause();
        e.currentTarget.dataset.state = "play";
        document.getElementById("one").play();
      }
    });
  </script>
</body>

</html>

【讨论】：

【解决方案2】：

我认为发生的事情是在加载页面时加载音频文件，因此它第一次正确播放没有任何延迟，现在由于文件来自互联网，因此需要一些加载时间也不要忘记您在音频标签中提到了preload 属性，这意味着必须在播放之前完全加载音频，因此在您的情况下，您可以在播放音频的任何位置添加以下行

//Replace this
document.getElementById("one").play()

//With this
document.getElementById("one").oncanplaythrough=function(){
this.play()
}

上面的行在缓冲区中加载了足够多的文件块，以便可以播放它，因此它会在很大程度上减少延迟，我认为它可能会对您有所帮助，您还需要从音频标签中删除preload

【讨论】：