How to control sounds on your site

[ellescuba27]

NOTE: Before I start with anything I am going to give you a good warning. I am going to give an example of how to create autostarting sounds but highly recommend AGAINST doing so. That is, sounds that play when the page loads. Users listen to music while browsing sites and autostarting sounds or music is really annoying because they clash. Don't, please. And do not use copyrighted sounds, you probably have a good idea why.
Ok, now that that's out of the way, let's look at some practical uses for sounds on a website. You could be a music studio looking to put 30 second previews on your site, or have a small click noise when you press a link, or maybe you are creating a videogame like a replica of Mario Bros. and want to have a classic chiptune playing the the background. Whatever the case, you have a few choices.
1. Embed plugins
2. Flash
3. Bgsounds
Let's look at the first one, embed plugins. If you know HTML, you probably know of the <embed> tag. This can be used to play sounds. First, though, the browser needs to know what player to use to play these sounds. This can be done with mimetypes. That is done with the type attribute. Let's add that to the <embed> tag:
<embed type=""></embed>
^
What are we going to put in that blank space?
Mimetypes tell the browser what type of file you are playing. For example, with mp3s, you could use audio/mpeg . You need to look up the proper mimetype for your format.
<embed type="audio/mpeg"></embed>
If you use a mimetype for a certain format, such as audio/mpeg , it is up to the user to decide what we can open the file with. VLC Player, Quicktime, Windows Media Player, and Realplayer are all examples. If we want to force a specific player, sometimes they even have a mimetype specific to themselves.
VLC Player: application/x-vlc-player
Windows Media Player: application/x-mplayer2
Quicktime: video/quicktime
Realplayer: audio/x-pn-realaudio-plugin
The next step is telling the browser what file to play. Let's use song.mp3 . We can use the src attribute for this (src stands for source).
<embed src="song.mp3" type="audio/mpeg"></embed>
Great! Now, the width and height. Specified in either percent or pixels like with an <img> tag.
<embed src="song.mp3" width="32" height="32" type="audio/mpeg"></embed>
If the width or height is set to 0, some browsers, like Firefox, do not play the sound. Set it to 1 instead.
Now the autostart attribute. Once again I bring up you should not use this unless it is an absolute emergency, I cannot think of a good example.
autostart="false" <- set it to true or false
And the loop attribute says whether or not the sound should play twice.
loop="true" <- again, true or false
And, similar to the autostart and loop attributes, the hidden attribute makes your sound invisible. I recommend leaving it visible so users can choose to turn it off. This attribute once again does not work in some browsers (Firefox is one).
The volume attribute, from 0 to 100 - pretty self explanatory
volume="50" sets it to half volume
<embed src="song.mp3" width="32" height="32" volume="50" autostart="false" loop="true" hidden="false" type="audio/mpeg"></embed>
Hiding the controls is tough because it varies from player to player. For Quicktime, it is:
controller="false"
Windows Media Player:
showcontrols="0"
Realplayer does it a bit differently. It comes without controls by default. To add them, you must add another embed tag linked to the first one. So in the actual video tag, add:
controls="imagewindow" console="c[add thirteen random numbers]"
And later, add
<br><embed type="audio/x-pn-realaudio-plugin" src="[same as the first one]" width="[same as the first one]" height="26" autostart="true" controls="ControlPanel" console="c[same thirteen random numbers as before]"></embed>
This will link them together and add controls.
If you want to go even further and really make users angry because they can't click the video to pause it without controls, add this:
href="javascript:"
Another note: I know javascript: should be avoided but for this purpose that is the only way to pull this off.
So a player with absolutely no way of controlling looks something like
<embed src="song.mp3" width="32" height="32" volume="50" controller="false" href="javascript:" autostart="false" loop="true" hidden="false" type="audio/mpeg"></embed>
Note that in Quicktime the controls take up 16 pixels of space.
This post has already taken up some space so the next one will be about Flash and Bgsounds.

 

[ellescuba27]

Controlling embed sounds with Javascript is easy. There are four functions/attributes to control playing, pausing, stopping and volume.
The first is playing. You can use this to play sounds that don't autostart. The problem is in Quicktime the function is Play(), in Realplayer it's DoPlay(), and in Windows Media Player it's play() . Let's create our embed sound and get it the name soundobj:
<embed src="song.mp3" name="soundobj" width="32" height="32" volume="50" autostart="false" loop="true" hidden="false" type="audio/mpeg"></embed>
We can check by using a function that checks all three with if statements, like this:

function EvalSound() {
if (!document.soundobj.Play) {
if (!document.soundobj.DoPlay) {
document.soundobj.play();
} else {
document.soundobj.DoPlay();
}
} else {
document.soundobj.Play();
}
}

Now, calling EvalSound plays the sound with Javascript no matter what you use. And the same goes for pausing and stopping. They are different in all three players, so here is a function for all of them:

function EvalSoundPause() {
if (!document.soundobj.Pause) {
if (!document.soundobj.DoPause) {
document.soundobj.pause();
} else {
document.soundobj.DoPause();
}
} else {
document.soundobj.Pause();
}
}
function EvalSoundStop() {
if (!document.soundobj.Stop) {
if (!document.soundobj.DoStop) {
document.soundobj.stop();
} else {
document.soundobj.DoStop();
}
} else {
document.soundobj.Stop();
}
}

Note that for some strange reason in mp4 videos, stop functions actually pause the video in Quicktime. Don't ask me why.
Finally, changing the volume is useful for mute buttons on your site. This gets tougher though. In Quicktime and Realplayer, the functions for volume are both called GetVolume() , which returns a number, and SetVolume() , in which the first argument is a number. In Windows Media Player, it's an attribute, called volume. But in both Quicktime and Realplayer, the maximum volume for SetVolume() is 256. But in Windows Media Player it's 100. I do not know why. But anyhow, let's make a function that starts playing the sound and fades it in over one second.

function fadeinf() {
EvalSound();
fadedin = 256;
var fadein = window.setInterval("if (!document.soundobj.GetVolume) { fadedin = 100; if (document.soundobj.volume < 100) { document.soundobj.volume++; } else { fadein.clearInterval(fadein); } } else { if (document.soundobj.GetVolume() < 256) { document.soundobj.SetVolume(document.soundobj.GetVolume()+1); } else { fadein.clearInterval(fadein); }}" 1000/fadedin);
}

This will begin by creating a variable that equals 256. If the browser detects we are using Windows Media Player, it changes to 100. Now, we divide one second into the appropriate amount of milliseconds and every time we hit that amount of milliseconds in the interval, we increase the volume a little. Once the sound is faded it, we stop. Pretty neat huh?
Now, with Flash. If you want a Flash music player you can controls with Javascript, here are a few links.
http://flash-mp3-player.net/players/js/ - huge amount of functions to controls a JS based Flash player.
http://www.varal.org/media/niftyplayer/ - NiftyPlayer is another good one that is quite easy to learn to use.
Those both require Flash but 99% of people have it and the documentations have more information.
Finally, Bgsounds. They only work in Internet Explorer, so I don't think you should rely on them, but they are good because they don't require a mimetype and work for wav, mp3, and midi files. They look similar to embed tags, except without the type and a different name:
<bgsound src="song.mp3">
So, thanks for reading my post with different way to play sounds in your site.
P.S. I also forgot about the HTML5 <audio> tag which works on every modern browser, see thsi page for more info on that: http://html5doctor.com/native-audio-in-the-browser/