1

このフィドルを見てくださいhttp://jsfiddle.net/rabelais/yLdkj/1/

上記のフィドルは、ホバー時にオーディオを再生する 3 つのバーを示しています。これを変更して、代わりにクリックで音楽が再生および一時停止するようにするにはどうすればよいですか。また、あるオーディオが再生されていて、別のオーディオがクリックされた場合、すでに再生中の曲を一時停止するにはどうすればよいですか?

 $("#one").mouseenter(function () {
 $('#sound-1').get(0).play();
 });
$("#one").mouseleave(function () {
$('#sound-1').get(0).pause();
});
$("#two").mouseenter(function () {
$('#sound-2').get(0).play();
});
$("#two").mouseleave(function () {
$('#sound-2').get(0).pause();
});
$("#three").mouseenter(function () {
$('#sound-3').get(0).play();
});
$("#three").mouseleave(function () {
$('#sound-3').get(0).pause();
});
4

3 に答える 3

1

試す

<div id="sound-bars">
    <div id="one" class="bars" data-target="#sound-1"></div>
    <div id="two" class="bars" data-target="#sound-2"></div>
    <div id="three" class="bars" data-target="#sound-3"></div>
</div>
<audio id="sound-1" class="sound">
    <source src="http://angelaandtom.co.uk/lib/audio/Intro-.mp3"></source>
    <source src="http://angelaandtom.co.uk/lib/audio/Intro-.oggvorbis.ogg"></source>
    Your browser isn't compatible.
</audio>
<audio id="sound-2" class="sound">
    <source src="http://angelaandtom.co.uk/lib/audio/you did not listen .mp3"></source>
    <source src="http://angelaandtom.co.uk/lib/audio/you did not listen .oggvorbis.ogg"></source>
    Your browser isn't compatible.
</audio>
<audio id="sound-3" class="sound">
    <source src="http://angelaandtom.co.uk/lib/audio/can you hear me .mp3"></source>
    <source src="http://angelaandtom.co.uk/lib/audio/can you hear me .oggvorbis.ogg"></source>
    Your browser isn't compatible.
</audio>

それから

var $sounds = $('.sound'),
    $bars = $('#sound-bars .bars');
$bars.click(function () {
    var $this = $(this),
        $target = $($this.data('target')),
        target = $target[0];
    $bars.not(this).removeClass('playing');
    $sounds.not($target).each(function () {
        this.pause();
    });

    $this.toggleClass('playing');
    if ($this.hasClass('playing')) {
        target.play();
    } else {
        target.pause();
    }
})

デモ:フィドル

于 2013-11-08T09:38:06.047 に答える
0 
$("#one").click(function () {
  pauseAll();
    $('#sound-1').get(0).play();
});

$("#two").click(function () {
pauseAll();         
    $('#sound-2').get(0).play();
});

$("#three").click(function () {
      pauseAll();
    $('#sound-3').get(0).play();
});
function pauseAll(){
  $("audio").each(function (){
        this.pause();
    });
}

これはここでうまく機能します。

于 2013-11-08T09:29:23.197 に答える
0

divのクリックですべてのオーディオを一時停止してから、関連するオーディオを再生することができます。コードを少し整理することもできます。

jQuery:

$(".playbtn").click(function() {
    // Pause all audio
    $("audio").each(function(index, elem) {
        elem.pause();
    });
    // Grab the associated sound ID
    var soundId = $(this).data("soundid");
    // Play the audio
    $("#sound-"+soundId)[0].play();
});

HTML:

<div class="playbtn" data-soundid="1">Play #1</div>
<div class="playbtn" data-soundid="2">Play #2</div>
<div class="playbtn" data-soundid="3">Play #3</div>
<div class="playbtn" data-soundid="4">Play #4</div>

<audio id="sound-1">
    <source src="http://angelaandtom.co.uk/lib/audio/Intro-.mp3"></source>
    <source src="http://angelaandtom.co.uk/lib/audio/Intro-.oggvorbis.ogg"></source>
    Your browser isn't compatible.
</audio>
<audio id="sound-2">
    <source src="http://angelaandtom.co.uk/lib/audio/Intro-.mp3"></source>
    <source src="http://angelaandtom.co.uk/lib/audio/Intro-.oggvorbis.ogg"></source>
    Your browser isn't compatible.
</audio>
<audio id="sound-3">
    <source src="http://angelaandtom.co.uk/lib/audio/Intro-.mp3"></source>
    <source src="http://angelaandtom.co.uk/lib/audio/Intro-.oggvorbis.ogg"></source>
    Your browser isn't compatible.
</audio>
<audio id="sound-4">
    <source src="http://angelaandtom.co.uk/lib/audio/Intro-.mp3"></source>
    <source src="http://angelaandtom.co.uk/lib/audio/Intro-.oggvorbis.ogg"></source>
    Your browser isn't compatible.
</audio>
于 2013-11-08T09:28:15.603 に答える