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

stop audio tag when next audio tag starts

本文关键字：音频 标签 启动 下一个      更新时间：2023-09-26

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

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

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

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

$(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;
        }
      });
    });
  });
});
相关文章：