/    Sign up×
Community /Pin to ProfileBookmark

Initiate background sound when click a button/word/picture

Copy linkTweet thisAlerts:
Oct 27.2003

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?

[code=php]<script language=”javascript”><!–

function music() {
document.write(“<bgsound src=’url’>”);
}
//–>
</script>

<a href=”http://sound.source.here.soundtype”>init sound</a>
[/code]

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.

to post a comment
JavaScript

5 Comments(s) ↴

Copy linkTweet thisAlerts:
@fredmvOct 27.2003 — Welcome to the forums.

The reason your code isn't working correctly is because when you make a call to the [font=courier]write[/font] method, it completely overwrites the content of the document. What you really want to be doing is writing the an element or using an [font=courier]<embed>[/font] element to embed an actual sound player object into the page, then you can access methods such as [font=courier]play[/font] and [font=courier]stop[/font]. Here's an example I put togethe, all you need to do is change [font=courier]sound.mp3[/font] to the file that you're working with: &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;

&lt;html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"&gt;
&lt;head&gt;
&lt;title&gt;untitled&lt;/title&gt;
&lt;meta http-equiv="Content-Type" content="application/xhtml+xml; charset=iso-8859-1" /&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div&gt;
&lt;embed id="sound" src="sound.mp3" autostart="false" style="position: absolute; display: none;"&gt;&lt;/embed&gt;
&lt;a href="#" onclick="document.getElementById('sound').play();"&gt;Play&lt;/a&gt; |
&lt;a href="#” onclick=”document.getElementById('sound').stop();"&gt;Stop&lt;/a&gt;
&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;I hope that helps you out.
Copy linkTweet thisAlerts:
@CalzingerauthorOct 27.2003 — 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?
Copy linkTweet thisAlerts:
@fredmvOct 27.2003 — Very sorry about that. I just corrected my error. Try this:&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;

&lt;html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"&gt;
&lt;head&gt;
&lt;title&gt;untitled&lt;/title&gt;
&lt;meta http-equiv="Content-Type" content="application/xhtml+xml; charset=iso-8859-1" /&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div&gt;
&lt;embed id="sound" src="sound.mp3" autostart="false" hidden="true"&gt;&lt;/embed&gt;
&lt;a href="#" onclick="document.getElementById('sound').play();"&gt;Play&lt;/a&gt; |
&lt;a href="#" onclick="document.getElementById('sound').stop();"&gt;Stop&lt;/a&gt;
&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;
Copy linkTweet thisAlerts:
@CalzingerauthorOct 27.2003 — 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.
Copy linkTweet thisAlerts:
@fredmvOct 27.2003 — You're very welcome. I'm happy that helped you out. ?
×

Success!

Help @Calzinger spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.15,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...