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
    84

    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
    375
    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
    84
    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
    375
    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
    84
    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

"

"

X vBulletin 4.2.2 Debug Information

  • Page Generation 0.12912 seconds
  • Memory Usage 3,100KB
  • Queries Executed 13 (?)
More Information
Template Usage (30):
  • (1)SHOWTHREAD
  • (1)ad_footer_end
  • (1)ad_footer_start
  • (1)ad_global_above_footer
  • (1)ad_global_below_navbar
  • (1)ad_global_header1
  • (1)ad_global_header2
  • (1)ad_navbar_below
  • (1)bbcode_quote
  • (1)footer
  • (1)forumjump
  • (1)forumrules
  • (1)gobutton
  • (1)header
  • (1)headinclude
  • (1)headinclude_bottom
  • (7)memberaction_dropdown
  • (1)navbar
  • (4)navbar_link
  • (1)navbar_moderation
  • (1)navbar_noticebit
  • (1)navbar_tabs
  • (2)option
  • (7)postbit
  • (7)postbit_onlinestatus
  • (7)postbit_wrapper
  • (1)showthread_list
  • (1)spacer_close
  • (1)spacer_open
  • (1)tagbit_wrapper 

Phrase Groups Available (6):
  • global
  • inlinemod
  • postbit
  • posting
  • reputationlevel
  • showthread
Included Files (27):
  • ./showthread.php
  • ./global.php
  • ./includes/class_bootstrap.php
  • ./includes/init.php
  • ./includes/class_core.php
  • ./includes/config.php
  • ./includes/functions.php
  • ./includes/functions_navigation.php
  • ./includes/class_friendly_url.php
  • ./includes/class_hook.php
  • ./includes/class_bootstrap_framework.php
  • ./vb/vb.php
  • ./vb/phrase.php
  • ./includes/functions_facebook.php
  • ./includes/functions_calendar.php
  • ./includes/functions_bigthree.php
  • ./includes/class_postbit.php
  • ./includes/class_bbcode.php
  • ./includes/functions_reputation.php
  • ./includes/functions_notice.php
  • ./includes/functions_threadedmode.php
  • ./packages/vbattach/attach.php
  • ./vb/types.php
  • ./vb/cache.php
  • ./vb/cache/db.php
  • ./vb/cache/observer/db.php
  • ./vb/cache/observer.php 

Hooks Called (72):
  • init_startup
  • friendlyurl_resolve_class
  • init_startup_session_setup_start
  • database_pre_fetch_array
  • database_post_fetch_array
  • init_startup_session_setup_complete
  • global_bootstrap_init_start
  • global_bootstrap_init_complete
  • cache_permissions
  • fetch_threadinfo_query
  • fetch_threadinfo
  • fetch_foruminfo
  • load_show_variables
  • load_forum_show_variables
  • global_state_check
  • global_bootstrap_complete
  • global_start
  • style_fetch
  • global_setup_complete
  • showthread_start
  • showthread_getinfo
  • strip_bbcode
  • friendlyurl_clean_fragment
  • friendlyurl_geturl
  • forumjump
  • cache_templates
  • cache_templates_process
  • template_register_var
  • template_render_output
  • fetch_template_start
  • fetch_template_complete
  • parse_templates
  • fetch_musername
  • notices_check_start
  • notices_noticebit
  • process_templates_complete
  • friendlyurl_redirect_canonical
  • showthread_post_start
  • showthread_query_postids_threaded
  • showthread_threaded_construct_link
  • showthread_query
  • bbcode_fetch_tags
  • bbcode_create
  • showthread_postbit_create
  • postbit_factory
  • postbit_display_start
  • postbit_imicons
  • bbcode_parse_start
  • bbcode_parse_complete_precache
  • bbcode_parse_complete
  • postbit_display_complete
  • memberaction_dropdown
  • tag_fetchbit
  • tag_fetchbit_complete
  • forumrules
  • navbits
  • navbits_complete
  • build_navigation_data
  • build_navigation_array
  • check_navigation_permission
  • process_navigation_links_start
  • process_navigation_links_complete
  • set_navigation_menu_element
  • build_navigation_menudata
  • build_navigation_listdata
  • build_navigation_list
  • set_navigation_tab_main
  • set_navigation_tab_fallback
  • navigation_tab_complete
  • fb_like_button
  • showthread_complete
  • page_templates