Learn Flash Sound in HTML	Home • Food • Mates • Members • Tutorials • Forum • Buy Templates • Contact Us

Tutorial: Flash Sound on HTML Web Pages using JavaScript

Free Flash Sound Tutorial

The aim of the tutorial is to learn how to add sound to any web page that 99% of all users will be able to hear. With this technique there is no Flash interface on your web page - only sound. It works through standard HTML links or plays automatically when the web page loads. It is compatible with all major browsers and allows you to play different sounds for different HTML links. It also allows you to play many different music file formats like wav, mp3 etc. This works by placing an invisible Flash Movie on your web page that users can't see!

Cross Ref: If you want to add sound to your Flash Movie (and not your HTML web page) see the tutorial on: Using Sound in Flash

Important Note: Many sites use this method for playing sound on their site because of it's ease of use, compatibility for all browser, music types, user friendliness, and ability to play different sounds on different links. It is also possible to preload the Flash file so that it loads invisibly when the web page loads. Having said that if you have a large sound file or multiple sound files in one Flash Movie, then because of the file size it may take some time for the sound to start playing when the user rolls over a link. This may require the user to rollover the link several times before the sound file starts playing. Try to keep the swf file (Flash Movie) size down to a minimum and refrain from using large music files. Instead use multiple swf files for each link instead of one swf file for all the links. Don't use the loop feature unless you need it. This is not a major problem and most user don't experience difficulties but some users on slow Internet connections may not hear the sound, or even realise that there is any sound to be heard!

Example: Download the invisible Flash file Int 119a

Rollover Here To Play A Sound

Rollover Here To Start Playing A Looping Sound

The above are two examples of how to make an Invisible Sound Flash Player.

Step One: Creating the Flash Movie

1. Open a new Flash Movie.
2. Save your new Flash Movie as: Sound
3. Import your sound clip into Flash: File > Import > Import to Library

Note: If you don't have a sound file ready, do a search your hard drive for: mp3 or wav
Webwasp members can download the sound file used on this page: Login or Become a Member


4. Create a new blank Movie Clip: Insert > Symbol (Short Cut Key: Ctrl + F8)
5. Give it a name: Sound Player
6. For Behavior select: Movie Clip
7. Click: OK
8. If the Edit Bar is closed, open it: Window > Tool Bars > Edit Bar
9. In the Edit Bar Click on the Tab:
   
   This should take you back to the main stage. The main stage should still be empty.
   
   
10. If the Library is closed, open it: Window > Library (Short Cut Key: F11)
11. Drag the new Movie Clip onto the: Main Stage
12. Give it unique Instance Name: MySoundPlayer
    
    You will use the Movie Clip instance name in the JavaScript to start or stop this sound.
    
    
13. Open up the Movie Clip you just created. Right Click and select: Edit
14. Add two Layers, so that you have a total of 3 Layers. use the Insert Layer Button:
15. Rename the top Layer: Actions
16. Rename the middle Layer: Labels
17. Rename the bottom Layer: Sound
18. In the Actions Layer add the following ActionScript:
    
        stop();
        stopAllSounds();
    
    
19. In the Labels Layer in frame 1, add a label called: stop
    
    You add frame Labels from the Property Inspector: Window > Properties
    
    
20. Right click on frame 5 (Mac: Ctrl + click) of the Labels Layer and select: Insert Blank Keyframe
21. In the new Keyframe add a label named: start
22. In frame 5 of the Sound Layer insert a: Blank Keyframe
23. In Layer 5 of the Sound Layer add your: Sound

    Note: To add a sound to a Keyframe you need to first import a sound into the Library (Step 3 above).
    Then you select a Keyframe and use the Sound Option in the Property Inspector to add the sound to the selected frame.
    

24. In frame 10 of the Labels Layer insert a: Blank Keyframe
25. In this frame add a label: loop
26. In frame 5 of the Labels Layer insert a: Blank Keyframe
27. In frame 10 of the Labels Layer insert another: Blank Keyframe
28. In frame 5 of the Actions Layer insert a: Blank Keyframe
29. In frame 10 of the Actions Layer insert another: Blank Keyframe
30. In frame 5 or the Actions Layer add the following ActionScript:
    
        stop();
    
    
31. Do the same in frame 10 or the Actions Layer:
    
        stop();
    
    
32. In frame 10 of your Sound Layer add your: Sound
33. In the Sound Layer select: frame 5
34. In the Property Inspector set the Sync to: Start (see illustration below)
35. Set the Repeat to: 1 (see illustration below)
36. In the Sound Layer select: frame 10
37. In the property panel set Sync to: Start
38. Set the Repeat to: Loop


The Sync Properties.

Note: Set the Sync Properties to: Start, Repeat and 1 to play a sound once.
Change the value 1 if you want to play the sound a specific number of times.
Change the second box to: Loop if you want the sound to repeat forever.




Movie Clip Layers and Keyframes.



39. Publish the move as a swf and call it: Sound.swf

    Note: You Publish the Movie by going to: File > Publish or File > Publish Settings > Publish
    
    There is no need to use the latest Flash Player. In the Publish Settings, click on the Flash Tab and select an older Flash Player such as: Player 5 or Player 6

Step Two: Setting up the Web Page

1. Open the web page that you want to add sound to.
2. Add the following code to the head section of your web page:

<script language="JavaScript" src="flashsound.js"></script>
<script language="JavaScript">
var mysound = new FlashSound( );
</script>

3. In the body section of the same page add:

<script language="JavaScript">
mysound.embedSWF("Sound.swf");
</script>

Note: If your Flash Movie is not called: Sound.swf  - you will need to change the code above.

4. You MUST download the external JavaScript file: flashsound.js
   
   If you wish to view the content of the JavaScript file: click here
   
   
5. Place this external flashsound.js file along with the Sound.swf Movie in the same location as the web page you want to play sound on.
   
   
6. Every time you want to create a link that will play the sound use one of the following examples of code.
   
   
   The code below plays a sound on rollover and stops playing on rollout. The sound will only play once:
   
   <a href="javascript://" onMouseover = "mysound.gotoAndStop('/SoundPlayer', 'start')"onMouseout = "mysound.gotoAndStop('/SoundPlayer','stop')" onClick = "return false"> Rollover Here To Start Playing A Sound </a>



The next bit of code plays a sound on rollover and stops playing sound on rollout. The sound will play continuously:

<a href="javascript://" onMouseover = "mysound.gotoAndPlay('/SoundPlayer', 'loop')"onMouseout = "mysound.gotoAndStop('/SoundPlayer','stop')"onClick = "return false"> Rollover here To Start Playing Sound </a>



To have the sound play once when the page loads use this code:

<body onLoad="mysound.gotoAndStop('/SoundPlayer', 'start')">



Or to have the sound play continually, place this code in the Body Tag:

<body onLoad="mysound.gotoAndStop('/SoundPlayer', 'loop')">


The following Body Tag will preload the Flash file:

<body onLoad="mysound.gotoAndStop('/SoundPlayer', 'stop')">

Note: The start, loop and stop in the code above relates to the frame labels that you created in the Flash Movie.

 

You can have different sounds on different links by adding additional sounds in your Flash Movie:


Multiple sounds and loops have been added for different links on the web page.

Then refer to each individual sound or loop like so:

<a href="javascript://" onMouseover = "mysound.gotoAndPlay('/SoundPlayer', 'start2')"onMouseout = "mysound.gotoAndStop('/SoundPlayer','stop')"onClick = "return false"> Rollover here To Start Playing Sound </a>

The above plays a sound (Label start2 sound) on rollover and stops playing on rollout. The sound will only play once.

<a href="javascript://" onMouseover = "mysound.gotoAndPlay('/SoundPlayer', 'loop2')"onMouseout = "mysound.gotoAndStop('/SoundPlayer','stop')"onClick = "return false"> Rollover here To Start Playing Sound </a>

The above plays a sound (Label loop2 sound) on rollover and stops playing on rollout. The sound will only play once.

You can download an example web page to see how to code your web page here

For advanced users who want to experiment, the following is a list of commands that you can use:

mysound.gotoAndStop('/SoundPlayer', 'start')"
mysound.gotoAndPlay('/SoundPlayer', 'start')"
return false

For other tutorials on how to use this technique:

www.flashsoundapi.com

www.devx.com