...
PDA

Determining variables from drop-downs

kargrafx
07-05-2004, 09:11 AM
Okay, I have a simple request, I think. I have a simple code to play wav files on my site, and I have it working with multiple occurences of the code so that for each wav file you see the player. However, not only is this cluttered, but it allows for multiple wav's to be playing at once which sounds bad. So instead of 12 player bars, I want to change to a drop down menu to select the wav, and then have a single player bar below the menu to play the currently selected track.

the code I currently have is this:<script language="JavaScript"><!--
if(navigator.plugins.length>0){
if (navigator.mimeTypes["audio/wav"] && navigator.mimeTypes["audio/wav"].enabledPlugin) document.write('<embed src="track01.wav" autostart="false" loop="0" controls="LargeConsole" width=180 height=35></embed>');}
else {
document.write('<embed src="track01.wav" autostart="false" loop="0" width=180 height=45></embed>');}

//-->
</script>
Of course it is repeated for each track, with the source wav file changed. I would like to instead replace it with something like this;<script language="JavaScript"><!--
if(navigator.plugins.length>0){
if (navigator.mimeTypes["audio/wav"] && navigator.mimeTypes["audio/wav"].enabledPlugin) document.write('<embed src="'+soundFile+'" autostart="false" loop="0" controls="LargeConsole" width=180 height=35></embed>');}
else {
document.write('<embed src="'+soundFile+'" autostart="false" loop="0" width=180 height=45></embed>');}

//-->
</script>Of course with this method, I have to set var soundFile somehow - and I would like to do it with a drop down menu; but I have never done that so would like suggestions on how to...

Here is a list of what I would like to happen in the finished product: a drop-down menu has a list of tracks. Below it is the player bar to listen to the currently selected track. Whenever the 'play' button is pressed, it plays the track currently displayed in the drop-down menu; however if the menu is changed while playing, I don't want it to stop the music playing, nor change the music playing... only change the variable so that if the user stops the track, or lets it end, and then presses play again, the new choice is played.

I'm not sure if I said that clearly enough; I am a bit tired...but anyway;

Thanks for your help!
Kor
07-05-2004, 10:10 AM
Try, for the beggining, something like this:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<script language="JavaScript"><!--
function sound(sel,soundFile){
if(sel!=0){
if(navigator.plugins.length>0){
if (navigator.mimeTypes["audio/wav"] && navigator.mimeTypes["audio/wav"].enabledPlugin){
document.getElementById('emb').innerHTML='<embed src="'+soundFile+'" autostart="false" loop="0" controls="LargeConsole" width=180 height=35></embed>';
}
else {
document.getElementById('emb').innerHTML='<embed src="'+soundFile+'" autostart="false" loop="0" width=180 height=45></embed>';
}
}
}
}
//-->
</script>
</head>
<body>
<div id="emb">
</div>
<select onchange="sound(this.selectedIndex,this.options[this.selectedIndex].text)">
<option>--select track--</option>
<option>track01.wav</option>
<option>track02.wav</option>
<option>track03.wav</option>
</select>
</body>
</html>
dumpfi
07-05-2004, 12:06 PM
You may also try this:


<html>
<head>
<script type="text/javascript">
window.onload = init;
function init() {
control = (navigator.mimeTypes["audio/wav"] && navigator.mimeTypes["audio/wav"].enabledPlugin) ? " controls='LargeConsole'": "";
url_select = document.forms["music"]["url"];
}
function startMusic() {
var selection = url_select[url_select.selectedIndex].value;
document.getElementById("player").innerHTML = (selection) ? "<embed src='" + selection + "'" + control + " autostart='true' loop='0' width='180' height='45'>" : "";
}
</script>
</head>
<body>
<form name="music">
<select name="url">
<option value="0">No music</option>
<option value="url_to_track1">track1</option>
<option value="url_to_track2">track2</option>
</select>
<input type="button" value="Play" onClick="startMusic();">
<div width="180" height="45" id="player"></div>
</form>
</body>
</html>
kargrafx
07-08-2004, 04:06 AM
Thanks for the suggestions! I got it working, but now I have a second dillema. Most of the tracks I have are small, and load quickly enough on a high-speed connection to seem instant, and even on a dial-up seem fast; but a couple are larger, one is a full megabyte, and it takes about 3 seconds of waiting on a dial-up before the music starts, and then it plays faster than it loads, making it pause every few seconds. Is there a way to pre-load audio files, like you can pre-load images?
Willy Duitt
07-08-2004, 04:31 AM
This is what I have done to preload:


<script type="text/javascript">
<!--//
function loadWavs(){
var count = 0;
var wav= new Array();
wav[0] = "Denied.wav";
wav[1] = "SecurityScan.wav";
wav[2] = "Please.wav";
wav[3] = "ThankYou.wav";
wav[4] = "LetsDuitt.wav";

while(count<wav.length){
document.writeln('<div style="display:none">');
document.writeln('<embed autostart="false" loop="false" hidden="true"');
document.writeln('id="wav'+count+'" src="'+wav[count]+'">');
document.writeln('</div>');
count++;
}
} window.onLoad = loadWavs();
//-->
</script>


.....Willy
SpiritualStorms
07-08-2004, 05:03 AM
Here's one i have used:

function playFile( file ) {
if( document.all ){
document.all['sound1'].src = file ;
}
else
{
document.embeds['sound2'].src = file ;
}
}


Then to call the function, i do this:


<INPUT type=button value="Play!" onclick="playFile(song.options[song.options.selectedIndex].value);"/>


Finally, the actual drop down menu looks like this:

<SELECT name="song">

<OPTION selected value="2001spce.mid">Space Oddesy
<OPTION value="20fox.mid">20 Fox
<OPTION value="90210v2.mid">90210
<OPTION value="adam.mid">Adams Fam
<OPTION value="apollo13.mid">Apollo 13
<OPTION value="airwolf.mid> Air Wolf
<OPTION value="baywatch.mid"> Baywatch
<OPTION value="baywatch2.mid"> Baywatch 2

<OPTION value="btfuture.mid"> B_toTheFuture
<OPTION value="btfuture2.mid"> B_toTheFuture2
<OPTION value="chicagobull.mid"> Chicagobull
<OPTION value="dancewolf.mid"> Dancewolf
<OPTION value="deepspace9.mid"> Deep Space 9
<OPTION value="mimpossible.mid"> Mission Impssble
<OPTION value="mkombat.mid"> Mortal Kombat
<OPTION value="xfile.mid"> xfile
</SELECT>

That's about it.
kargrafx
07-08-2004, 05:19 AM
Thanks again for all the help, I think I have it up and running fine now!
(which means a day or two before I figure out how it is broken, lol)

EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum