MCSEMan
asked on
Playing Midi from a list
I have a pull down list of MIDI or WAV files for selecting. Once the selection is made you press a play button to play the selected tune. In a function, What is the syntax to play the selected file from the list?
Take a look at
http://www.geocities.com/PicketFence/2400/jukebox/jukebox.html
and
http://www.geocities.com/CapeCanaveral/Launchpad/5545/Fjukebox.html
This will do more of what you are asking...
Copied from
https://www.experts-exchange.com/topics/comp/www/html/Q.10100661
with a slight correction...
<html>
<head>
<title></title>
<script language="JavaScript">
<!--
ns = (navigator.appName == "Netscape");
loaded = false;
runningNow = null;
function play() {
if (!document.embeds) return;
if (loaded) {
stop();
sound = document.jukeForm.songs.op tions[docu ment.jukeF orm.songs. selectedIn dex];
s = document.embeds[sound.valu e];
if (ns)
s.play(false);
else
s.Run();
runningNow = s;
setText("Sound \"" + sound.text + "\" started");
}
}
function stop() {
if (runningNow == null) {
setText("No song is currently being played");
return;
}
if (ns)
runningNow.stop();
else
runningNow.stop();
runningNow = null;
setText("Jukebox stopped");
}
function setText(text) {
if (document.layers) {
document.layers[0].documen t.open();
document.layers[0].documen t.write(te xt);
document.layers[0].documen t.close();
}
else if (document.all)
d.innerHTML = text;
else
status = text;
}
// -->
</script>
</head>
<body onload="loaded=true">
<form name="jukeForm">
<p><select name="songs" size="1">
<option value="jukebox1.wav">Sound 1 </option>
<option value="jukebox2.wav">Sound 2 </option>
<option value="jukebox3.wav">Sound 3 </option>
</select> <input type="BUTTON" value="Start" onclick="play()"> <input type="BUTTON"
value="Stop" onclick="stop()"> </p>
</form>
<div name="d"></div><LAYER>
</LAYER>
<script language="JavaScript">
<!--
f = document.jukeForm.songs;
for (i=0;i<f.options.length+1; i++) {
src = f.options[i].value;
document.write('<EMBED SRC="' + src + '" HIDDEN="TRUE" AUTOSTART="FALSE"
LOOP="FALSE" NAME="' + src + '">');
}
// -->
</script>
</body>
</html>
http://www.geocities.com/PicketFence/2400/jukebox/jukebox.html
and
http://www.geocities.com/CapeCanaveral/Launchpad/5545/Fjukebox.html
This will do more of what you are asking...
Copied from
https://www.experts-exchange.com/topics/comp/www/html/Q.10100661
with a slight correction...
<html>
<head>
<title></title>
<script language="JavaScript">
<!--
ns = (navigator.appName == "Netscape");
loaded = false;
runningNow = null;
function play() {
if (!document.embeds) return;
if (loaded) {
stop();
sound = document.jukeForm.songs.op
s = document.embeds[sound.valu
if (ns)
s.play(false);
else
s.Run();
runningNow = s;
setText("Sound \"" + sound.text + "\" started");
}
}
function stop() {
if (runningNow == null) {
setText("No song is currently being played");
return;
}
if (ns)
runningNow.stop();
else
runningNow.stop();
runningNow = null;
setText("Jukebox stopped");
}
function setText(text) {
if (document.layers) {
document.layers[0].documen
document.layers[0].documen
document.layers[0].documen
}
else if (document.all)
d.innerHTML = text;
else
status = text;
}
// -->
</script>
</head>
<body onload="loaded=true">
<form name="jukeForm">
<p><select name="songs" size="1">
<option value="jukebox1.wav">Sound
<option value="jukebox2.wav">Sound
<option value="jukebox3.wav">Sound
</select> <input type="BUTTON" value="Start" onclick="play()"> <input type="BUTTON"
value="Stop" onclick="stop()"> </p>
</form>
<div name="d"></div><LAYER>
</LAYER>
<script language="JavaScript">
<!--
f = document.jukeForm.songs;
for (i=0;i<f.options.length+1;
src = f.options[i].value;
document.write('<EMBED SRC="' + src + '" HIDDEN="TRUE" AUTOSTART="FALSE"
LOOP="FALSE" NAME="' + src + '">');
}
// -->
</script>
</body>
</html>
ASKER
In this example, all of the sound files are loaded when the page is. I am looking for a fast loading page that I can have a list of (let's say) 20 MIDI files listed. And when ONE is selected, ONE is loaded and played. Also, by copy and paste of this answer into a new page (with file name changes), errors are returned. Unterminated string constant... and d is undefined.
PS. PicketFence generates errors... the other is not a drop list.
Is There An Answer?
PS. PicketFence generates errors... the other is not a drop list.
Is There An Answer?
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
I now have the dropbox form completed. It just needs to be uploaded.
> I am looking for a fast loading page
> the other is not a drop list.
The code proposed by OTTA seems to satisfy both requirements.
If it doesn't, please explain why.
> the other is not a drop list.
The code proposed by OTTA seems to satisfy both requirements.
If it doesn't, please explain why.
Otta,
Your code requires CGI -- not hard but not always available.
MCSEman,
The dropbox is at
http://members.tripod.com/~HTML_Expert/midi_player/Player_Dropbox.html
Please ignore the tripod pop up advertisements. Right now, the midiplayer pops up in a seperate window. If you don't want that, just look at
http://members.tripod.com/~HTML_Expert/midi_player/1mid_drop.html
-bigelos
Your code requires CGI -- not hard but not always available.
MCSEman,
The dropbox is at
http://members.tripod.com/~HTML_Expert/midi_player/Player_Dropbox.html
Please ignore the tripod pop up advertisements. Right now, the midiplayer pops up in a seperate window. If you don't want that, just look at
http://members.tripod.com/~HTML_Expert/midi_player/1mid_drop.html
-bigelos
ASKER
Bigelos
Your example on Tripod worked fine. My intention was not to build a page for every song that I had but this example will work for me, which is MUCH better than any other item that I have found on the web. Most places that I visit, an error occurs on their web page... and I did not want that to happen on any of my pages. You have given me a soloution that will work fine (or perhaps better than I had planned ) for my purpose. I would like to discuss this further with you if at all possible. Let me know how.
Your example on Tripod worked fine. My intention was not to build a page for every song that I had but this example will work for me, which is MUCH better than any other item that I have found on the web. Most places that I visit, an error occurs on their web page... and I did not want that to happen on any of my pages. You have given me a soloution that will work fine (or perhaps better than I had planned ) for my purpose. I would like to discuss this further with you if at all possible. Let me know how.
This is as good as a forum as any for discussion. I'm posting the code here just for reference for anyone that "buys" the question later. Player_Dropbox.html has javascript that calls 1mid_drop.html. 1mid_drop.html can call any other file....
Player_Dropbox.html
<html>
<head>
<title>Midi Player PopUp</title>
<SCRIPT>
window.open('1mid_drop.htm l','MidiPl ayer','WID TH=150 HEIGHT=300','toolbar=0,loc ation=0,di rectories= 0,status=0 ,menubar=0 ,scrollbar s=0,resiza ble=1,copy history=0' );
</SCRIPT>
</head>
Put your page here....
You will have to look at 1mid.html, 2mid.html, 3mid.html, and 4mid.html as well.
In addition, you will have to change the refresh tag to coincide with your sounds.
</html>
1mid_drop.html
<html>
<head>
<meta http-equiv="refresh" content="96; url=2mid_drop.html">
<title>Welcome</title>
<bgsound hidden="true" src="action3.mid">
</head>
<body bgcolor="#000000" text="#FFF000" alink="#FFFFFF" vlink="#808080">
<p><br>
<form NAME="Form1" method="post" action="">
<select name="songs" size="1">
<option value="1mid_drop.html">Wel come</opti on>
<option selected value="2mid_drop.html">Jes se James</option>
<option value="3mid_drop.html">Edo Bridge</option>
<option value="4mid_drop.html">Ero ica</optio n>
</select>
<input type="button" value="Play" OnClick="location=songs.op tions[song s.selected Index].val ue"></p>
</form>
<br>
Choose a song to play or just let them play in sequence. Close this window to shut music
off.<br>
</p>
<hr>
<embed src="action3.mid" width="107" hidden largeconsole="true" height="49"
autostart="true" loop="true">
</EMBED>
Now Playing Welcome
</body>
</html>
2mid_drop.html
<html>
<head>
<meta http-equiv="refresh" content="37; url=3mid_drop.html"></a>
<title>Jesse James</title>
<bgsound src="Jesse_James.mid" hidden="true">
</head>
<body bgcolor="#000000" Text="#FFF000" ALINK="#FFFFFF" VLINK="#808080">
<br>
<form NAME="Form1" method="post" action="">
<select name="songs" size="1">
<option value="1mid_drop.html">Wel come</opti on>
<option value="2mid_drop.html">Jes se James</option>
<option selected value="3mid_drop.html">Edo Bridge</option>
<option value="4mid_drop.html">Ero ica</optio n>
</select>
<input type="button" value="Play" OnClick="location=songs.op tions[song s.selected Index].val ue"></p>
</form>
<br>
Choose a song to play or just let them play in sequence. Close this window to shut music
off.<br>
<hr>
<embed src="Jesse_James.mid" width=200 hidden="true" largeconsole=true height=200 autostart=true loop=true></embed>
Now Playing Jesse James
</body>
</html>
Player_Dropbox.html
<html>
<head>
<title>Midi Player PopUp</title>
<SCRIPT>
window.open('1mid_drop.htm
</SCRIPT>
</head>
Put your page here....
You will have to look at 1mid.html, 2mid.html, 3mid.html, and 4mid.html as well.
In addition, you will have to change the refresh tag to coincide with your sounds.
</html>
1mid_drop.html
<html>
<head>
<meta http-equiv="refresh" content="96; url=2mid_drop.html">
<title>Welcome</title>
<bgsound hidden="true" src="action3.mid">
</head>
<body bgcolor="#000000" text="#FFF000" alink="#FFFFFF" vlink="#808080">
<p><br>
<form NAME="Form1" method="post" action="">
<select name="songs" size="1">
<option value="1mid_drop.html">Wel
<option selected value="2mid_drop.html">Jes
<option value="3mid_drop.html">Edo
<option value="4mid_drop.html">Ero
</select>
<input type="button" value="Play" OnClick="location=songs.op
</form>
<br>
Choose a song to play or just let them play in sequence. Close this window to shut music
off.<br>
</p>
<hr>
<embed src="action3.mid" width="107" hidden largeconsole="true" height="49"
autostart="true" loop="true">
</EMBED>
Now Playing Welcome
</body>
</html>
2mid_drop.html
<html>
<head>
<meta http-equiv="refresh" content="37; url=3mid_drop.html"></a>
<title>Jesse James</title>
<bgsound src="Jesse_James.mid" hidden="true">
</head>
<body bgcolor="#000000" Text="#FFF000" ALINK="#FFFFFF" VLINK="#808080">
<br>
<form NAME="Form1" method="post" action="">
<select name="songs" size="1">
<option value="1mid_drop.html">Wel
<option value="2mid_drop.html">Jes
<option selected value="3mid_drop.html">Edo
<option value="4mid_drop.html">Ero
</select>
<input type="button" value="Play" OnClick="location=songs.op
</form>
<br>
Choose a song to play or just let them play in sequence. Close this window to shut music
off.<br>
<hr>
<embed src="Jesse_James.mid" width=200 hidden="true" largeconsole=true height=200 autostart=true loop=true></embed>
Now Playing Jesse James
</body>
</html>
and a 'SUBMIT' button relabelled as 'Play'.
Code like the following copied/edited
from WWW.ALTAVISTA.COM, could be a starting-point:
<FORM method="GET" action="/cgi-bin/player">
Folk-song player -- select a country:
<SELECT NAME="kl">
<OPTION VALUE="da">Danish
<OPTION VALUE="fi">Finnish
<OPTION VALUE="is">Icelandic
<OPTION VALUE="no">Norwegian
<OPTION VALUE="sv">Swedish
</SELECT>
<INPUT TYPE="submit" VALUE="Play">
</FORM>
will setup for the "pull-down",
and will submit the selected value to the CGI program.
The program could return an HTML page,
which contains the appropriate <EMBED> command.