Okay so the client wants to add a background sound to their web page. You have advised against this but they still want you to do it. Whats the best way?
<embed src="audio_file.wav" autostart="true" loop="true" volume="100" hidden="true"><noembed><bgsound src="audio_file.wav"></noembed>
No, no no…
There are a few issues with the above, but mostly you know there needs to be an off button, and you do not want users to have to turn the sound off every time they come back to the site.
The best way (or at least the way I would do it) is with Flash by using a SharedObject (a flash cookie) to remember if the user has pressed the stop button.
Things you are going to need to follow along with this tutorial:
Here is what we are going to make:
As you can see the main part of this article is not a pretty flash player, it’s the SharedObject. We are going to use it to store the users decision to turn off the sound (which is what I would assume most people will do) when they visit this page. Once you have clicked stop then it will not play again until you delete the SharedObject from your hard drive. If you have clicked stop, go ahead and refresh the page, you will not hear the sound again.
If you want to delete the SO it is stored at:
Win:
C:\Documents and Settings\[Your_Username]\Application Data\Macromedia\Flash Player\#SharedObjects
Mac:
/Users/[Your_Username]/Library/Preferences/Macromedia/Flash Player
Linux:
~/.macromedia
Note: Just replace [Your Username] with whatever your username is on your computer.
Okay, so on with how to make it. The first thing we need to do is prepare our flash document. Most of this is going to be accomplished with Actionscript so the first part of this is creating and naming a few symbols.
Create the sound object:
Now open the actions panel (window > actions) and with the empty keyframe of the actions layer selected, type the following.
var my_snd_obj:Sound = new Sound();
The above actionscript creates a sound object and stores it in a variable named my_snd_obj. You can name this variable anything you like, though check flash help for reserved names.
Attach the library sound file to the sound object:
my_snd_obj.attachSound("my_audio");
The above line attaches the sound my_audio to the sound object my_snd_obj. The name my_audio is the linkage Identifier you gave the sound back in step 8. Now that we have attached the sound to the my_snd_obj variable we can use that variable name to manipulate the sound.
For example:
my_snd_obj.setVolume(15);
Would set the volume of the sound to 15 out of 100.
Now the SharedObject
var my_so:SharedObject = SharedObject.getLocal("userPref");
The above declares a SharedObject and assigns it to a variable named my_so. Then looks for it on the users computer, if it does not exist it creates it and names it userPref. Though currently it’s value is undefined.
Now the real action begins:
if (my_so.data.stopped == undefined) { my_snd_obj.start(0, 1000); } else { my_snd_obj.stop(); }
The above says: if the userPref SharedObject we created a minute ago has a data property with an attribute of stopped who’s value is undefined then go ahead and play the my_audio sound from the beginning looping it 1000 times, else if the data property’s attribute does have a value then stop the audio before it plays.
This works because if the user has NOT pushed the stop button then the SharedObject’s data property attribute (stopped) has no value.
Now for some more action:
stop_but.onRelease = function() { my_so.data.stopped = 1; my_snd_obj.stop(); };
The above function targets the stop_but movieclip symbol you created earlier. If clicked it sets the SharedObjects data property attribute to 1 and stops the my_audio sound.
A side note:
It is important to note that the data property MUST have a attribute name. It will not work if you attempt to assign a value directly to the data property itself.
my_so.data = 1;
Will not work.
my_so.data.attributeName = 1;
Will work because you are assigning the value to the attributeName and not the data property itself. You can name it anything you like, though check flash help for reserved names.
The extras:
Then you need to add an action for the play button should the user decide they want to hear the audio after all.
play_but.onRelease = function() { if (my_so.data.stopped == !undefined) { my_so.clear(); my_snd_obj.start(0, 1000); } };
If the SharedObject’s data property has an attribute value that is NOT undefined (meaning it exists and has a value) delete it, and start playing the audio again. This prevents the audio from starting again while it is already playing.
That is pretty much it. There are obviously many more uses for a SharedObject, this is just one example. I will try to come up with some other examples in the future. In the meantime, if you have any questions, opinions on this article or an alltogether better way to do it feel free to post it in the comments below.
Download the Flash 8 source file here (.fla}
Credits: jazz.mp3: Flash Kit
Keep up to date with the latest articles by adding my RSS feed to your feed reader, or you can also subscribe by Email
September 17th, 2007 at 10:37 pm
Cool Tutorial!
Gave me an excuse to open up flash once more. Will come in handy if a client ever insists on using some flash music for a project.
It was easy to understand and worked a treat.
Thanks
November 26th, 2007 at 10:57 am
Although it should be clear, apparently I still made a mistake, so I tried downloading the sourcefile, but the link is broken?
November 26th, 2007 at 12:05 pm
Hey Jack
Sorry about that. It should be working now.
November 27th, 2007 at 4:15 am
Thanks for the fix, this made my crappy day, less crappier
!
November 27th, 2007 at 12:04 pm
Glad to hear it Jack! Thanks for visiting my site.