jquery play only the music link that's clicked stop other sounds. [Archive]

View Full Version : jquery play only the music link that's clicked stop other sounds.

iaa

04-19-2014, 03:17 AM

Hi all please help me - appreciated.

My need is to play mp3 music when I "click" (onclick) on the links. Right now when I click the link (001) I have written to a "onmouseout" function - which I need to be Onclick to stop insted of onmouseout - In my code all the sounds play however, it docent stop.

Simply put, my need is to: when I click on the link 001 (<a href="#" id="link_sound_001">001</a>) the rest of the sounds should not play, only 001 should play. When click on the link (002) only 002 should play.

Please help and much appreciated I have added my code below.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<style type='text/css'>
audio{
display:none;
}
</style>

<script type="text/javascript">
window.onload=function(){

function pauseAudio(){
document.getElementById("audio").pause()
}


var plyr_sound_001 = document.getElementById('plyr_sound_001');
var link_sound_001=document.getElementById('link_sound_001');
link_sound_001.onclick=function(){
plyr_sound_001.play();
return false;
};
var link_sound_001=document.getElementById('link_sound_001');
link_sound_001.onmouseout=function(){
plyr_sound_001.pause();
plyr_sound_001.currentTime = 0;
return false;
};

var plyr_sound_002 = document.getElementById('plyr_sound_002');
var link_sound_002=document.getElementById('link_sound_002');
link_sound_002.onclick=function(){
plyr_sound_002.play();
return false;
};
var link_sound_002=document.getElementById('link_sound_002');
link_sound_002.onmouseout=function(){
plyr_sound_002.pause();
plyr_sound_002.currentTime = 0;
return false;
};

var plyr_sound_003 = document.getElementById('plyr_sound_003');
var link_sound_003=document.getElementById('link_sound_003');
link_sound_003.onclick=function(){
plyr_sound_003.play();
return false;
};
var link_sound_003=document.getElementById('link_sound_003');
link_sound_003.onmouseout=function(){
plyr_sound_003.pause();
plyr_sound_003.currentTime = 0;
return false;
};

var plyr_sound_004 = document.getElementById('plyr_sound_004');
var link_sound_004=document.getElementById('link_sound_004');
link_sound_004.onclick=function(){
plyr_sound_004.play();
return false;
};
var link_sound_004=document.getElementById('link_sound_004');
link_sound_004.onmouseout=function(){
plyr_sound_004.pause();
plyr_sound_004.currentTime = 0;
return false;
};


};
</script>

</head>

<body>


<audio id="plyr_sound_001" controls preload="auto">
<source src="mp3/002_SoundClipsfromSoundBible.com.mp3"></source>
Your Browser does not support please use (Firefox 3.5+, Chrome 3+, Opera
10.5+, Safari 4+, IE 9+) browsers.
</audio>



<audio id="plyr_sound_002" controls preload="auto">
<source src="mp3/003_SoundClipsfromSoundBible.com.mp3"></source>
Your Browser does not support please use (Firefox 3.5+, Chrome 3+, Opera
10.5+, Safari 4+, IE 9+) browsers.
</audio>




<audio id="plyr_sound_003" controls preload="auto">
<source src="mp3/004_SoundClipsfromSoundBible.com.mp3"></source>
Your Browser does not support please use (Firefox 3.5+, Chrome 3+, Opera
10.5+, Safari 4+, IE 9+) browsers.
</audio>



<audio id="plyr_sound_004" controls preload="auto">
<source src="mp3/004_SoundClipsfromSoundBible.com.mp3"></source>
Your Browser does not support please use (Firefox 3.5+, Chrome 3+, Opera
10.5+, Safari 4+, IE 9+) browsers.
</audio>


<a href="#" id="link_sound_001">001</a> <br />
<a href="#" id="link_sound_002">002</a> <br />
<a href="#" id="link_sound_003">003</a> <br />
<a href="#" id="link_sound_004">004</a> <br />

</body>
</html>

Awaiting your reply.

Thank you.

jscheuer1

04-19-2014, 06:43 AM

Both the javascript and the HTML are changed:

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<style type='text/css'>
audio{
display:none;
}
</style>

<script type="text/javascript">
window.addEventListener && addEventListener('load', function(){
var snds = document.getElementsByTagName('audio'), s = snds.length, so = {},
slinks = document.getElementById('soundlinks').getElementsByTagName('a');

function playasound(e){
if(so[this.id].playing){so[this.id].sound.pause(); so[this.id].sound.currentTime = 0; so[this.id].playing = false;}
else {
for(var s in so){
if(so[s].playing){so[s].sound.pause(); so[s].sound.currentTime = 0; so[s].playing = false;}
}
so[this.id].sound.play(); so[this.id].playing = true;
}
e.preventDefault();
}

while(--s > -1){
so[slinks[s].id] = {sound: snds[s], playing: false};
slinks[s].addEventListener('click', playasound, false);
(function(s){
snds[s].addEventListener('ended', function(){so[slinks[s].id].playing = false;}, false);
})(s);
}
}, false);
</script>

</head>

<body>


<audio id="plyr_sound_001" controls preload="auto">
<source src="mp3/002_SoundClipsfromSoundBible.com.mp3"></source>
Your Browser does not support please use (Firefox 3.5+, Chrome 3+, Opera
10.5+, Safari 4+, IE 9+) browsers.
</audio>



<audio id="plyr_sound_002" controls preload="auto">
<source src="mp3/003_SoundClipsfromSoundBible.com.mp3"></source>
Your Browser does not support please use (Firefox 3.5+, Chrome 3+, Opera
10.5+, Safari 4+, IE 9+) browsers.
</audio>




<audio id="plyr_sound_003" controls preload="auto">
<source src="mp3/004_SoundClipsfromSoundBible.com.mp3"></source>
Your Browser does not support please use (Firefox 3.5+, Chrome 3+, Opera
10.5+, Safari 4+, IE 9+) browsers.
</audio>



<audio id="plyr_sound_004" controls preload="auto">
<source src="mp3/004_SoundClipsfromSoundBible.com.mp3"></source>
Your Browser does not support please use (Firefox 3.5+, Chrome 3+, Opera
10.5+, Safari 4+, IE 9+) browsers.
</audio>


<div id="soundlinks">
<a href="#" id="link_sound_001">001</a> <br />
<a href="#" id="link_sound_002">002</a> <br />
<a href="#" id="link_sound_003">003</a> <br />
<a href="#" id="link_sound_004">004</a> <br />
</div>

</body>
</html>

The browser cache may need to be cleared and/or the page refreshed to see changes.

If you want more help, please include a link to the page on your site that contains the problematic code so we can check it out.

iaa

04-19-2014, 01:54 PM

Dear Sir

I thank you so much for the time taken to look into my matter and for fixing it. I really value your service and advice - your a great Asset to the forum and I thank you once again and many a times!

Its working and that was my requirement which you posted all right Sir. I triedposting in many other and never was a reply and some had to ask to re post - huh you were just spot on.

Thank you so much Sir: jscheuer1.

It works and thank you so much God bless you!