0

我正在尝试建立一个网页来宣传自己是一名钢琴家。

在其中一个页面上有可以单击的黑白键。单击黑键时，会出现一个音频播放器（我使用的是 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();
});
});

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

4

1 回答 1

0

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

$(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;
        }
      });
    });
  });
});
于 2013-09-07T23:14:50.187 回答