Beyond Fusion
Follow us on Twitter
 
bug-grn
tutorial

Using External JavaScript to Play a Sound file

Tested and Works with:

This tutorial teaches you how to use an external JavaScript and a onMouseOver event for an image to trigger a sound (.wav file).

Note: keep the sound file small in size and short in length. The effect isn't instantaneous. The file has to transfer to the visitors computer.

Tutorial and code examples by: Chuck Joslin

Internet Explorer FireFox Safari
Chrome Opera

You are using:

Working Example (curser over the Fusion 9 logo)

Rollover the logo to play sound

Step 1.  Using Notepad or your favorite text editor, create a file named overplay.js.

              Insert the following code, substituting your sound file name for soundfile.wav in the code:

var html5_audiotypes={
    "mp3": "audio/mpeg",
    "mp4": "audio/mp4",
    "ogg": "audio/ogg",
    "wav": "audio/wav"
}

function createsoundbite(sound){
    var html5audio=document.createElement('audio')
    if (html5audio.canPlayType){ //check support for HTML5 audio
       for (var i=0; i<arguments.length; i++){
       var sourceel=document.createElement('source')
       sourceel.setAttribute('src', arguments[i])
    if (arguments[i].match(/\.(\w+)$/i))
       sourceel.setAttribute('type', html5_audiotypes[RegExp.$1])
       html5audio.appendChild(sourceel)
}
html5audio.load()
html5audio.playclip=function(){
   html5audio.pause()
   html5audio.currentTime=0
   html5audio.play()
}
return html5audio
}
else{
   return {playclip:function(){throw new Error("Your browser doesn't support HTML5 audio")}}
}
}

var mouseoversound=createsoundbite("soundfile.wav")

}

            Note: make sure the lines don't linewrap... Save the file. You'll need it later.
           

Step 2. In your page Layout HTML, insert the following code between the Head tags.
           

    <script src="overplay.js" language="JavaScript" type="text/javascript"></script>
     

          note: this "includes" the external javascript file created in Step 1. By not placing the script and an embed tag for the
          sound file directly on your page, you avoid an alert about running an ActiveX control in current IE browsers. (April 2006)


Step 3.
a. Add the image you wish to use to your page using the Fusion Picture Tool.

             b. Select the image and press F3.

             c. Click on the HTML button in the Picture Properties window.

             d. Inside the tag, enter: onmouseover="mouseoversound.playclip()"


Step 4. Using your favorite FTP program, upload the wave sound file you wish to use and the overplay.js
             script to your web server. Placing both in the same folder as the web page is the simplest method.
             If you place them elsewhere, you'll need to add relative path info to the example code.

Notes: If you wish to have a user click on the image to play the sound, change "onMouseOver" to "onClick".

            You can have Fusion manage the script file and sound file by adding them as assets in Assets View.

            If you do so, they'll end up in the root folder of your site by default. You can modify this behavior
            in Publish View.
 

 

©2004-2017

Buy AllWebMenus

Works with Fusion 2015

NetObjects Fusion is Registered Trademark of NetObjects, Inc.

Adobe 

Once You Know, You Newegg 

mariadb-badge-88x31