Question

这是我用来显示曲目的HTML标记。我有一些Jquery来完成一些要求。但最重要的是，我无法找到一种方法来播放/暂停使用Jquery的多个实例音频。我之前已经问过这个问题。你可能会注意到我的代码即时通讯Jquery Noob。试了几个小时的谷歌搜索。但没有运气

        <div class="track-item">
            <span>Track Uploaded by  - <a href="#">DJ Hardwell</a></span>

            <div class="track-default-options">
                <audio src="http://195.154.217.103:8117/;mp3"></audio>
                <div class="track-total-time">0.00 | 48.37</div>

                <div class="track-seek-bar"></div>
                <button class="play btn btn-xs btn-primary"><i class="fa fa-play"></i> Play</button>
                &nbsp;
                <button id="pause" class="btn btn-xs btn-success"><i class="fa fa-download"></i> Download</button>
                &nbsp;
                <button class="btn btn-xs btn-danger share"><i class="fa fa-share"></i> Share</button>
                <div class="track-uploaded-date">
                    <p>Uploaded on 3 days ago</p>
                </div>
            </div>
            <div class="track-share-options" style="display: none">
                <button type="button" class="btn btn-xs btn-danger share-close"><i class="fa fa-minus"></i>
                    Show Less
                </button>
                &nbsp;
                <br/>
                <button class="btn btn-xs btn-facebook"><i class="fa fa-facebook"></i> | Facebook</button>
                &nbsp;
                <button class="btn btn-xs btn-twitter"><i class="fa fa-twitter"></i> | Twitter</button>
                &nbsp;
                <button class="btn btn-xs btn-google-plus"><i class="fa fa-google-plus"></i> | Google+
                </button>
            </div>
        </div>

这是我用来更改某些按钮状态以及隐藏和显示共享按钮的Jquery代码

// ****************************** //
     // Track - Play / Share //
// ****************************** //

// Share Button
$(document).on('click' , '.share' , function(event){
    event.preventDefault();
        $(this).closest('.track-default-options').fadeOut('slow' , function(){
            $(this).next().closest('.track-share-options').fadeIn('slow');
    });
});
$(document).on('click' , '.share-close' , function(event) {
    event.preventDefault();
        $(this).closest('.track-share-options').fadeOut('slow' , function(){
            $(this).prev().closest('.track-default-options').fadeIn('slow');
        });
});


// Play Button

$(document).on('click' , '.play' , function(event){
    event.preventDefault();
    $(this).html('<i class="fa fa-pause"></i> Pause');
    $(this).addClass('playing');
    $(this).prev('.track-seek-bar').addClass('track-seek-bar-active');
    $(this).prevAll('.track-total-time').css('visibility' , 'visible');
});

// Pause Button
$(document).on('click' , '.playing' , function(){
    $(this).html('<i class="fa fa-play"></i> Play');
    $(this).removeClass('playing');
    $(this).prev('.track-seek-bar').removeClass('track-seek-bar-active');
    $(this).prevAll('.track-total-time').removeAttr('style');

});

现在一切都很好。按钮隐藏和显示等。我真正需要的是一次只播放一个音频。

作为示例，如果音频已经在浏览器中播放，如果用户选择播放另一首曲目，而之前选择的音乐仍在播放，则需要暂停并立即开始新选择的音频。

这是先前就同一主题提出的问题。但它现在非常不同。My Previous Question。我试过用新的HTML来处理它。虽然运气不好。这就是为什么我在这里。

我也有FIDDLE设置。你真的可以看到我的实际要求和我无法理解的事情。

因为我猜我写了一个可怕的Jquery代码，如果你可以并且有时间指出我更好的方法来做它

请建议我这个答案。生病真的很感激！。感谢

Answer 1

此技巧可以胜任，但您需要更改代码以在.play或.pause上显示播放/暂停

$('audio').on('play', function(){
    $('audio').not(this).trigger('pause')
})

使用Jquery进行多个实例音频播放/暂停

1 个答案: