Question

我想要一个Mp3播放器like this one.我的搜索脚本每页显示10个结果。我想为每个搜索结果项插入一个mp3。

当我点击＆＃34;播放＆＃34;时，播放器打开正常，当我点击＆＃34;停止＆＃34;时，播放器停止正常，但是当我点击＆＃34; Play＆＃34;然后点击＆＃34; Play＆＃34;另一个结果是，第一个没有停止，第二个打开正常。

当我点击＆＃34;播放＆＃34;我需要自动播放mp3;当我点击＆＃34;停止＆＃34;玩家必须停下来。

<script>
$(function(){ // DOM READY shorthand

 $(".player").hide();

 $('.playertext').click(function( e ){
 var SH = this.SH^=1; // "Simple toggler"
 $(this).text(SH?'Stop':'Play')
       .css({backgroundPosition:'0 '+ (SH?-18:0) +'px'})
       .next(".player").slideToggle();
});

});

</script>

HTML：

 <div id="home">
<div  class="playertext">Play</div>

<div class="player">
   <audio controls>
     <source       src="http://media.easyuploadservice.com/telugu%20mp3/Mahankali%20(2011)/01%20-%20%20Keechaka%20Vadha.mp3" type="audio/mpeg"/>
   </audio>
 </div>

<div  class="playertext">Play</div>

 <div class="player">
    <audio controls>
      <source src="http://media.easyuploadservice.com/telugu%20mp3/Mahankali%20(2011)/03%20-%20%20Oo%20Lala.mp3" type="audio/mpeg"/>
   </audio>
 </div>

</div>

Fiddle

Answer 1

我一直在尝试一些事情。请检查这是否是您想要的：fiddle

$(".player").hide();
$('.playertext').click(function (e) {
    var $player_div = $(this).next(".player"),
        $player = $("audio", $(this).next(".player"));

    $(".player").not($player_div).each(function (index, item) {
        var $player = $(this),
            $text = $player.prev(".playertext");
        $text.get(0).SH = 0;
        if ($player.is(":visible")) {
            $player.slideToggle(function () {
                $text.text('Play');
            });
        }
        $("audio", this).get(0).pause();
    });

    var SH = this.SH ^= 1; // "Simple toggler"
    $(this).text(SH ? 'Stop' : 'Play')
        .css({
        backgroundPosition: '0 ' + (SH ? -18 : 0) + 'px'
    })
        .next(".player").slideToggle(function () {
        $(this).is(":visible") ? $player.get(0).play() : $player.get(0).pause();
    });
});

使用jquery多次隐藏和显示div

1 个答案: