www.webdeveloper.com
Results 1 to 9 of 9

Thread: Javascript embedded sound source switch?

Hybrid View

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

    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
    349
    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
    76
    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
    349
    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
    76
    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

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