Javascript embedded sound source switch?

[thewebiphyer]

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?

[omnicity]

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.

[thewebiphyer]

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.

[omnicity]

Do you have this on a test page somewhere - I think we need to see the whole page in context.

[Christophe27]

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

[thewebiphyer]

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.

[Christophe27]

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