使用 Jquery 的多实例音频播放/暂停

Posted 2023-02-25

【中文标题】使用 Jquery 的多实例音频播放/暂停

【英文标题】：Multiple instance Audio play / pause using Jquery

【发布时间】：2015-04-21 11:19:54

【问题描述】：

这是我用来显示曲目的 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 代码，如果你可以并且有时间给我指出一个更好的方法来做到这一点

请给我一个答案。真的很感激！ .谢谢

【参考方案1】：

这个技巧可以完成这项工作，但您需要更改代码以在 .play 或 .pause 上显示播放/暂停

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