PDA

View Full Version : Playing Music in a Javascript Confirm Window?

tburton
02-19-2005, 05:12 AM
Hi, I've got a question, which hopefully isn't too complicated. I was wondering, how would you get music to play in a javascript popup confirm window ("Ok" and "Cancel."). I want it so that the window pops up, the music plays, and then the user clicks their answer and it stops and they are allowed to the next page. What would I have to add to the code below?

<A HREF="pagetwo.html" onCLick="return confirm('Is that your final answer?')"><IMG SRC = "A.jpg"></A>
Philip M
02-19-2005, 08:16 AM
Try something like this:-

<EMBED src="boathorn.wav" hidden="true" autostart="false" name="horn">
<bgsound id="sound">

function playhorn()
{
if (document.all) {document.all.sound.src = "boathorn.wav"}
}

<A HREF="pagetwo.html" onCLick="return confirm('Is that your final answer?'); playhorn()"><IMG SRC = "A.jpg"></A>

Note that this only works in IE. Also, the sound plays only when (after) the user clicks. You could also arrange for the sound to occur onMouseOver the image.

I think that the sound clip needs to be short - as far as I know there
is no way of stopping it in mid-track.
tburton
02-19-2005, 03:16 PM
Okay, that looks good, but for some reason, when I paste it in and turn on the HTML file, it shows up like this:

function playhorn() { if (document.all) {document.all.sound.src = "boathorn.wav"} }

and the image is beside it. I think you forgot something. Other than that, it looks pretty good.
Philip M
02-19-2005, 07:17 PM
Well, you need to put <SCRIPT> and </SCRIPT> tags around the function.

<SCRIPT language="JavaScript">
function playhorn()
{
if (document.all) {document.all.sound.src = "boathorn.wav"}
}
</SCRIPT>
tburton
02-19-2005, 07:40 PM
Okay, it doesn't do that now, but the problem is - the sound doesn't play.

I have "Correct.mp3" in the same folder as my HTML file, and everything is how you said it should be, but it doesn't play for some reason. I click OK, and it goes to the next page, without playing anything. Here is the code, so see if you can find what's wrong. :confused:

<HTML>
<HEAD>
<TITLE>Example
</TITLE>
</HEAD>
<BODY>
<EMBED src="Correct.mp3" hidden="true" autostart="false" name="Correct">
<bgsound id="sound">

<SCRIPT language="JavaScript">
function playcorrect()
{
if (document.all) {document.all.sound.src = "Correct.mp3"}
}
</SCRIPT>
<A HREF="100wr.html" onCLick="return confirm('Is that your final answer?'); playcorrect()"><IMG SRC = "A.jpg"></A>
</BODY>
</HTML>
tomjoyce
02-19-2005, 11:45 PM
<EMBED src="Correct.mp3" hidden="true" autostart="false" name="Correct">
<bgsound id="sound">

<SCRIPT language="JavaScript">
function playcorrect()
{
if (document.all) {document.all.sound.src = "Correct.mp3"}
}
</SCRIPT>
<A HREF="100wr.html" onCLick="return confirm('Is that your final answer?'); playcorrect()"><IMG SRC = "A.jpg"></A>


Instead, why not have it play Correct.mp3 in the <body onLoad> of the next page...


<head>
<script ..... >
function playCorrect()
{
if (document.all) { document.all.sound.src = "Correct.mp3"}
}
</script>
<body onLoad="playCorrect()">
tburton
02-20-2005, 01:30 AM
What will that do? Will it still play the song before the page pops up, because that's the way I want it. I want it to be a tense moment, before you go to the next page and find out if you got the question correct or not. Will that happen this way?
tburton
02-20-2005, 05:23 AM
Okay, Tomjoyce, I tried your idea, and it didn't work, either. That's really weird - nothing seems to be working. I have no idea why. I think I'd rather have it play just after the person clicks, though, so let's try and figure out the first idea, instead. What's wrong with the code below? :confused:

<HTML>
<HEAD>
<TITLE>Example
</TITLE>
</HEAD>
<BODY>
<EMBED src="Correct.mp3" hidden="true" autostart="false" name="Correct">
<bgsound id="sound">

<SCRIPT language="JavaScript">
function playcorrect()
{
if (document.all) {document.all.sound.src = "Correct.mp3"}
}
</SCRIPT>
<A HREF="100wr.html" onCLick="return confirm('Is that your final answer?'); playcorrect()"><IMG SRC = "A.jpg"></A>
</BODY>
</HTML>
tburton
02-20-2005, 06:56 AM
I was looking around, and I found a thread where somebody else couldn't get their sound to load. In that thread, the person decided to use setTimeout to delay the loading time of the page, and fix the problem. Do you think that would work here? How would I do it? I guess I would want to make it so that you click, and even without a song playing, it delays the time until the next page loads after 'OK' has been clicked.
Philip M
02-20-2005, 08:42 AM
OK, try this:-

<EMBED src="Correct.mp3" hidden="true" autostart="false" name="Correct">
<bgsound id="sound">

<SCRIPT language="JavaScript">
function donothing()
{
}
function playcorrect()
{
if (document.all) {document.all.sound.src = "Correct.mp3"}
setTimeout ("donothing()",10000;/ 10 seconds delay
}
</SCRIPT>
<A HREF="100wr.html" onCLick="return confirm('Is that your final answer?'); playcorrect()"><IMG SRC = "A.jpg"></A>
tburton
02-20-2005, 05:02 PM
It still doesn't work - and the weird part is, the delay didn't do anything, either! I don't understand why this is not working.... :(
Philip M
02-21-2005, 07:42 AM
I have the idea that EMBED does not support .MP3, only .MID, .AU and .WAV. Try your scripts using a .MID file (anything) to test this.
_Aerospace_Eng_
02-21-2005, 08:14 AM
wrong...the embed does in fact support the mp3 file format along with many others like wmv,wav, and avi, etc... some gecko browsers require you do download a plugin, like FF requires you to download a quicktime plugin if its just the normal embed tag, but if you give it a file type, it will look to see if that media player type is installed, here try this
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
function doconfirm(){
document.getElementById('music').innerHTML="<embed type='application/x-mplayer2' pluginspage='http://www.microsoft.com/Windows/MediaPlayer/' src='correct.mp3' name='MediaPlayer1' hidden='true' autostart='true'>";
if(confirm("Is that your final answer?")){
window.location.replace("http://thecorrectsite.com");}
else{
alert('I guess you were confident in your answer?');
}
}
</script>
</head>
<body>
<div id="music"></div>
<a href="100wr.html" onclick="doconfirm();return false;"><img src="A.jpg"></a>
</body>
</html>