Cool Javascript MP3 Song Playback in Web Page with Custom Controls

How to Use

How it Works

songs.bat

songs.bat contents looks like the following: @echo off set filename=%1 if %1.==. set filename=songs.txt echo ^<TEXTAREA ID="songlist" STYLE="visibility:hidden"^> > %filename% dir /b /od *.mp3 *.mid >> %filename% echo ^</TEXTAREA^> >> %filename% echo All the mp3 and mid files from this folder are now listed in %filename% pause

You can edit the batch file if you wish. The important line is:

Note: Windows Media Player will play .WMA files, but Quicktime Player (which Firefox, Safari and Opera uses), will NOT play .WMA files.

Quicktime vs. Windows Media Player

These Javascript functions use Windows Media Player for Internet Explorer and Netscape, but use Quicktime for Firefox, Safari, and Opera. Here are the reasons:

• Internet Explorer: Since Internet Explorer and Windows Media Player are both made by Microsoft I thought it fitting to use Windows Media Player. However, Internet Explorer 6.0 and above seems to have full control over Quicktime as well as Windows Media Player in the browser.
• Netscape: The Netscape browser does not seem to allow you to control Quicktime with Javascript controls such as document.embeds['sound'].Play(); therefore I used Windows Media Player because Netscape can control it with Javascript.
• Firefox: Firefox 1.5 can't control Windows Media Player with Javascript, but it can control Quicktime.
• Safari: The Safari browser can't seem to control Windows Media Player or Quicktime with Javascript. Go figure, since Quicktime and Safari are both made by Apple. Since Quicktime is made by Apple I decided that I would use that player.
• Opera: Opera can control Quicktime with Javascript but it cannot control Windows Media Player.

Off Screen DIV

If we were to create an invisible DIV then the contents of the DIV can't be played and therefore don't work. Also in many browsers, for some reason we don't have access to Javascript media player controls if we tell the media player to make itself invisible. So to solve both of these problems and to not display either the Quicktime or Windows Media Player default players we just place them off screen by creating an offscreen DIV to hold the player as follows:

Detect Browser

To detect the browser so we can put the correct media player in the player DIV we use the following function:

Load A Song

Then we use the following function to create the player and load the song:

Object tag

The object tag has the following properties to specify which player to use: CLASSID, CODEBASE, STANDBY and TYPE.

Embed tag

The embed tag has the following properties to specify which player to use: CLASSID, TYPE and PLUGINSPAGE.

CLASSID="clsid:6BF52A52-394A-11d3-B153-00C04F79FAA6" specifies windows media player 7 or later.

CLASSID="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" specifies Quicktime.

pluginspage="http://www.microsoft.com/Windows/MediaPlayer/" specifies where they can download Windows Media Player if they do not have it.

pluginspage="http://www.apple.com/quicktime/download/" specifies where they can download Quicktime if they do not have it.

type="application/x-mplayer2" tells the browser we are loading windows media player activex controls.

type="audio/wav" tells the browser we are loading wav or mp3 files with quicktime.

To support Safari and older versions of browsers that don't support the control of media players in the browser using Javascript we have included the commands to autostart the song. The function load(media) is called when the user presses the Play button.

Javascript Controls

Quicktime

In order to control quicktime with Javascript, the following must be included in the embed statement:

Also notice that we have included both ID="sound" and NAME="sound" for the Quicktime player embed statement. If we only had the ID="sound" identifier then we would still be able to control the Quicktime Player by using document.embeds['sound']. We could use functions such as the following to control the music:

document.embeds['sound'].Stop(); // Pause
document.embeds['sound'].Play(); // Play
document.embeds['sound'].GetVolume(); // Get Volume Level
document.embeds['sound'].SetVolume(x); // Set Volume from 0 to 256(loudest)
document.embeds['sound'].GetTime(); // Get Current Time in song
document.embeds['sound'].GetDuration(); // Get Duration of song
document.embeds['sound'].GetTimeScale(); // Get TimeScale

(NOTE: The time scale of Quicktime songs is not always in seconds. To convert the current time and current duration of the song to minutes:seconds, here is the formula:

Since we also include NAME="sound" in the Quicktime embed statement, we are also able to control the player with document.sound. We could use functions such as the following to control the music:

document.sound.Stop(); // Pause
document.sound.Play(); // Play
document.sound.GetVolume(); // Get Volume Level
document.sound.SetVolume(x); // Set Volume from 0 to 256(loudest)

For a complete list of Quicktime Javascript Controls go to:

MP3 ID3 Tag info

Quicktime includes a way to get the artist name and song title from the MP3 ID3 tag using javascript:

At first I thought these functions did not work because they kept returning null. I finally realized that they did work but I was calling them too quickly after loading the song. Quicktime has to load most of the mp3 music file before it can tell you the ID3 tag information. So now the display_info() function in sound.js calls itself again if the above functions return null:

Windows Media Player

Windows Media Player 7 and later is controlled from javascript with document.sound.controls and document.sound.settings and document.sound.network. So we have access to functions such as the following: