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();
});
});

如果有人知道为什么第一个音频播放器会飞入＆＃39;只有飞到右边，也欢迎有关该主题的帮助。

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;
        }
      });
    });
  });
});

下一个音频标签启动时停止音频标签

1 个答案: