Переключение звука при нажатии?

Question

. Посмотрите на эту скрипку. http://jsfiddle.net/rabelais/yLdkj/1/

На приведенной выше скрипке показаны три бара, которые на ходу воспроизводят аудио. Как изменить это, чтобы музыка воспроизводилась и вместо этого нажимала паузу. Также, если один звук воспроизводится, а другой нажат, как можно продолжить паузу в уже воспроизведенной песне?

$("#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(); 
}); 

Answer 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(); 
    } 
}) 

Демо: Fiddle

Answer 2

Вы можете проверить паузу на весь звук при щелчке 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> 

Answer 3

$("#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(); 
    }); 
} 

Это прекрасно работает here.