You are just changing the class, you actually need to call play and pause for the element. refer jsfiddle
HTML
<h2>Sound 1</h2>
<div class="play" id="btn1">play</div>
<h2>Sound 2</h2>
<div class="play" id="btn2">play</div>
<h2>Sound 3</h2>
<div class="play" id="btn3">play</div>
<!-- SOUNDS -->
<audio id="sound1">
<source src="http://www.bigsoundbank.com/sounds/ogg/0595.ogg" type="audio/ogg" />
</audio>
<audio id="sound2">
<source src="http://www.bigsoundbank.com/sounds/ogg/0580.ogg" type="audio/ogg" />
</audio>
<audio id="sound3">
<source src="http://www.bigsoundbank.com/sounds/ogg/0003.ogg" type="audio/ogg" />
</audio>
Script -
$('.play').click(function(){
var $this = $(this);
var id = $this.attr('id').replace(/btn/, '');
$this.toggleClass('active');
if($this.hasClass('active')){
$this.text('pause');
$('audio[id^="sound"]')[id-1].play();
} else {
$this.text('play');
$('audio[id^="sound"]')[id-1].pause();
}
});
Here ^= is the starts with selector, which selects all audios and using id of the button, we actually play or pause the exact clicked audio.