HomePage | Optical Illusions | War Stories | QBasic | Dads Navy Days | Bristol | Bristol, USA | Bristol, Canada | Terre Haute | Miscellany | Web Stuff | About Ray | Site Map | Site Search | Messages | Credits | Links | Web Rings

Web Stuff | Audio | Basics | Browser | Code Tips | Design | Fonts | Forms | Frames (Page 1), (Page 2) | Images (Page 1), (Page 2) | Links | Random | Redirection | Video | Search Engines | Lycos UK | Home Server (Page 1), (Page 2), (Page 3)

When copying the code from these pages remember to paste them first into a text only editor such as Notepad and then copy and paste from there into your webpage. This is so that all the text formatting codes can be removed from the copied text. Remember that your HTML editor must be in code or HTML view when you paste the code into it. If you are using a template driven HTML editor then the code must be pasted into an HTML and not a text box. JavaScript must be enabled in your browser for the effects generated by it to be seen. The code on this page was tested in IE 6.0.29; Mozilla 1.7.3; Netscape 7.2 and Opera 7.54

Audio Files on Web Pages :-

Play background audio
Stop audio from playing
Console sizes
Play a background audio file uninterrupted
Audio file formats
What file types are supported?
Reducing audio file size
Playlists
Downloading audio files
Audio file sources
Analog Recording
Links

Play a background audio file.

The easiest way to do this is to use the EMBED or BGSOUND tags. The EMBED tag offers more versatility and is more platform and browser independent. This page is not an authorative reference on either tag, but concerns itself with aspects of playing audio files on web pages that are often overlooked. Two good tutorials on the use of the EMBED and BGSOUND tags are the ones at Web Reference and Apple.

At its simplest, in the HEAD section of the page put...

<BGSOUND src="name_of_audio_file">

The EMBED tag has the capability of showing a control panel. Because of this, it is best to put the EMBED tag in the BODY of a web page. At its simplest all that is needed is ...

<EMBED src="name_of_audio_file">

The two sites mentioned above have a lot more details on using both the EMBED and BGSOUND tags.

Stop audio from playing

Some people absolutely hate having audio on the web pages they visit. I think these people are forgetting that the web is a multimedia experience, but there is something to be said for people who prefer to listen to something else or nothing at all whilst surfing  - especially if they are surfing whilst they are supposed to be working! Suddenly having some very strange audio coming out of the speakers is SO embarrassing.

It's probably a better thing all round to give the visitor a choice of whether they want to hear your audio files or not. It's very simply done and there are a variety of ways of doing it.

Methods 1 - 4 do not work in Mozilla, Netscape, Opera or WebTV. Parts of 6 in this section do not seem to work in Mozilla.

For the first 4 methods below, in the BODY section of your page put the EMBED tag. The code I've used for this page is...

<embed name="myaudio" src="bsweet.mid" hidden="true" autostart="false" loop="1">

Notice that autostart is set to false. I've put this code directly after the body tag.

Method 1 - using separate stop and start buttons

In the BODY section of the page put...

<input type="button" value="Start Music" name="btnPlay1" onclick="javascript:document.myaudio.play()">
<input type="button" value="Stop Music" name="btnStop1" onclick="javascript:document.myaudio.stop()">

This gives ...

Method 2 - using a single button

In the HEAD section of the page put...

<script language="JavaScript">
function changebutton()
{
if (document.singlebutton.btnPlay2.value=="Start Music"){
document.myaudio.play()
document.singlebutton.btnPlay2.value="Stop Music"
}
else {
document.myaudio.stop()
document.singlebutton.btnPlay2.value="Start Music"
}
}
</script>

In the BODY section of the page put...

<form name="singlebutton">
<input type="button" value="Start Music" name="btnPlay2" onclick="changebutton()">
</form>

This gives...

Method 3 - Using a drop down list box

In the HEAD section of the page put...

<script language="JavaScript">
function changedrop()
{
if (document.droplist.lstPlay1.value==1){
document.myaudio.play()
}
else {
document.myaudio.stop()
}
}
</script>

In the BODY section of the page put...

<form name="droplist">
<select size="1" name="lstPlay1" onchange="changedrop()">
<option value=0>Stop Music</option>
<option value=1>Start Music</option>
</select>
</form>

This gives...

Method 4 - Using a drop down list box with a button

In the HEAD section of the page put...

<script language="JavaScript">
function dropbutton()
{
if (document.droplistbutton.lstPlay2.value==1){
document.myaudio.play()
}
else {
document.myaudio.stop()
}
}
</script>

In the BODY section of the page put...

<form name="droplistbutton">
<select size="1" name="lstPlay2">
<option value=0>Stop Music</option>
<option value=1>Start Music</option>
</select>
<input type="button" value="Go" name="btnGo" onclick="dropbutton()">
</form>

This gives...

Method 5 - You can add a console to your page so that your visitors can control the sound.

<embed name="myaudio1" src="bsweet.mid" autostart="false" ShowStatusBar=1 loop="1" height="50" width="300">

which gives...

Method 6 - You can add a particular console to your page, this one is for Microsoft's Windows Media Player.

<embed type="application/x-mplayer2" pluginspage="http://www.microsoft.com/Windows/MediaPlayer/" Name="MediaPlayer" src="bsweet.mid" AutoStart=0 ShowStatusBar=1 volume=-1 HEIGHT=50 WIDTH=300></embed>

which gives...

Not surprisingly the above code does not work in Mozilla, but my removing type="application/x-mplayer2" as in the code below it does.

<embed pluginspage="http://www.microsoft.com/Windows/MediaPlayer/" Name="MediaPlayer" src="bsweet.mid" AutoStart=0 ShowStatusBar=1 volume=-1 HEIGHT=50 WIDTH=300></embed>

which gives...

This one is for Apple's Quicktime

<embed src="bsweet.mid" width="300" height="50" src="bsweet.mid" AutoStart=0 ShowStatusBar=1 pluginspage="http://www.apple.com/quicktime/download/"></embed>

which gives...

So long as your visitor has a player or plugin available to play the file then that will be used, the difference is when a player or plugin isn't found, in which case they'll be directed to the appropriate website.

A few words about console sizes

Different consoles need different size dimensions, not only that but by changing the dimensions of a particular console you can change the way it looks. The following table shows Windows Media Player and the QuickTime player at various sizes. I think it's best to go with the larger WMP sizes, but it does mean that the QuickTime player has a little white space at the top and bottom. Lengthwise it fills the entire area. The WebTV player appears the same at all sizes.

WMP Notes
W = 300
H = 68
Status Bar
W = 170
H = 68
Status Bar
W = 300
H = 50
Status Bar
W = 170
H = 50
Status Bar
W = 300
H = 44
W = 170
H = 44
W = 300
H = 28
W = 170
H = 28
QuickTime  
W= 300
H = 16
W = 200
H = 15
W = 150
H = 16
W = 100
H = 16
WebTV  
All sizes

WebTV's Audio controls

WebTV's Audio controls

Playing an audio file across several pages or even an entire site

Their are two simple methods of doing this. The first is to use frames. The audio file is embedded in a framed page that is always displayed, such as a header or navigation frame. As the main or content frame is changed, the audio file will continue to play, uninterrupted, in the other frame. However, on my page on frames, I recommend that a separate frameset be generated for each page on the site. This method would obviously cause the audio file to stop and restart every time a new page was loaded - much the same as if the audio file was embedded on all the pages of a non-framed site.

Another method is to open a new, small browser window and play the audio file inside of that. The new window need not have the full set of toolbars available to a full size window. When the new window is minimized or closed the audio will stop. Repeatedly pressing on the "Play Audio" button simply reloads the pop-up.

<INPUT type="button" value="Play Audio" onClick="window.open('audioa.htm','Audio','width=200,height=100')">

The code in the HEAD section of audioa.htm is simply...

<bgsound src="bsweet.mid" loop="infinite">

The above code does not work in Mozilla, Netscape or WebTV, but by using the following code in the BODY of the called HTML it works, with the exception of WebTV...

<embed src="bsweet.mid" hidden="true" autostart="true" loop="1">

I was hoping to give a code to place a button on the main page that will close the pop-up. The problem is that it doesn't work across multiple pages. Once the page that called the pop-up is done with then the pop-up is no longer accessible from another page. Probably a good security measure but no good for what I want to do. The closest I came is to put a button in the pop-up that allows the user to close it. The just place the following code in the BODY section of the pop-up

<input type="button" value="Close" name="btnClose" onclick="window.close();">

There is a problem in that some hosts add adverts to every page that they serve. Fixing the pop-up window size, as in the examples above, may mean that all your visitor sees is part of an advert. For this reason, on some hosts you may have to simply open the window without the either the height or width attributes, or both, as in the example below.

The code for this window is...

<INPUT type="button" value="Play Audio" onClick="window.open('audioa.htm','Audio','width=200')">

Audio file formats

There are a large amount of audio file types around, some are more suitable for use on the web than others.

AIF - Audio Interchange File Format, this was originally developed for Mac computers. It has CD quality sound and good compression rates.

MID - These work slightly differently than the other formats. Instead of an actual "recording" of the audio they contain the instructions for the audio card to produce the sound. They typically contain only one instrument which sometimes gives them the "Hammond Organ" sound. The good thing about them is that they very small files and can be played on almost any computer with an audio card. There is no easy way to convert between the other audio formats and MID.

MP3 - One of the most versatile formats around. They can be played by almost any audio player. Many utilities allow you save the files at up to CD quality.

OGG - This is non-proprietary file format. It is capable of CD quality sound, but at much better compression than MP3 or WMA. The codecs aren't easy to find but apart from that I don't know why this format isn't more popular. The OGG codecs for Windows Media Player can be downloaded from Illiminable.

RA & RM - RealAudio files offer AM radio-quality audio. These files are small, but the format is proprietary and needs a player capable of using the format. For example, Windows Media Player cannot use them and there isn't an official codec for them. There is however the Real Alternative, this allows WMP to play Real Audio files. I use it because I can't stand the official Real Audio player, which is full of adware, pop-ups and just generally seems to want to take over the entire computer it's installed on.

WAV - Windows' default audio format. The audio files in this format are huge, do not use on websites unless the audio clips are very short.

WMA - Microsoft's Windows Media Audio file. These offer better compression than MP3s.

There are nice comparison tables of various audio formats - file size, quality and so on at Ekei, Litex Media and Seán's Information Page. I use dbPowerAmp Converter to convert between formats, it's fast and can convert between a lot of formats. To manipulate and edit the audio files I used the excellent, but now defunct SoundProbe. Whatever you use, experiment a bit and find the best quality for file size that you can.

The following files were made from the "Galaxy Song" by Monty Python, taken from the CD "Monty Python Sings". The CD was released by Virgin Records on 29th June 1992 with the catalog number 86253 MONT D1. The "Galaxy Song" is 2 mins, 43 secs long.

  44MHz, 128kbs
Stereo, 16bit
22MHz, 128kbs
Stereo, 8bit
11MHz, 128kbs
Mono, 8bit
AIF
MP3
OGG
RM
WAV
WMA
28.18Mb
2.56Mb
2.46Mb
666Kb
28.18Mb
15.26Mb
7.04Mb
2.56Mb
1.69Mb
666Kb
7.04Mb
8.69Mb
1.76Mb
2.56Mb
651Kb
655Kb
1.76Mb
2.58Mb

Not all the files can be converted using exactly the same criteria, so I've used the nearest I can get. The MP3 and OGG files are all at 16 bit. All the OGG files are also in stereo. In comparison, a 4 minute MID file is less than 60Kb. The sizes given above are for the full version of the song, by clicking on the appropriate link you can hear part of it - the last 35 seconds. The 44MHz AIF and WAV files aren't available as even the edited versions are 6Mb long. The files sizes you can hear range from 1.5Mb for the 22MHz AIF and WAV files to 43Kb for the 11MHz WMA file. Interestingly, the next file size down from the AIF and WAV files is less than half the size - around 680Kb for all the MP3 files. I'd put the entire song on the site apart from a couple of things. Some of the hosts that carry my site have a file size or type limit, and the other reason is, I don't fancy getting sued to death by Monty Python or Virgin Records.

What file types are supported?

The first question is, does your host allow certain file types and not others? The second question is does your host have a file size limit? Real Audio (RA & RM) files are proprietary so, if you use them you have to be aware that people are going to need a Real Audio player to hear them. OGG files are good, but you should put a link to the codec so people can play them. It's not a format usually supported by Windows' Media Player, but the codec from Illiminable works well. MP3s are practically universal.

Reducing audio file size

There is no real alternative to trying different settings in your conversion software, but remember that you may remember the original audio of the file you're working with. Once you think you're happy with the quality, take a break, then replay the file.

CD Quality sound is usually recorded at 44.1 KHz, 16-bit stereo. For web use try reducing the frequency, to 22.05 and 11.025KHz. Resample the audio at 8 bits. Experiment with the bitrate, 160kbs is very good quality, 128 is good, but 96 or lower is usually only good for voice. Some voice samples don't sound too bad at 32kbs. See if you can use mono instead of stereo. Because audio processing degrades the signal "normalize" it. This means using software that can find the highest audio peak and then altering the entire file so that the highest peak is at 100%. Mid-range tones also tend to lose their clarity, so using a graphic equalizer to raise these slightly also helps the quality of your audio.

Playlists

At their simplest, playlists are simply a list of files to play - obvious isn't it? They are usually all just plain text files - the sort you make in Notepad.

M3U files are simply lists of MP3s, most media players understand these files.

path/filename.ext
path/filename.ext
path/filename.ext

RAM files are the playlists for RealAudio. They take the general form...

file:path/filename.ra
file:path/filename.ra
file:path/filename.ra

WAX files are Windows Media Player playlists. They take the general form...

<ASX VERSION = "3.0">

<TITLE>.....</TITLE>
<ABSTRACT>.....</ABSTRACT>
<AUTHOR>.....</AUTHOR>
<COPYRIGHT>.....</COPYRIGHT>

<ENTRY>
<TITLE>.....</TITLE>
<AUTHOR>.....</AUTHOR>
<COPYRIGHT>.....</COPYRIGHT>
<REF HREF = "path/filename.ext" />
</ENTRY>

<ENTRY>
<TITLE>.....</TITLE>
<AUTHOR>.....</AUTHOR>
<COPYRIGHT>.....</COPYRIGHT>
<REF HREF = "path/filename.ext" />
</ENTRY>

<ENTRY>
<TITLE>.....</TITLE>
<AUTHOR>.....</AUTHOR>
<COPYRIGHT>.....</COPYRIGHT>
<REF HREF = "path/filename.ext" />
</ENTRY>

</ASX>

The path to files can be absolute or relative to the playlist. The playlists can contain a mixture a file types, MID, MP3, WMA and so on, but it's best to stick to the common types, for example not OGG, to prevent problems.

Here's three stirring pieces of classical music for you. Three separate audio files but one single playlist. They are all MP3's and last around 30 seconds each, the files are around 650Kb each.

Clicking the button below opens a new window and the files are played in that.

The player code in the new window is...

<embed type="application/x-mplayer2" pluginspage="http://www.microsoft.com/Windows/MediaPlayer/" Name="MediaPlayer" src="classical.wax" AutoStart=1 ShowStatusBar=1 volume=-1 HEIGHT=50 WIDTH=300></embed>

There is a problem in that some hosts add adverts to every page that they serve. Fixing the pop-up window size, as in the examples above, may mean that all your visitor sees is part of an advert. For this reason, on some hosts you may have to simply open the window without the either the height or width attributes, or both, as in the example below.

The code for this window is...

<INPUT type="button" value="Play Audio" onClick="window.open('audiob.htm','Audio','width=400')">

 

If the above code does not work for your particular combination of computer/browser then try removing the part type="application/x-mplayer2"

The code in the playlist, classical.wax is...

<ASX VERSION = "3.0">

<TITLE>Classical Playlist - Playlist 1</TITLE>
<ABSTRACT>Some classical excerpts for you</ABSTRACT>
<AUTHOR>brisray</AUTHOR>
<COPYRIGHT>Respective owners</COPYRIGHT>

<ENTRY>
<TITLE></TITLE>
<AUTHOR></AUTHOR>
<COPYRIGHT></COPYRIGHT>
<REF HREF = "hallking.mp3" />
</ENTRY>

<ENTRY>
<TITLE></TITLE>
<AUTHOR></AUTHOR>
<COPYRIGHT></COPYRIGHT>
<REF HREF = "karelia.mp3" />
</ENTRY>

<ENTRY>
<TITLE></TITLE>
<AUTHOR></AUTHOR>
<COPYRIGHT></COPYRIGHT>
<REF HREF = "ride.mp3" />
</ENTRY>

</ASX>

The simple link below, opens a m3u playlist. This does not work in Mozilla, Netscape, Opera or WebTV.

classical playlist

The code for it is...

<a href="classical.m3u">classical playlist</a>

The code in the playlist, classical.m3u is simply...

hallking.mp3
karelia.mp3
ride.mp3

The player below is the same as that in audiob.hrm, in the first example, except that in this case AutoStart=0, the same playlist, classical.wax is used. This does not work in Mozilla.

Making audio files available for downloading

Links to audio files work the same way as links to any other file. If you put a link to an audio file type that is "known" to a browser or a plugin then the file is played. Your visitor will have to right click on the link and, in Windows, choose "Save Target As..." from the menu that appears. On a Mac, use Control + Click.

Link to audio file

Links to a playlist work the same way, except that when your visitor right clicks on the link, then the playlist file is downloaded, not the actual audio files.

Link to playlist file

Audio file sources

MID files are relatively easy to get hold of. There are several sites offering these as a free download...

Elbacom
Ira's Classical
Ira's Pop and Rock
Midi Studio Consortium
Midi Web Ring
Partners in Rhyme

When it comes to other formats, you are more or less on your own. For MP3's try AudioSeek

Analog Recording

Sometimes you may may want to record directly into the PC from an analog source such as a cassette or record player. This just needs a sound card, software sound recorder and a normal PC sound lead. It just so happens that you can connect the headphone out jack on most audio devices to the line in of most sound cards. The mini jack is the same size and type for this to be enabled to be done. The larger headphone jacks on some audio equipment may need an adapter to take it down to the mini jack size used by the sound card. Windows come with Sound Recorder. Unfortunately this utility cannot record audio longer than 1 minute. If your sound card did not come with sound recording and editing software there are plenty of freeware and commercial utilities available. The recording utility must be set to use the line in input not the microphone. This can also be set in the Windows Volume Control (recoding properties).

I have tried this method on several computers and with different audio equipment and none has ever suffered any damage. However, I can't guarantee that your equipment will survive this method of recording.

Links to other sites

Apple Quicktime - Audio on web pages
dBPowerAmp Converter - An excellent audio format converter
Ekei - Comparison of audio formats
Free Codecs - Exactly what it says. Real Alternative is here. Quicktime Alternative is here. Both allow the respective files to be played in Windows Media Player.
Illiminable - Various hard to find codecs
Litex Media - Comparison of audio formats
Playlist Formats
Quicktime - Download
Seán's Information Page - Comparison of audio formats
Streaming audio/video
Using MIDIs
WebReference - Audio on web pages
Windows Media Player - Download
WMP Codecs

Play background audio
Stop audio from playing
Console sizes
Play a background audio file uninterrupted
Audio file formats
What file types are supported?
Reducing audio file size
Playlists
Downloading audio files
Audio file sources
Analog Recording
Links

Web Stuff | Audio | Basics | Browser | Code Tips | Design | Fonts | Forms | Frames (Page 1), (Page 2) | Images (Page 1), (Page 2) | Links | Random | Redirection | Video | Search Engines | Lycos UK | Home Server (Page 1), (Page 2), (Page 3)

HomePage | Optical Illusions | War Stories | QBasic | Dads Navy Days | Bristol | Bristol, USA | Bristol, Canada | Terre Haute | Miscellany | Web Stuff | About Ray | Site Map | Site Search | Messages | Credits | Links | Web Rings

This page created 28th November 2003, last modified 10th February 2005


GoStats stats counter