CSS Codes
CSS Layouts
Results 1 to 3 of 3

Thread: jquery play only the music link that's clicked stop other sounds.

  1. 04-19-2014, 03:17 AM #1
    iaa
    iaa is offline Junior Coders
    Join Date
    Apr 2014
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default jquery play only the music link that's clicked stop other sounds.

    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.

    Code:
    <!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()
        }

        <!-- sound defined on one window load-->
        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;
        };  
        <!-- sound defined on one window load-->

};
</script> 

</head>

<body>

 <!-- sound -->
<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>
<!-- sound -->



<!-- sound -->
<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>

<!-- sound -->


<!-- sound -->
<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>
<!-- sound -->


<!-- sound -->
<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>
<!-- sound -->


<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.
    Reply With Quote Reply With Quote
  2. 04-19-2014, 06:43 AM #2
    jscheuer1's Avatar
    jscheuer1
    jscheuer1 is offline Global Moderator
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    Both the javascript and the HTML are changed:

    Code:
    <!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>

 <!-- sound -->
<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>
<!-- sound -->



<!-- sound -->
<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>

<!-- sound -->


<!-- sound -->
<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>
<!-- sound -->


<!-- sound -->
<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>
<!-- sound -->

<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.
    Last edited by jscheuer1; 04-20-2014 at 03:04 AM. Reason: add ended function - later: minor code improvement
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate
    Reply With Quote Reply With Quote
  3. 04-19-2014, 01:54 PM #3
    iaa
    iaa is offline Junior Coders
    Join Date
    Apr 2014
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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!
    Reply With Quote Reply With Quote
« Previous Thread | Next Thread »

Similar Threads

  1. Resolved How can I make my .swf play only when clicked?
    By mathewonsu in forum Flash
    Replies: 4
    Last Post: 11-24-2009, 07:36 PM
  2. Music Controls: Changing image when clicked...?
    By flurderoy in forum JavaScript
    Replies: 1
    Last Post: 08-20-2007, 09:51 PM
  3. play music thats on your computer...
    By queerfm in forum Looking for such a script or service
    Replies: 14
    Last Post: 01-06-2007, 05:49 AM
  4. How to put music to play on my page
    By Opasna in forum HTML
    Replies: 9
    Last Post: 03-27-2006, 04:28 PM
  5. sounds over link plz help
    By Saddam Hussein in forum HTML
    Replies: 10
    Last Post: 05-21-2005, 08:31 PM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  

Forum Rules