Results 1 to 5 of 5

Thread: JavaScript Sound effect

  1. #1
    Join Date
    Feb 2008
    Posts
    15
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default JavaScript Sound effect

    1) Script Title: JavaScript Sound effect

    2) Script URL (on DD):
    http://www.dynamicdrive.com/dynamici...criptsound.htm

    3) Describe problem:

    Hey guys. I have a graph dashboard that displays all of our company's performance measures. When a user mouses over a graph, a mouseover image pops up that displays commentary about the measure. That's great and it works perfectly.

    What I want to do is create a sound effect so that when a user mouses over a graph, they not only see the image replaced with the commentary, but also hear the sound.

    Here is a snippet of the code I have for one graph in the table (there are over 16 graphs)...can anyone help with where to put the sound effect code (linked below...I think that's what I need).

    <tr>
    <td style="height: 152px; width: 244px;" class="style23" valign="top">
    <a target="_self" onmouseover="imgOn('img1')" onmouseout="imgOff('img1')" href="http://company1.sharepoint.com/default.aspx?action=metricExplorer&amp;layout=full&amp;LOB=GTCH&amp;Category=1&amp;MetricID=6568">

    <img id="webImgShrinked14" alt="Picture" src="http://company1.sharepoint.com/sites/performance/performance2/Shared%20Documents/Dashboard%20Images/2008%20Dashboard%20Images/chart001.gif" border="0" galleryimg="false" name="img1" align="top" /></a><br />
    </td>

    Here is what I think I need to be looking at:
    http://www.dynamicdrive.com/dynamici...criptsound.htm

  2. #2
    Join Date
    Feb 2008
    Posts
    15
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Nevermind, figured it out!

  3. #3
    Join Date
    Mar 2008
    Posts
    58
    Thanks
    22
    Thanked 0 Times in 0 Posts

    Default

    can you show us your solution?

  4. #4
    Join Date
    Feb 2008
    Posts
    15
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Sure.

    1st) I found a sound that I liked. It sounds like a page turning very quickly. The sound is like .35 seconds long. I uploaded it to where the .gif files for each graph on my performance metric dashboard are located.

    2nd) I popped what I was supposed to (from the dynamic drive link) into the head section and changed the RED font to the URL associated with my uploaded .wav sound file.

    <bgsound src="#" id="soundeffect" loop=1 autostart="true" />

    <script type="text/javascript">

    /***********************************************
    * JavaScript Sound effect- Dynamic Drive DHTML code library (www.dynamicdrive.com)
    * Visit http://www.dynamicDrive.com for hundreds of DHTML scripts
    * This notice must stay intact for legal use
    ***********************************************/

    var soundfile="sidebar.wav" //path to sound file, or pass in filename directly into playsound()

    function playsound(soundfile){
    if (document.all && document.getElementById){
    document.getElementById("soundeffect").src="" //reset first in case of problems
    document.getElementById("soundeffect").src=soundfile
    }
    }

    function bindsound(tag, soundfile, masterElement){
    if (!window.event) return
    var source=event.srcElement
    while (source!=masterElement && source.tagName!="HTML"){
    if (source.tagName==tag.toUpperCase()){
    playsound(soundfile)
    break
    }
    source=source.parentElement
    }
    }

    </script>

    3rd) Lastly, I placed the following code into the snippet of code that I have above:

    href="#" onMouseover="playsound(soundfile)"

    This is where I placed it:

    <tr>
    <td style="height: 152px; width: 244px;" class="style23" valign="top">
    <a target="_self" onmouseover="imgOn('img1')" onmouseout="imgOff('img1')" href="http://company1.sharepoint.com/default.aspx?action=metricExplorer&amp;layout=full&amp;LOB=GTCH&amp;Category=1&amp;MetricID=6568">

    <img id="webImgShrinked14" alt="Picture" src="http://company1.sharepoint.com/sites/performance/performance2/Shared%20Documents/Dashboard%20Images/2008%20Dashboard%20Images/chart001.gif" href="#" onMouseover="playsound(soundfile)" border="0" galleryimg="false" name="img1" align="top" /></a><br />
    </td>

    It works perfectly, and everytime I mouseover a metric graph now, when it switches to show the commentary that speaks to the metrics performance, a nice quick sound is played that sounds like a page turning quickly. I think it adds a lot to the user experience!

    -Hum
    Last edited by Hummell; 03-02-2008 at 10:35 PM.

  5. #5
    Join Date
    Mar 2008
    Posts
    58
    Thanks
    22
    Thanked 0 Times in 0 Posts

    Default

    sweet! thanks

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
  •