javascript - 使用 jQuery 单击另一个音频文件时停止音频，同时隐藏链接

Question

当按下播放按钮时，.mp3 文件应该播放；再次单击时，.mp3 文件应该停止并重置音频。

如果在声音已在播放时按下另一个播放按钮，则应停止音频，将其时间重置为 0，然后播放新音频。

目标是一次只播放一种声音，这样在从“key”获取文件名时声音不会重叠，并在之后的 javascript/jquery 中添加目录 + .mp3。

此方法的主要目的是防止用户右键单击目标另存为并掩盖 mp3 位置。

由于某种原因它不起作用。

<span class="play" key="cef83b993c716dd543b6fa4f053cc4a4">Play</span> 
<br>
<span class="play" key="7a5c5d3940f65d81489a0c18f877114b">Play</span>

<script>
var currentAudio = null;
$(".play").click(function () {
    if(currentAudio != null && !currentAudio.paused && currentAudio != this){
      currentAudio.pause();
      currentAudio.currentTime = 0;
      $( this ).removeClass( "pause" );
      $( this ).addClass( "play" ); // switch to play button
    }
    var audio = ("beats/" + $(this).attr('key') + ".mp3");
    if (audio.paused) {
        audio.play();
        currentAudio = audio;
        $( this ).addClass( "pause" ); // switch to pause button
    } else {
        audio.pause();
      $( this ).removeClass( "pause" );
      $( this ).addClass( "play" ); // switch to play button
    }
});
</script>

Answer 1

我想象这样的事情:

 $(".play").on('click',function(){
     var key = $(this).attr('key');     
     EvalSound(key);
 });

var thissound = new Audio();


var currentKey;
function EvalSound(key) {



 if(currentKey !== key)
   thissound.src = "http://designlab360.org/fhi/splash/dev2/audio/" + key + ".mp3";      
   currentKey = key; 

 if (thissound.paused)
            thissound.play();
    else
        thissound.pause();
        thissound.currentTime = 0;
         currentPlayer = thissound;
}

参见http://jsfiddle.net/sjmcpherso/pt3cx1eo/11/