javascript - 下一个音频标签开始时停止音频标签

Question

我正在尝试建立一个网页，以提升自己的钢琴演奏能力。

在其中一页上，可以单击黑白键。单击黑键后，将出现一个音频播放器(我正在使用HTML5音频标签)。
问题是，当单击下一个键时，上一个键的音频仍会继续。我认为该解决方案位于Jquery(JS？)中，但我对此并不十分熟悉。

该网页为http://www.pianoson.nl/samples.htm

这是HTML:

<div class="content">
        <div id="p1" class="panel">
            <audio controls="controls" src="media/hallelujah.mp3" codecs="mp3">
                Your browser does not support the audio element.
            </audio>
            <p>Hallelujah - Leonard Cohen</p>
        </div>
</div>

目前，这里还有5首歌曲，但是当您看到它时，它会变得更加清晰。
这是当前的JS:

$(document).ready(function(){

$('.sample').click(
function(){
    var $panel = $('#' + $(this).data("panel"));
    var $visibles = $('.panel:visible')
    $visibles.animate({
            'left' : '2000px',
            'top'  : '0px'
        },2000,function(){
            $(this).hide();
        });

    $panel.animate({
        'left' : '50%',
        'top'  : '50%',
        'margin-left' : '-175px',
        'margin-top' : '-35px'
    },2000).show();
});
});

如果有人知道为什么第一个“飞入”的音频播放器为什么只向右飞，那么也欢迎您提供有关该主题的帮助。

Answer 1

我认为不需要数据。这是我的建议:

$(document).ready(function(){
  var aud = $('audio'), itog = 0;
  $('.sample').each(function(i){
    $(this).click(function(){
      var au = aud[i];
      au.toggle(2000, function(){
        if(itog === 0){
          au.animate({top: '50%', left: '50%', marginTop: '-35px', marginLeft: '-175px'}, 2000); itog = 1;   
        }
        else{
          au.pause(); au.animate({top:0, left:'2000px'}, 2000); itog = 0;
        }
      });
    });
  });
});