如何在点击时播放声音？

Posted 2023-02-25

【中文标题】如何在点击时播放声音？

【英文标题】：How to play a sound on click ?

【发布时间】：2015-07-14 13:22:13

【问题描述】：

我用 javascript 制作的应用程序有问题。当我点击某物时，我想要播放声音。如果我再次单击它，我希望声音重新开始。

我的问题是因为播放声音的时间比我单击两次所需的时间长，每次单击都不会启动声音。

用我的应用创建一个 JSFiddle 需要很长时间，所以我想知道是否有人可以使用这个 JSFiddle 解决这个问题：http://jsfiddle.net/jamiehap/jtCA9/12/

基本上我希望能够继续点击播放按钮，声音会重新开始:)

下面是我在小提琴中使用的代码:)

     $(document).ready(function () 
          var audioElement = document.createElement('audio');
          audioElement.setAttribute('src', 'http://static1.grsites.com/archive/sounds/quotes/quotes006.mp3');
          audioElement.setAttribute('autoplay:false', 'autoplay');
          //audioElement.load code above. if you take out :false from the code the file will auto play than everythin works the same after that()
          $.get();
          audioElement.addEventListener("load", function () 
              audioElement.play();
          , true);


          $(document).keypress(function (e) 
              if (e.which == 13)  //press enter the audio will play
                  audioElement.play();

               else if (e.which == 32)  //press spacebar the audio will                             pause play
                  audioElement.pause();
              
          );

// the code below wil allow you to click the play and stop button with the mouse
          $('.play-button').click(function ()  
              audioElement.play();
          );


          $('.pause').click(function () 
              audioElement.pause();
          );
      );

【参考方案1】：

在调用 play 之前将当前时间设置为零

$('.play-button').click(function () 
    audioElement.pause();
    audioElement.currentTime = 0;
    audioElement.play();
);

【讨论】：

哇真的这么简单，我试一试，然后回复你的欢呼:)

【参考方案2】：

播放前重新加载音频文件：

$('.play-button').click(function () 
audioElement.load();
audioElement.play();
);

【讨论】：

干杯，你的也很好，但恐怕 epascarello（上图）首先给出了一个可行的答案:((