JavaScript - Playing A Sound File In Javascript

Hello geniuses.

I really need your help and didn't know who else to turn to.

Using JavaScript, I require a code that allows me to play .wav sound files randomly and automatically on page start-up, I also need them to loop as they are drum beats.

The plan: to load my web page and hear a random drum beat that loops continuously.

I need it to be compatible with most, if not all Internet browsers (Chrome, Internet Explorer, Firefox and Opera are crucial) and to state what sound file is playing on the page (allowing me to identify the looping drum beat/sound file), and if possible to provide a link to the actual sound file for download.

I've tried endlessly trying to find code to build upon but have failed miserably, I would appreciate any code submissions as it would help me out massively.
It's a lot to ask I know, but it would be so very appreciated.
My knowledge with JavaScript is sadly minimal.

I've also got a quick question, how would I prevent Google Chrome from putting a pause after each sound loop? Of course, being drum beats; I require it to loop in sync and it appears only Google Chrome puts a 1 second period after each play.

Please help, I am so stuck.
Anyway guys, thanks for reading!

Working on a simple JS/jQuery-driven game where the user clicks on a cup to see if it is a winner or not. If so, it plays a happy sound; if not, it plays a sad sound.

Everything is working great so far, except for the sound. The html is being set correctly when a cup is selected, but Firebug is telling me the sound files are undefined. Same when I enter the function: playSound("[filename].WAV") in the console.

Any help or advice is greatly appreciated.

Code:

var cupRaised = false;
var winningCup;

function determineWinner(raisedCup){
		if(raisedCup == winningCup){
			playSound("applause.WAV");	
		} else {
			playSound("sad-trombone.WAV");	
		}
}

function playSound(file){
		$('#sound_element').html("<embed src='file/"+file+"' hidden='true' autostart='true' loop='false' />");
}

function raiseCup(num){
	if(!cupRaised){
		var cur = "#cup" + num.toString();
		$(cur).animate({"top": "-=100px"}, "slow");
		cupRaised = true;
		determineWinner(num);
	}
}

I am running a ticker using javascript to update a gridview and I need to figure out how to run a sound alert when there is a new message; my javascript code file is below:
Code:

function Check()
{
  // Call the static page method.
  PageMethods.GetLatestHeadlineTick(OnSucceeded, OnFailed);
}

function OnSucceeded(result, userContext, methodName)
{
  // Parse the web method's result and the embedded
  //  hidden value to integers for comparison.
  var LatestTick = parseInt(result);
  var LatestDisplayTick = parseInt($get('LatestDisplayTick').value); 

  // If the web method's return value is larger than 
  //  the embedded latest display tick, refresh the panel.
  if (LatestTick > LatestDisplayTick)
    __doPostBack('up1', '')
if (LatestTick > LatestDisplayTick)
    document.title = "New message!";
// Else, check again in five seconds.
else
    setTimeout("Check()", 500);
}

// Stub to make the page method call happy.
function OnFailed(error, userContext, methodName) {}

function pageLoad()
{
  // On initial load and partial postbacks, 
  //  check for newer articles in five seconds.
  setTimeout("Check()", 500);
}

Hi, I need some help with playing sounds with javascript.

What I need:
When the user clicks the button it will run the function and play a sound either from the source or embedded into the website(which ever way works).

Thanks alot!

Hi

I have created a page using tables and found abit of javascript off the net where I could get a little soundbite to play when an image is clicked. It worked fine.

However I have now converted the page into CSS and even with using the same code the sound no longer plays.

Can anyone share any light on this please??

here is a snippet of my page code that shows the javascript.

Code:

<title>Joho-Designs-Home</title>
<link rel="stylesheet" type="text/css" href="johogallery.css" />
<script language="javascript" type="text/javascript">
 function playSound(soundfile) {
 document.getElementById("dummy").innerHTML=
 "<embed src=\""+soundfile+"\" hidden=\"true\" autostart=\"true\" loop=\"false\" />";
 }
 </script>

 <li><embed name="mySound" src="sounds/SQUEAK3.wav" loop=false autostart=false hidden= true><a href="#" onclick="playSound('sounds/SQUEAK3.wav');"><img src="menu/row3sq3_squeak_OP.png" border="0" alt="1"/></a></li>

Thanks and look forward to replies!!

How could I make it so that instead of seeing a embed object you would just see a input button that says play. I do not need my users to be able to pause them. I really didn't know where to start with the javascript but i do have the html5

Code:

<audio controls="controls">
  <source src="BlackHawkDown-MusicVideo-Frontline.wav" type="audio/wav" />
  <source src="BlackHawkDown-MusicVideo-Frontline.mp3" type="audio/mpeg" />
  Your browser does not support the audio element.
</audio>

THANKS!!!!

Hi there,

Not sure what sub category this falls under sorry, but I have an issue changing a table based menu to a css based menu.

This has been done however the javascript code no only partly works, I would like for it to completely work and am not sure whether I should use aspanel or <div> tags to get it to work as I have tried both and neather seem to work so there is something i am obviously missing!

here is the javascript:
Code:

$(function() {
    $('#mainCategories a').live('click', function() {
        $.ajax({
            type: "GET",
            contentType: "text/html; charset=utf-8",
            dataType: "html",
            url: "/ajax/menu.aspx?CategoryId=" + this.name,
            cache: false,
            success: function(newMenu) {
                $("#left-menu-control").replaceWith(newMenu);
                $('html, body').animate({ scrollTop: 0 }, 'slow');
            }
        });
        return false;
    });

    $('#left-menu-collapse-category').live('click', function() {
    $.ajax({
        type: "GET",
        contentType: "text/html; charset=utf-8",
        dataType: "html",
        url: "/ajax/menu.aspx",
        cache: false,
        success: function(newMenu) {
            $("#left-menu-control").replaceWith(newMenu);
        }
    });
    return false;
    });
});

and here is the page code:
Code:

<div id="menu-left">

<asp:Panel ID="pnlLeftMenuControl" runat="server">
	
	<asp:Panel ID="pnlCategories" runat="server">
			
			<asp:Panel ID="pnlCurrentlyViewing1" runat="server" Visible="false">
				<div id="menu-left-main-categories">
				<div id="menu-left-currently-viewing-title">Currently Viewing...</div>
				<div id="menu-left-currently-viewing-close"><a href="javascript:void(0);" title="Collapse category" id="left-menu-collapse-category"><img src="~/images/button-menu-left-currently-viewing-close.jpg" runat="server" border="0" /></a></div>
				</div>
			</asp:Panel>
		
			<asp:Panel ID="pnlCurrentlyViewing2" runat="server" Visible="false">
				<div id="menu-left-currently-viewing">
				<div id="menu-left-currently-viewing-text"><asp:Hyperlink ID="hlCategory" runat="server" CssClass="left-menu-viewing"></asp:Hyperlink></div>
				</div>
			</asp:Panel>
		
			<asp:Panel ID="pnlSubCategories1" runat="server" Visible="false">
				<asp:Repeater ID="rptSubCategories" runat="Server">
					<ItemTemplate>
						<div id="menu-left-currently-viewing">
						<div id="menu-left-currently-viewing-text">- <asp:HyperLink ID="hlSubCategory" runat="server" CssClass="left-menu-viewing"></asp:HyperLink></div>
						</div>
					</ItemTemplate>
				</asp:Repeater>
			</asp:Panel>
			
			<asp:Panel ID="pnlMainCategories" runat="server">
				<asp:Repeater ID="rptMainCategories" runat="server">
					<ItemTemplate>
					<div id="menu-left-main-categories"><div id="menu-left-main-categories-text"><asp:HyperLink ID="hlCategory" runat="server" CssClass="left-menu"></asp:HyperLink></div></div>
					</ItemTemplate>                
				  </asp:Repeater>
			</asp:Panel>
			
		</asp:Panel>
      
	<asp:Panel ID="pnlBrands" runat="server" Visible="false">
		
		<asp:Panel ID="pnlBCurrentlyViewing1" runat="server" Visible="false">
			Currently viewing...
		</asp:Panel>
		
		<asp:Panel ID="pnlBCurrentlyViewing2" runat="server" Visible="false">
			<asp:Label ID="lblBCurrentlyViewing" runat="server" CssClass="left-menu-viewing"></asp:Label>
		</asp:Panel>
	
		<asp:Repeater ID="rptBrands" runat="server">
			<ItemTemplate>
				<asp:HyperLink ID="hlBrand" runat="server" CssClass="left-menu"></asp:HyperLink>
			</ItemTemplate>                
		</asp:Repeater>
		
	</asp:Panel>
	  
</asp:Panel>
</div>

any help would be greatly appreciated

I want to use HTML5's audio coding similar to the one below:

Code:

var audioElement = document.createElement('audio');
audioElement.setAttribute('src', 'horse.ogg');
audioElement.play();

In order to play sound files depending on the input. What I'm working on is a text-to-speech webapplication.

What I'd need to happen is for there to be an input and then allow the user to type anything into the input, so if they type in:

Hello, how are you doing?

Javascript or PHP will recognize each character and translate it into an audio sequence.

In example:

It'd detect the "H" in hello and play sound file "H.ogg"
It'd then detect the "E" in hello and play sound file "E.ogg"

I know there must be an easy way to do this.

hi I am trying to play a video from youtube. What I have done so far is getting videos from my database and displaying all those videos thumbnails. So now what i want is to when i click any thumbnail it should play that video in my website. How can I do this?

Here is my code
Code:

function showResult(result) {
        $('#videosLoader').css('display','none');
            var videoId = result.split(" ");
            for(i = 0; i < videoId.length - 1; i++) {
            var vidId = $.trim(videoId[i]);
            vidLink = getScreen(vidId,"small");
            $('#videosList').append("<div class='playVid'>" + 
                                        "<img width=80 height=80 src=" + vidLink + " alt='' /> " + 
                                        "<input type='hidden' name='vidId' value='" + vidId + "' />" + 
                                    "</div>").addClass("playVid");
    }
    
    $('.playVid').click(function() {
        var val = $("input[name='vidId']").val();
        alert("val");
        $("#haveYourDefinition").append("<embed src='http://www.youtube.com/v/" + val + "&rel=1' pluginspage='http://adobe.com/go/getflashplayer' type='application/x-shockwave-flash' quality='high' width='450' height='376' bgcolor='#ffffff' loop='false'></embed>");
    });

When I click any thumbnail it does nothing. Why and please tell me how to do this? Help

hi there, im trying to get a sound effect to play when a slideshow runs.

the user selects the sound from a drop down menu on each image. The sound play when selected. But i need some way to pass it into the function that starts the slideshow.

I am using pixtastic library to add effects to the images, and jquery (with cycle plugin) to perform the slideshow. The sounds ive put in work when selected, but i need to write a function to play them when the slideshow runs (this is where im stuck!)

The library is soundmanager2

Here is the code

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script  type="text/javascript" src="js/pixastic.core.js"></script>
<script  type="text/javascript" src="js/pixastic.jquery.js"></script>
<script type="text/javascript" src="js/actions/sepia.js"></script>
<script type="text/javascript" src="js/actions/flipv.js"></script>
<script type="text/javascript" src="js/actions/emboss.js"></script>
<script type="text/javascript" src="js/actions/blur.js"></script>
<script type="text/javascript" src="js/actions/solarize.js"></script>
<script type="text/javascript" src="js/actions/edges.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<!-- include Cycle plugin -->
<script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.latest.js"></script>
<script type="text/javascript" src="js/Soundmanager/script/soundmanager.js"></script>
<script>
function change_image(id, effect)
{
	Pixastic.process(document.getElementById(id),effect);
}
		function startShow()
	{
		//get the canvas elements on the page
		var canvases = document.getElementsByTagName("canvas");
		var viewpane = document.getElementById("slideshow");
		for(i=0;i<canvases.length;i++)
		{
			viewpane.appendChild(canvases[i]);
		}
		$('#slideshow').cycle({
			fx: 'all' // choose your transition type, ex: fade, scrollUp, shuffle, etc...
		});

	}

</script> 
	<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
	<link rel="stylesheet" href="css/main.css" type="text/css" />
	<title>My Slideshow</title>
</head>
<body>
<div>
 <!-- soundManager appends "hidden" Flash to the first DIV on the page. -->
</div> 
	<div class="wrap">
		<h1 id="logo"><a href="javascript:location.reload(true)">My Slideshow!</a>	<br /></a></h1>
		<ul id="menu">
			Welcome to my slideshow, click view show to start<p>alternatively, click the headline to start again</p>
		
		</ul>
		<div id="text">
			<h2>Edit the images and start the show!</h2><p><h3>You can add more than one effect to each image!</h3>
      <div id = "slideshow">
<iNPUT TYPE=BUTTON OnClick="startShow()" VALUE="View The Show"> 

</div>
			</div>
<div id="leftcolumn">  
  <div id ="firstImage"> 
<img id="image1" src = "images/image1.jpg"></image>
	<form name="first_pic" id="first_pic">
  <select name="image1" onchange = "change_image(this.name,this.value);">
  <option value="blank">Edit the Image</option>
  <option value="sepia">Sepia</option>
  <option value="flipv">Flip Vertical</option>
  <option value="emboss">Emboss</option>
  <option value="solarize">Solarize</option>
  <option value="blur">Blur</option> 
  <option value="edges">Edged</option>
</select>
<select name="image1" onchange = "soundManager.play(this.value);">
  <option value="">Choose a sound</option>
  <option value="beep">Beep</option>
  <option value="gangsta">Gangsta</option>
  <option value="glass">Glass</option>
  <option value="page">Page turn</option>
</select>
</div>

</p>
 </div> 
 <div id="rightcolumn">

  <div id = "secondImage">
<img id="image2" src = "images/image2.jpg"></image>
	<form name="first_pic" id="first_pic">
  <select name="image2" onchange = "change_image(this.name,this.value);">
  <option value="blank">Edit the Image</option>
  <option value="sepia">Sepia</option>
  <option value="flipv">Flip Vertical</option>
  <option value="emboss">Emboss</option>
  <option value="solarize">Solarize</option>
  <option value="blur">Blur</option>
  <option value="edges">Edged</option>
</select>
<select name="image2" onchange = "soundManager.play(this.value);">
  <option value="">Choose a sound</option>
  <option value="beep">Beep</option>
  <option value="gangsta">Gangsta</option>
  <option value="glass">Glass</option>
  <option value="page">Page turn</option>
</select>
</div>
</div>			
			
			
		<div id="green_bubble">
			
		</div>
	</div>
	<div id="footer">
		<div class="wrap">
			<div id="bubble"></div>
			<div id="copyright">
				
			</div>
			<div class="clear"></div>
		</div>
	</div>
	<script type="text/javascript">soundManagerInit();</script>
</body>
</html>

Thanks!

I have a self project I am exploring. I would like to play a simple sound file each time a function is run. The function runs every second, so, basically, I am just trying to get an audible click sound file to run every time the function runs. I do not know how to play a sound file thru javascript. Any ideas?

Here is the code file thus far...

Code:

<html>

<head>

   <title>Timer</title>
   <link href="timer.css" rel="stylesheet" type="text/css" />
   <embed src="click.wav" autostart=false hidden=true name="sound1" enablejavascript="true">
   <script type="text/javascript">
       var seconds = 0;
       var clockId;
       var running = false;

       function runClock() { 
           seconds++;
           document.timer.timerClock.value = seconds; 
       }

       function startClock() {
           if (!running) {
           clockId = setInterval('runClock()',1000);
           running = true;
           }
       }

       function stopClock() {
            if (running) {
           clearInterval(clockId); 
           running = false;   
           }       
       }
       
       function resetClock() {
           document.timer.timerClock.value = 0;
           seconds = 0;
       }
   </script>
</head>
<body>
<form id="timer" name="timer" action="">
<div id="header">  
   <p>
   <span>Timer<br />   
   </p>
</div>
<div id="intro">
   <p>Click to begin timer</p>
   <p id="buttons">
      <input onclick="startClock()" type="button" value="Begin Seconds Counter" />
      <br />
      <input name="timerClock" id="timerClock" value="0" />      
      <br />
      <input onclick="stopClock()" type="button" value="Stop Timer" />
      <br />
      <input onclick="resetClock()" type="button" value="Reset Timer" />
   </p>
</div>
</form>
</body>
</html>

Ok, I'm working in dreamweaver cs4

I'm trying to make my links have a sound on mouseover. The tag for this is under the depreciated behaviour section. I tried it to test it.

It added the following code to my link:

Code:

To View Full Product Line<br />
        <a href="http://herbal-nutrition.net/yesifeelgood/products" target="_blank" onmouseover="MM_controlSound('play','document.test','sounds/Sound 378.mp3')">Click Here</a>

<embed name="test" src="sounds/Sound 378.mp3" loop="false" autostart="false" hidden="true" width="0" height="0" enablejavascript="true"></embed>

My only problem is that when this loads in a browser on mouseover it loads the window as a quicktime sound then directs to the link

preview on the following link (the link where I added the sound is underneath the slideshow:

http://www.designfoxmediaworks.com/c...e/carlene.html

is there something i should be changing to make this work properly?

Which is the best way to play sound using javascript in a controlled manner ?
I need a solution which work across all browsers.

This is for my bingo game page which is fully based on ajax.

Thanks .

i have an ajax/comet chat setup and working and i added the following line to it to play a sound when a new message is received... however every time it plays the sound, it unfocuses the textbox that the user is typing a new chat msg in....

Code:

$('soundbox').innerHTML="<embed src='WAVE_358.wav' hidden=true autostart=true loop=false>";

I am working with the quiz found below (Multiple Choice Quiz that is instantly graded/checked), and would like to add pictures to the questions and rollover sound effects.

I have figured how to add the picture, but not the sound. Sound effects are played when added to the html section, but not when added to the javascript coding. I am alright with html and css, but not with javascript. Any help from the javascript experts would be appreciated.


********* Coding Example *********

<HTML>
<HEAD>
<TITLE>The JavaScript Source: Miscellaneous : Multiple Choice Quiz</TITLE>
<META HTTP-EQUIV="The JavaScript Source" CONTENT = "no-cache">
<META NAME="description" CONTENT="Add a quiz to your Web page without using a server-side script. Easy to set-up. Questions and answers are stored in a multi-dimensional array format in an external file. The quiz is marked in real time, and once answered, questions are set to read-only. A summary of the users score is alerted at the end.">
<META NAME="date" CONTENT="2005-12-27">
<META NAME="channel" CONTENT="Developer">
<META NAME="author" CONTENT="James Crooke">
<META NAME="section" CONTENT="Miscellaneous">
<style type="text/css">
<!--
.question {
color:darkblue;
font-size:14px;
font-weight:bold;
}
-->
</style>

<script type="text/javascript">
<!--
/* This script and many more are available free online at
The JavaScript Source :: http://javascript.internet.com
Created by: James Crooke :: http://www.cj-design.com */

var useranswers = new Array();
var answered = 0;

function renderQuiz() {
for(i=0;i<questions.length;i++) {
document.writeln('<p class="question">' + questions[i] + ' <span id="result_' + i + '"><img src="blank.gif" style="border:0" alt="" /></span></p>');
for(j=0;j<choices[i].length;j++) {
document.writeln('<input type="radio" name="answer_' + i + '" value="' + choices[i][j] + '" id="answer_' + i + '_' + j + '" class="question_' + i + '" onclick="submitAnswer(' + i + ', this, \'question_' + i + '\', \'label_' + i + '_' + j + '\')" /><label id="label_' + i + '_' + j + '" for="answer_' + i + '_' + j + '"> ' + choices[i][j] + '</label><br />');
}
}
document.writeln('<p><input type="submit" value="Show Score" onclick="showScore()" /> <input type="submit" value="Reset Quiz" onclick="resetQuiz(true)" /></p><p style="display:none"><img src="correct.gif" style="border:0" alt="Correct!" /><img src="incorrect.gif" style="border:0" alt="Incorrect!" /></p>');
}
function resetQuiz(showConfirm) {
if(showConfirm)
if(!confirm("Are you sure you want to reset your answers and start from the beginning?"))
return false;
document.location = document.location;
}
function submitAnswer(questionId, obj, classId, labelId) {
useranswers[questionId] = obj.value;
document.getElementById(labelId).style.color = "grey";
//disableQuestion(classId);
showResult(questionId);
answered++;
}
function showResult(questionId) {
if(answers[questionId] == useranswers[questionId]) {
document.getElementById('result_' + questionId).innerHTML = '<img src="correct.gif" style="border:0" alt="Correct!" />'; // I tried to make the background a different colour for the answer document.getElementById(questionId).style.border ='1px';
} else {
document.getElementById('result_' + questionId).innerHTML = '<img src="incorrect.gif" style="border:0" alt="Incorrect!" />';
}
}
function showScore() {
if(answered != answers.length) {
alert("You have not answered all of the questions yet!");
return false;
}
questionCount = answers.length;
correct = 0;
incorrect = 0;
for(i=0;i<questionCount;i++) {
if(useranswers[i] == answers[i])
correct++;
else
incorrect++;
}
pc = Math.round((correct / questionCount) * 100);
alertMsg = "You scored " + correct + " out of " + questionCount + "\n\n";
alertMsg += "You correctly answered " + pc + "% of the questions! \n\n";
if(pc == 100)
alertMsg += response[0];
else if(pc >= 90)
alertMsg += response[1];
else if(pc >= 70)
alertMsg += response[2];
else if(pc > 50)
alertMsg += response[3];
else if(pc >= 40)
alertMsg += response[4];
else if(pc >= 20)
alertMsg += response[5];
else if(pc >= 10)
alertMsg += response[6];
else
alertMsg += response[7];
if(pc < 100) {
if(confirm(alertMsg))
resetQuiz(false);
else
return false;
} else {
alert(alertMsg);
}
}
function disableQuestion(classId) {
var alltags=document.all? document.all : document.getElementsByTagName("*")
for (i=0; i<alltags.length; i++) {
if (alltags[i].className == classId) {
alltags[i].disabled = true;
}
}
}

var questions = new Array();
var choices = new Array();
var answers = new Array();
var response = new Array();

// To add more questions, just follow the format below.

questions[0] = "1) JavaScript is ..." ;
choices[0] = new Array();
choices[0][0] = "the same as Java";
choices[0][1] = "kind of like Java";
choices[0][2] = "different than Java";
choices[0][3] = "ther written part of Java";
answers[0] = choices[0][2];



///////// THIS IS THE SECTION THAT I'M TRYING TO WORK ON /////////
// image works, but sound doesn't //

questions[1] = "<a href='javascriptHTMLSound' id='dummyspan' // the smiley is actually a colon followed by a D as in "DHTML"
onMouseOver='DHTMLSound('success.wav')'><img src='some_image.gif'></a>";
choices[1] = new Array();
choices[1][0] = "Play This" + "<a href='javascriptlaySound('success.wav')'>Play This</a>";
choices[1][1] = "objective";
choices[1][2] = "evil";
choices[1][3] = "object based";
answers[1] = choices[1][3];

/////////////////////////////////////////////////////////////////



questions[2] = "3) To comment out a line in JavaScript ...";
choices[2] = new Array();
choices[2][0] = "Precede it with two forward slashes, i.e. '//'";
choices[2][1] = "Precede it with an asterisk and a forward slash, i.e. '*/'";
choices[2][2] = "Precede it with an asterisk, i.e. '*'";
choices[2][3] = "Precede it with a forward slash and an asterisk, i.e. '/*'";
answers[2] = choices[2][0];

questions[3] = "4) JavaScript can only run on Windows";
choices[3] = new Array();
choices[3][0] = "True";
choices[3][1] = "False";
answers[3] = choices[3][1];

questions[4] = "5) Semicolons are optional at the end of a JavaScript statement.";
choices[4] = new Array();
choices[4][0] = "True";
choices[4][1] = "False";
answers[4] = choices[4][0];

questions[5] = "strings are...";
choices[5] = new Array();
choices[5][0] = "strings, numbers, BooBoos, and nulls";
choices[5][1] = "strings, text, Booleans, and nulls";
choices[5][2] = "strings, numbers, Booleans, and nulls";
choices[5][3] = "strings, numbers, Booleans, and zeros";
answers[5] = choices[5][2];

// response for getting 100%
response[0] = "Excellent, top marks!";
// response for getting 90% or more
response[1] = "Excellent, try again to get 100%!"
// response for getting 70% or more
response[2] = "Well done, that is a good score, can you do better?";
// response for getting over 50%
response[3] = "Nice one, you got more than half of the questions right, can you do better?";
// response for getting 40% or more
response[4] = "You got some questions right, you can do better!";
// response for getting 20% or more
response[5] = "You didn't do too well, why not try again!?";
// response for getting 10% or more
response[6] = "That was pretty poor! Try again to improve!";
// response for getting 9% or less
response[7] = "Oh dear, I think you need to go back to school (or try again)!";

//-->
</script>

</HEAD>
<BODY BGCOLOR=#ffffff vlink=#0000ff >
<script>
function DHTMLSound(surl) {
document.getElementById("dummyspan").innerHTML="<embed src='"+surl+"' hidden=true autostart=true loop=false>";
}
</script>
<script type="text/javascript">
<!--
renderQuiz();
//-->
</script>
</body></html>


*********

I have also tried the following sound ideas, but none work "within" the javascript -- they do work when assigned to a button inside the html however... The trick is, I want to be able to display an image within the question, then mouseover a <span> of text or an image (preferrably NOT a link <a>) and have the sounds played as part of the choices for the question.

For a slightly different purpose, I'm also interested in being able to have the correst answer (for more complicated quizes) appear beside the question, in a <div> if possible, rather than an alert, to give the solution / reasoning for the correct answer.

Any help at all would be really appreciated.