PDA

Click to See Complete Forum and Search --> : Initiate background sound when click a button/word/picture

Calzinger
10-26-2003, 06:21 PM
I'm trying to turn on a background sound when someone clicks a button. However, the script below turns on the sound when it is clicked, but the page freezes. It's as if it opens a brand new page with just that sound in its source. Any ideas how I can play a sound when a user clicks something?

<script language="javascript"><!--

function music() {
document.write("<bgsound src='url'>");
}
//-->
</script>

<a href="http://sound.source.here.soundtype">init sound</a>


I've tried changing href to onClick.
I've tried putting that script in <head>.
I've tried removing the <!-- & //--> comments.
All of the above did not work.
fredmv
10-26-2003, 06:38 PM
Welcome to the forums.

The reason your code isn't working correctly is because when you make a call to the write method, it completely overwrites the content of the document. What you really want to be doing is writing the an element or using an <embed> element to embed an actual sound player object into the page, then you can access methods such as play and stop. Here's an example I put togethe, all you need to do is change sound.mp3 to the file that you're working with: <!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" xml:lang="en">
<head>
<title>untitled</title>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=iso-8859-1" />
</head>
<body>
<div>
<embed id="sound" src="sound.mp3" autostart="false" style="position: absolute; display: none;"></embed>
<a href="#" onclick="document.getElementById('sound').play();">Play</a> |
<a href="#” onclick=”document.getElementById('sound').stop();">Stop</a>
</div>
</body>
</html>I hope that helps you out.
Calzinger
10-26-2003, 08:32 PM
Thank you for that example, but I am still having some trouble. I used that exact code in a brand new page to test it and I changed the sound source to a valid sound path. But when I click the link, I just get an "Error on page". Can .mp3s be embeded?

**
I've just tried it with .wavs and .mids, none of which actually work. Do you know of any other sites that use this which I can look at?
fredmv
10-26-2003, 08:39 PM
Very sorry about that. I just corrected my error. Try this:<!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" xml:lang="en">
<head>
<title>untitled</title>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=iso-8859-1" />
</head>
<body>
<div>
<embed id="sound" src="sound.mp3" autostart="false" hidden="true"></embed>
<a href="#" onclick="document.getElementById('sound').play();">Play</a> |
<a href="#" onclick="document.getElementById('sound').stop();">Stop</a>
</div>
</body>
</html>
Calzinger
10-26-2003, 08:42 PM
Thank you very much for your help, this has worked. But apparently, it doesn't like .mp3. I also want to avoid converting it to .wav considering the massive amount of space it takes when converting. Do you know of any .mp3 to .mid trial version programs I can download?

**
Actually, I was able to convert it to .wma while preserving size, and I was still able to play the sound.

Thank you for your time and help. I shall recommend this site should anyone else I know encounter any problems in the future.
fredmv
10-26-2003, 08:53 PM
You're very welcome. I'm happy that helped you out. :D