Developer.com content and product recommendations are editorially independent. We may make money when you click on links to our partners. Learn More.
Musical accompaniment for Web pages becomes a little easier with the use of LiveAudio methods (as described by Netscape in the Netscape JavaScript Reference Manual) to create a JavaScript midi hifi system that will enable midi or wav files to be played as if they were on a CD player. The functionality includes complete play, stop and pause control, and single play, cycle play and random play. You can even monitor time played, time remaining, track time and total time, just like the CD player in a home sound system.
Playing music
The following EMBED tag will play a midi or wav file as soon as it’s loaded:
Controlling music
The following allows you to control when the midi or wav file plays:
Play the sound now! –
Pause/Restart the sound –
Stop the sound
Creating a play list
The JavaScript code below uses the tried and trusted object array to hold a list of the tracks on the play list. Each Tune object in the myTune[] array has three properties: tuneName (the filename of the tune), time (the time in seconds that the tune is expected to last) and size (size in Kb of the tune file).
The item variable keeps a count of how many tunes there are and the total variable holds the total number of seconds for the all the tunes; i.e., the time/length of the play list.
The setTune() function is used to add each Tune object to the myTune[] object array.
Displaying the midi hifi
The following JavaScript code and HTML displays the midi hifi. The first part of the tuner form is output to the document using JavaScript. This enables each Tune object with the myTune[] object array to be output as an option within the tunes select array.
The remainder of the form — i.e., the play, stop and start buttons, along with the Single Play, Cycle Play and Random Play play options, as well as the Time Played, Time Remaining, Track Time and Total Time time options and seconds digital clock — are all output using HTML.
The totaltime variable is set to the value returned by the formatTime() function, which is passed as its argument the value of total, i.e., the total time of the Play List in seconds.
When the tunes select array is changed, the selects onChange event handler invokes the hifi() function only if playing passing as its argument the selectedIndex of the tuner forms tunes select array.
When the document has fully loaded, the BODY tags onLoad event handler invokes the resetstartTime() and updateStatus() functions.
When the play (‘>’) button is pressed, the buttons onClick event handler invokes the hifiStart() function, passing as its argument the selectedIndex of the tuner forms tunes select array. When the stop (‘#’) button is pressed, the buttons onClick event handler invokes the hifiStop() function. When the pause (‘||’) button is pressed, the buttons onClick event handler invokes the hifiPause() function. When the time select array is changed, the selects onChange event handler invokes the updateStatus() function.
Controlling the midi hifi
The hifiStart() function receives the number (no) of the selected tune. It first updates the value of the global variable random with the selected property of the last entry within the play select array. If random play has been selected, then a pseudo-random number (rnd) is generated within the range of the number of item tunes. This is then compared against the current tunePlaying; if it’s the same, then the rnd number is increased by 1. The hifiPlay() function is invoked either with the rnd or no number.
. –>
Martin Webb is the editor of the JavaScript “No Content” Web site, which is updated weekly with articles on JavaScript techniques and utilities for enhancing Web sites. He is especially interested in scripts that work across the complete range of JavaScript-enabled browsers being used today. Martin can be contacted at Martin.Webb@btinternet.com.
