www.webdeveloper.com
Results 1 to 9 of 9

Thread: Javascript embedded sound source switch?

  1. #1
    Join Date
    Oct 2011
    Location
    Hamilton, Ontario
    Posts
    82

    Javascript embedded sound source switch?

    I wanted to try this and I'm not really sure if it is possible right now, but here goes.

    I am trying to use the following code to make the source of a embedded sound switch to different sound files based on which link is clicked:

    javascript:
    scales=Array("sounds/scales/Mscale.wma", "sounds/scales/hminscale.wma", "sounds/scales/nminscale.wma", "sounds/scales/mminscale.wma", "sounds/scales/chrscale.wma");

    function Mscale() {
    document.getElementById("scale").src=scales[0]
    }
    function Hmscale() {
    document.getElementById("scale").src=scales[1]
    }
    function Nmscale() {
    document.getElementById("scale").src=scales[2]
    }
    function Mmscale() {
    document.getElementById("scale").src=scales[3]
    }
    function Chrscale() {
    document.getElementById("scale").src=scales[4]
    }

    html:
    <table><tr><td>
    <a href="#scst" onclick="javascript:Mscale();">Major</a><br>
    <a href="#scsthm" onclick="javascipt:Hmscale();">Harmonic Minor</a><br>
    <a href="#scstnm" onclick="javascript:Nmscale();">Natural Minor</a><br>
    <a href="#scstmm" onclick="javascript:Mmscale();">Melodic Minor</a><br>
    <a href="#scstchr" onclick="javascript:Chrscale();">Chromatic scale</a>
    </td>
    <td>
    <embed src="sounds/scales/Mscale.wma" autostart="false" id="scale" loop="false" controls="controls" width="150" height="50"></embed>
    </td>
    </tr></table>

    I also tried the following HTML without the javascript functions, but that didn't work either:

    <table><tr><td>
    <a href="#scst" onclick="javascript:document.getElementById("scale").src=scales[0];">Major</a><br>
    <a href="#scsthm" onclick="javascript:document.getElementById("scale").src=scales[1];">Harmonic Minor</a><br>
    <a href="#scstnm" onclick="javascript:document.getElementById("scale").src=scales[2];">Natural Minor</a><br>
    <a href="#scstmm" onclick="javascript:document.getElementById("scale").src=scales[3];">Melodic Minor</a><br>
    <a href="#scstchr" onclick="javascript:document.getElementById("scale").src=scales[4];">Chromatic scale</a>
    </td>
    <td>
    <embed src="sounds/scales/Mscale.wma" autostart="false" id="scale" loop="false" controls="controls" width="150" height="50"></embed>
    </td>
    </tr></table>

    cant' get it to work, any thoughts?

  2. #2
    Join Date
    Jan 2005
    Posts
    366
    Do you get any error messages?
    What browser(s) did you try with.

    Dunno if it is a typo when you pasted the code, but your second example has double-quotes within a double-quoted string, which is a mistake - either use single-quotes for one set, or else backslash-escape the internal set.

  3. #3
    Join Date
    Oct 2011
    Location
    Hamilton, Ontario
    Posts
    82
    i tried it in IE and Chrome and fixed the quote issue you mentioned and it still isn't working... and no error messages either way.

  4. #4
    Join Date
    Jan 2005
    Posts
    366
    Do you have this on a test page somewhere - I think we need to see the whole page in context.

  5. #5
    Join Date
    Jan 2010
    Location
    Belgium
    Posts
    319
    Hi,

    I would love to help, but I'm not sure I understand what you mean?

    Do you mean you want to have a playlist. Once the user clicks a song from the playlist, embedded in a-tags, the song starts to play?

    If so, check out jPlayer

    Christophe

  6. #6
    Join Date
    Oct 2011
    Location
    Hamilton, Ontario
    Posts
    82
    Quote Originally Posted by Christophe27 View Post
    Hi,

    I would love to help, but I'm not sure I understand what you mean?

    Do you mean you want to have a playlist. Once the user clicks a song from the playlist, embedded in a-tags, the song starts to play?

    If so, check out jPlayer

    Christophe
    No I'm not looking for a playlist, just some way to have one embedded element for which the source changes by clicking different links. I can't figure out why the code above didn't work so any suggestions would be welcome. THe sound files aren't songs, just short sound clips.

  7. #7
    Join Date
    Jan 2010
    Location
    Belgium
    Posts
    319
    A song is also a sound clip, whether it is short or long.

    You probably need to do this in HTML5 with the audio element. Then, I guess you need some scripting so that onclick, the current song stops playing, the src"" (or <source>) will be changed and then trigger the play() method agiain.

    That should work fine

    Christophe

  8. #8
    Join Date
    Oct 2011
    Location
    Hamilton, Ontario
    Posts
    82
    Quote Originally Posted by Christophe27 View Post
    A song is also a sound clip, whether it is short or long.

    You probably need to do this in HTML5 with the audio element. Then, I guess you need some scripting so that onclick, the current song stops playing, the src"" (or <source>) will be changed and then trigger the play() method agiain.

    That should work fine

    Christophe
    I need someone to help me by suggesting specific HTML and javascript I can use? could someone in this post please provide some code suggestions whether it's HTML5 or CSS or Javascript or whatever. Any suggestion would be appreciated

  9. #9
    Join Date
    Jan 2010
    Location
    Belgium
    Posts
    319
    This small audioplayer is tested in Chrome and IE9. It didn't work in Firefox, but that probably has something to do with MIME types (not a lot of time to check it out)

    Code:
    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8" />
    		<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
    		<title>HTML 5 audio player demo</title>
    		
    		<script>
    		
    		$(document).ready(function() {
    			
    			$('button').click(function() {
    			
    				var music = document.getElementById('audiotag1');
    				
    				if ( music.paused ) {
    				
    					music.play();
    					$(this).text('Pause');
    					
    				} else {
    				
    					music.pause();
    					$(this).text('Play');
    				
    				}
    				
    			});
    			
    			$('.song').click(function() {
    				
    				var path = $(this).find('span').text();
    				
    				$('audio').attr('src', path);
    				
    				var music = document.getElementById('audiotag1');
    				
    				music.play();
    				
    				$('button').text('Pause');
    			
    			});
    			
    			
    		});
    		</script>
    		
    		<style>
    			.song:hover {
    				cursor: pointer;
    			}
    		</style>
    	</head>
    
    <body>
    
    	<audio id="audiotag1" src="/path/to/first/song.mp3" preload="auto"></audio>
    	<button>Play</button>
    	
    	<div class="song">
    		First song
    		<span style="visibility:hidden;">/path/to/first/song.mp3</span>
    	</div>
    	
    	<div class="song">
    		Second song
    		<span style="visibility:hidden;">/path/to/second/song.mp3</span>
    	</div>
    		
    </body>
    </html>

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

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



Recent Articles