同时播放一HTML元素的音频 [英] Play one HTML audio element at a time

问题描述

我有一个单页上许多音频元素，我想只有一个元素同时播放。也就是说，如果有一个音频元素被玩，我点击播放另一个元素，在previous 音频元素应该暂停。

我发现一个jQuery code从另一个问题，要做到这一点，但使用的图像播放/暂停控制。我使用的是内置的控制='控制'为音频元素而不是属性。是否有可能使用jQuery控制在音频元素中的播放/暂停功能，在我的情况？

下面是我的HTML code

 ＆LT; D​​IV＆GT;
    ＆LT; p类=歌曲＆GT;＆LT; H3＆GT;＆LT;强＆GT;＃1简介 - 誓言＆LT; / STRONG＆GT;＆LT; / H3＆GT;＆LT; P＆GT;
    ＆LT;音频类=播放SRC = HTTP：//geo-samples.beatport.com/lofi/5005876.LOFI.mp3控制='控制'preLOAD =无＆GT;
        ＆LT; I＆GT;您的浏览器不支持音频元素＆lt; / I＆GT;
    ＆LT; /音频＆GT;
＆LT; / DIV＆GT;＆LT; D​​IV＆GT;
    ＆LT; p类=歌曲＆GT;＆LT; H3＆GT;＆LT;强＆GT;＃2的状态恍惚年混合2013＆LT; / STRONG＆GT;＆LT; / H3＆GT;＆LT; / P＆GT;
    ＆LT;音频类=播放SRC = HTTP：//geo-samples.beatport.com/lofi/5005933.LOFI.mp3控制='控制'preLOAD =无＆GT;
        ＆LT; I＆GT;您的浏览器不支持音频元素＆lt; / I＆GT;
     ＆LT; /音频＆GT;
＆LT; / DIV＆GT;
 

下面是jQuery的code

  $（文件）。就绪（函数（）{
    VAR curPlaying;    $（函数（）{
        $（回放）。点击（函数（五）{
            亦即preventDefault（）;
            VAR歌= $（本）。接下来（'声音'）[0];
            如果（song.paused）{
                song.play（）;
                如果（curPlaying）$（音频，＃+ curPlaying）[0] .pause（）;
            }其他{song.pause（）; }
            curPlaying = $（本）.parent（）[0] .ID;
        }）;
    }）;
}）;
 

jQuery的code似乎并没有对我的工作。

解决方案

  $（函数（）{
    $（音频）。在（玩，函数（）{
        $（音频）。不是（这个）。每个（函数（指数，音频）{
            audio.pause（）;
        }）;
    }）;
}）;
 

见样品在的jsfiddle

I have many audio elements on a single page and I want to play just one element at a time. That is if one audio element is playing and I click on play on another element, the previous audio element should pause.

I found a jQuery code from another question to do this but that uses an image as play/pause controls. I'm using the inbuilt controls='controls' attribute for the audio element instead. Is it possible to use jQuery to control the play/pause feature for the audio element in my case?

Here is my HTML code

<div>
    <p class="song"><h3><strong>#1 Intro - The Oath</strong></h3><p>
    <audio class="playback" src=http://geo-samples.beatport.com/lofi/5005876.LOFI.mp3 controls='controls' preload="none">
        <I>Your browser does not support the audio element.</I>
    </audio>
</div>

<div>
    <p class="song"><h3><strong>#2 A State Of Trance Year Mix 2013</strong></h3></p>
    <audio class="playback" src=http://geo-samples.beatport.com/lofi/5005933.LOFI.mp3 controls='controls' preload="none">
        <I>Your browser does not support the audio element.</I>
     </audio>
</div>

Here is the jQuery code

$(document).ready(function() {
    var curPlaying;

    $(function() {
        $(".playback").click(function(e) {
            e.preventDefault();
            var song = $(this).next('audio')[0];
            if(song.paused){
                song.play();
                if(curPlaying) $("audio", "#"+curPlaying)[0].pause();
            } else { song.pause(); }
            curPlaying = $(this).parent()[0].id;
        });
    });
});

The jQuery code doesn't seem to be working for me.

解决方案

$(function(){
    $("audio").on("play", function() {
        $("audio").not(this).each(function(index, audio) {
            audio.pause();
        });
    });
});

See sample at JSFiddle

这篇关于同时播放一HTML元素的音频的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！