selectedIndexPlaying Music from Web Pages
It may be hard to understand why playing music from websites is still not platform independent, but it is true. Even today, it is still difficult to get music to play consistently in a variety of browsers.
In this assignment, I introduce the simplest cross-browser method for playing music, but it requires the music to load fully before playing. Streaming music is a bit more complex and to truly stream requires a special server called a streaming server. If you are interested in streaming instead, please ask.
Using a Select Menu
We can create a form which can be used to make a music
selection using the form:
<form name="musicform">
<select name="musicmenu">
<option
value="blueyou">Blue You</option>
<option
value="letlove">Let Your Love Lead You</option>
<option
value="magnolia">Magnolia</option>
</select>
<input type="button" value="Select
Tune" onclick="playit()"></p>
</form>
The above form calls a JavaScript function when the button is clicked.
<script
type="text/javascript">//<![CDATA[
function play()
{
if
(document.musicform.musicmenu.selectedIndex==0)
{
document.write("<EMBED src='blueyou.mp3' autostart='true'
type='audio/mpeg' loop='false'
hidden='true'></embed>");
//some
JavaScript to make a page related to selection 0
}
else if
(document.musicform.musicmenu.selectedIndex==1)
{
document.write("<EMBED src='letlove.mp3' autostart='true'
type='audio/mpeg'
loop='false'
hidden='true'></embed>");
//some JavaScript to make a page related
to selection 1
}
else
{
document.write("<EMBED src='magnolia.mp3' autostart='true'
type='audio/mpeg'
loop='false'
hidden='true'></embed>");
//some JavaScript to make a page related
to selection 2
}
}//]]>
</script>
There are a few things to note in the above JavaScript
function. Note first how one can access which number of
choice is selected via:
document.musicform.musicmenu.selectedIndex
selectedIndex is a reserved value which can be
really useful as shown in making different things happen depending upon
the user's choice.
In addition, note the use of the new HTML element: EMBED.
The easiest and most widely supported way to add
video or sound to a website is to use EMBED, which causes the browser
itself to include controls for the multimedia. Here are the
attributes which we are using:
src='nameoffile' //URL of the sound object to be embedded.
Can be any recognized (by the client system)(.mp3, .midi, .wav, etc).
autostart='true'//Indicates if the sound should start automatically.
Firefox default is 'true', Internet Explorer is 'false'.
type='audio/x-mp3' //This is the type of embedded object. Internet
Explorer will generally figure this out. Firefox may not.
loop='false' // Specifies if the sound should be played
continuously (set loop to 'true') or not ('false').
hidden='true' // Defines if the
object shows on the page: 'false' means no and
'true' means yes.
Note: The next page should play your selection of music and show information about each selection. Try loading this page in both Internet Explorer and Firefox. If the Firefox browser indicates that it needs a plugin to work, then you need to change your Quicktime configuration settings. Follow these steps to fix the problem:
Your task
In this assignment, you are to create a drop-down menu using select in order to let the user choose a musical selection from at least 4 choices. You are encouraged to use your own music, but if you do not have music on your laptop, the instructor can help you find soundfiles to use. For each choice you should create a page about that choice. You will be expected to take the entire period polishing your page. Your html page should be named yourusername-A12.html. You will need to include this html file as well as all of the music files in a folder for submission. Since the music files are for the web, spaces need to be removed from the filename before linking to them.
When you are done, submit a zipped copy of a new folder called YourUserName-A12 which should include:
Turn the folder YourUserName-A12 into the appropriate place in Moodle.
Copyright © 2011 Jan Pearce