PDA

View Full Version : Sound-script



annbjørg
05-11-2005, 09:48 PM
I wanted to add a soundscript to my homepage, and I found one on these pages.
But I could not find the .js file which is supposed to be there. It says:

"The above script references an external .js file, which you can download below:"

(but I can't find it. I use IE, by the way)

Any suggestions?

jscheuer1
05-12-2005, 03:23 AM
Looks like a typo to me, it should read:

The above script references an external .wav file, which you can download below:

annbjørg
05-12-2005, 08:01 AM
Ah.. I see.. Yes, it could probably be that. I haven't tried the script yet, but I'll give it a go.

Thank you for helping a silly girl :D

jscheuer1
05-12-2005, 09:30 AM
One night I really got into this sound business. Using Google, I found two or three scripts, none of which worked particularly well. I came up with a cross browser script of my own using pieces of the code I had found and bound it all together with a bit of trial, error and common sense. Here is the result:


<html>
<head>
<title>Cross Browser Sound - Demo</title>
<style type="text/css">
.snd {
height:0;
width:0;
position:absolute;
top:0;
left:0
}
</style>
<script type="text/javascript">
/*Cross Browser Sound Script
Copyright © John Davenport Scheuer
Permission granted for use
This credit must stay intact*/
//////////No need to Edit Script/////////
function e_sound(soundobj) {
if((!document.all)&&(document.getElementById)){
var thissound= eval("document."+soundobj);
thissound.Play();
}
else if(document.all){
var a=eval("document.all."+soundobj+".src");
document.all.sound.src=a;
}
else
return;
}
</script>
</head>
<body onfocus="if(document.all)document.all.sound.src=''">
<bgsound id="sound">
<!--edit below embeds to add different SRC sounds or add more,
use a unique name for each embed-->
<embed class="snd" NAME="chm" SRC="chimes.wav" AUTOSTART="false" loop="false" HIDDEN="true">
<embed class="snd" NAME="dng" SRC="ding.mp3" AUTOSTART="false" loop="false" HIDDEN="true">
<embed class="snd" NAME="thp" SRC="thup.wav" AUTOSTART="false" loop="false" HIDDEN="true">
<!--use with any element that supports onMouseOver, onMouseOut or onClick events-->
<span onmouseOver="e_sound('chm')" onmouseOut="e_sound('dng')">Mouse Over This for Chime, Mouse Out for Ding</span>
<br><a href=// onmouseOver=e_sound('thp')>Thup!</a>
</body>
</html>There is virtually nothing non-essential in this demo, as documented, change only the source sounds and the elements receiving sound events. You can use .wav or .mp3 files - small, short sounds are best.

MarcMiller
11-02-2006, 11:26 PM
One night I really got into this sound business. Using Google, I found two or three scripts, none of which worked particularly well. I came up with a cross browser script of my own using pieces of the code I had found and bound it all together with a bit of trial, error and common sense. Here is the result:


<html>
<head>
<title>Cross Browser Sound - Demo</title>
<style type="text/css">
.snd {
height:0;
width:0;
position:absolute;
top:0;
left:0
}
</style>
<script type="text/javascript">
/*Cross Browser Sound Script
Copyright © John Davenport Scheuer
Permission granted for use
This credit must stay intact*/
//////////No need to Edit Script/////////
function e_sound(soundobj) {
if((!document.all)&&(document.getElementById)){
var thissound= eval("document."+soundobj);
thissound.Play();
}
else if(document.all){
var a=eval("document.all."+soundobj+".src");
document.all.sound.src=a;
}
else
return;
}
</script>
</head>
<body onfocus="if(document.all)document.all.sound.src=''">
<bgsound id="sound">
<!--edit below embeds to add different SRC sounds or add more,
use a unique name for each embed-->
<embed class="snd" NAME="chm" SRC="chimes.wav" AUTOSTART="false" loop="false" HIDDEN="true">
<embed class="snd" NAME="dng" SRC="ding.mp3" AUTOSTART="false" loop="false" HIDDEN="true">
<embed class="snd" NAME="thp" SRC="thup.wav" AUTOSTART="false" loop="false" HIDDEN="true">
<!--use with any element that supports onMouseOver, onMouseOut or onClick events-->
<span onmouseOver="e_sound('chm')" onmouseOut="e_sound('dng')">Mouse Over This for Chime, Mouse Out for Ding</span>
<br><a href=// onmouseOver=e_sound('thp')>Thup!</a>
</body>
</html>There is virtually nothing non-essential in this demo, as documented, change only the source sounds and the elements receiving sound events. You can use .wav or .mp3 files - small, short sounds are best.

Hi-
I came upon this thread via the Google search engine searching on "onclick sound" which was exactly what I was looking for. The above quoted posting comes close to exactly what I was looking for but not quite. Exactly what I was looking for is a script that would run in a behavior layer( that is in linked javascript as opposed to embedded JavaScript.) I wanted to have a separate behavior layer the course I have been reading it is the best and most modern programming practice and since I am, a want to be professional, I want to create sites that will impress. I want to do this in hopes that this is a good way to break into the field.

So I tried the above code first adding an onclick event per HTML comment that this will work to and it did. I then proceeded to cut the script and only the script between the script tags and put it in onload event in a separate page the way I have done at least a few times before and it did not work. I left all the embed tags intact and went over and over my script. All I had in my script was in onload event calling a function with an exact copy of what was between the script tags but it didn't work.

So I would very much appreciate if somebody here could tell me if it is possible to make this script work that way or alternatively is there another script that one has or I could develop that would work? If I must develop this myself is anyone here have advice as to how to start learning to develop an onclick sound that would run in the behavior layer?

Anything that could be said here that could help with my above pursuit would be very much appreciated.
Very sincerely
Marc

tech_support
11-02-2006, 11:28 PM
Also...

Warning: This is not a Dynamic Drive Script related question.

Don't worry 'bout that now. ddadmin will probably move the thread anyway.

Twey
11-03-2006, 04:43 PM
Here is the result:And royally hideous it is too. I'd be fairly surprised if some of that HTML even worked, let alone validated :-\
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Cross Browser Sound - Demo</title>
<style type="text/css">
.snd {
display: none;
}
</style>
<script type="text/javascript">
function playSound(soundobj) {
if(document.all)
document.getElementsByTagName("bgsound")[0].src = document.all[soundobj].src;
else if(document.getElementById)
document.getElementById(soundobj).Play();
}

function stopSound(soundobj) {
if(document.all)
document.getElementsByTagName("bgsound")[0].src = "";
else if(document.getElementById)
document.getElementById(soundobj).Stop();
}
</script>
</head>
<body onfocus="stopSound('*');">
<!--[if IE]>
<bgsound>
<![endif]-->

<!-- edit below embeds to add different SRC sounds or add more, use a unique ID for each embed -->
<embed class="snd" id="chm" src="chimes.wav" autostart="false" loop="false" hidden="true">
<embed class="snd" id="dng" src="ding.mp3" autostart="false" loop="false" hidden="true">
<embed class="snd" id="thp" src="thup.wav" autostart="false" loop="false" hidden="true">

<!-- use with any element that supports onMouseOver, onMouseOut or onClick events -->
<p onmouseover="playSound('chm');" onmouseout="playSound('dng');">Mouse Over This for Chime, Mouse Out for Ding</p>
<p class="falseLink" onmouseover="playSound('thp');">Thup!</p>
</body>
</html>Untested.

jscheuer1
11-03-2006, 06:42 PM
And royally hideous it is too. I'd be fairly surprised if some of that HTML even worked, let alone validated

Agreed. We've come a long way. When was that originally posted? 05-12-2005, over a year ago according to the forum, I'm a fast learner - I haven't been using code quite that bad for a long time now. That code worked at that time but perhaps only in NS 7 and IE 6, and certainly is funky. I have at least one other thread in these forums that either updates that approach or takes a different one that is both prettier to look at and more cross browser. I'll see if I can find it and report back.

Twey
11-03-2006, 06:51 PM
Ah, yes. I did wonder about the apparent drop in standard :) Didn't think to check the date.

jscheuer1
11-03-2006, 06:56 PM
OK, I found a thread that fits this:

http://www.dynamicdrive.com/forums/showthread.php?t=7400

Twey and I worked together there too. It is for onclick events but could as easily be made to be onmouseover/onmouseout events.

ultranet
11-06-2006, 09:04 AM
This is exactly what I am looking for....

thanks for this informations and links....:cool:

MarcMiller
11-06-2006, 03:04 PM
Thanks -jscheuer1, you'll link took me further along on where I was trying to go after some thought.

I am not sure if all of you fully perceived what I was saying about the behavior layer. Just to be sure there is a link which fully explains it at "A LIST Apart." (http://www.alistapart.com/articles/scripttriggers/) what I was trying to do is put my JavaScript code in a separate JavaScript layer I have done that. And than my wants evolved to wanting to attach my sound to all anchor tags automatically. So let me first post my code that works and then ask a question about my code which is not working yet.

html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Attach sound per anchor ID</title>
<meta content="text/html; charset=us-ascii" http-equiv="Content-Type" />

<script src="attachSoundPerAnchorID.js" type="text/javascript"></script>
</head>
<body>
<embed id="thup" src="thup.wav" loop="false" autostart="false" hidden="true" enablejavascript="true"></embed>
<p>&nbsp;&nbsp;
<a id="anchor1" href="#">one</a>
<br><br><br>&nbsp;&nbsp;
<a id="anchor2" href="#">two</a>
</p>

</body>
</html>

javascript

function onClickSound(){
document.getElementById('thup').Play();
}


window.onload = function () {
document.getElementById("anchor1").onclick=onClickSound;
document.getElementById("anchor2").onclick=onClickSound;
}

The above code is working however when I extended to attaching the sound automatically to all anchor tags with a loop it doesn't work. Could anybody please look at this code and tell me what I am doing wrong.

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Attach sound on all anchors</title>
<meta content="text/html; charset=us-ascii" http-equiv="Content-Type" />

<script src="AttachSoundOnAllAnchors.js" type="text/javascript"></script>
</head>
<body>
<embed id="thup" src="thup.wav" loop="false" autostart="false" hidden="true" enablejavascript="true"></embed>
<p>&nbsp;&nbsp;<a href="#">one</a><br><br><br>&nbsp;&nbsp;<a href="#">two</a></p>

</body>
</html>

javascript

var anchors = document.getElementsByTagName("a");
function onClickSound(){
document.getElementById('thup').Play();
}
function allAanchor(){
for (var i=0; i < anchors.length; i++) {
var anchor = anchors[i];
anchor.onclick=onClickSound();
}
}

window.onload = function () {
allAanchor();
}

Your further help will be greatly appreciated.
Very sincerely
Marc

jscheuer1
11-06-2006, 04:36 PM
There could be other problems Marc but, doing this:


var anchors = document.getElementsByTagName("a");

before the page loads will not get you all of the anchors on the page. There aren't any anchors on the page, yet. Try putting that in the function that modifies the anchors - and, when assigning a function to an event in this manner (see comment), skip the () part:


function onClickSound(){
document.getElementById('thup').Play();
}
function allAanchor(){
var anchors = document.getElementsByTagName("a");
for (var i=0; i < anchors.length; i++) {
var anchor = anchors[i];
anchor.onclick=onClickSound; // comment - () is removed
}
}

window.onload = function () {
allAanchor();
}

Twey
11-06-2006, 06:21 PM
There are many issues with serving XHTML to clients at this period in its development, not least of which is the total lack of support in IE. This is often hacked around by sending it as text/html and trusting non-supporting browsers to parse it as tag soup, but this approach is really just a silly idea (you'd be much better off just using plain HTML anyway, since you can't use any XHTML-specific features and maintain compatibility in any case) and has intrinsic problems of its own (http://www.hixie.ch/advocacy/xhtml). Transitional DOCTYPEs are intended as a temporary measure to maintain validity during an update from an older DOCTYPE to a newer, and should never be used when designing a new site.

While a well-structured site is certainly a good idea, it has no little or no impact on the client, and so is of less importance than making sure all those layers are well-written.

jscheuer1
11-06-2006, 06:52 PM
There are many issues with serving XHTML to clients . . .

Quite true. And this solves this person's problem with their script how?

Twey
11-06-2006, 07:23 PM
While a well-structured site is certainly a good idea, it has no little or no impact on the client, and so is of less importance than making sure all those layers are well-written.It is related to the purpose of doing so :)

jscheuer1
11-06-2006, 10:31 PM
What do you mean by layer? I know you are not going back to NS 4 but, the term has gotten to be so vague.

Anyways, I think that if you want to do something about DOCTYPEs, it would be a good idea. I'd probably even benefit from it and, if you do a good enough job, it might even become a sticky post. Even if not, we could still link to it rather than constantly having to remind folks of this issue.

Twey
11-06-2006, 10:55 PM
What do you mean by layer? I know you are not going back to NS 4 but, the term has gotten to be so vague.The same thing the OP did. If you read the article to which s/he linked, it explains the common model that keeps content, style and behaviour totally separate, so that one may be modified without affecting the others. It refers to these parts as "layers."

A DOCTYPE-related sticky would be a good idea, but I daresay that Mike could word it more simply and accurately than I could.

jscheuer1
11-06-2006, 11:04 PM
A DOCTYPE-related sticky would be a good idea, but I daresay that Mike could word it more simply and accurately than I could.

But, will he do it? I've got my money on you if you are willing. I'd be happy to have Mike do it or to have you both work on it.

About the layers, sorry. The imprecision is due to the source, not to you. Aren't those really objects then? But, you cannot expect me to read everything folks link to in here. I generally stop paying attention to what is posted when I see (a) problem(s) that I know how to fix. Then I just reply on how to fix that/those.

MarcMiller
11-07-2006, 03:54 AM
jscheuer1 thanks a lot. The changes make it work. I'm not understanding the evoking of the function without parentheses part of it. I know I do it that way myself sometimes but only from copying if anybody has a link to a reference of some sort that would explain this evoking to me I would appreciate it. The code that works with the same HTML is posted below.

Thanks again
Marc



function onClickSound(){
document.getElementById('thup').Play();
}

function allAanchor(){
for (var i=0; i < anchors.length; i++) {
var anchor = anchors[i];
anchor.onclick=onClickSound;
}
}

window.onload = function () {
anchors = document.getElementsByTagName("a");
allAanchor();
}

jscheuer1
11-07-2006, 05:15 AM
That's one of the many reasons we keep folks like Mike (mwinter) and Twey around. They know more about the technical side of things than God does. I know some of this, so let me have a go at it. However, at a different level of course, I am just like you. I do it because I know it works from seeing it done and using it.

First off, one thing I do know, as long as you are not using the anchors variable anywhere else, you should declare it only in the function that is using it and declare it formally with the var keyword. A formal variable declaration's scope is limited to the function in which it is declared so, though it is unavailable outside the scope of that function, it will not get confused with anything else in that or other scripts or be affected by them, it is protected in a way. Also, you do not need to even use anchor, you can use anchors[i] directly. And since that makes only one code response to the loop, that set of brackets is no longer required. To do this in this case the code can be like so:


function onClickSound(){
document.getElementById('thup').Play();
}

function allAanchor(){
var anchors = document.getElementsByTagName("a");
for (var i=0; i < anchors.length; i++)
anchors[i].onclick=onClickSound;
}

window.onload = function () {
allAanchor();
}

Now this brings us to your real question. When you are assigning a function directly to an event, like onload, you don't and cannot pass parameters or use the () suffix. So, your code could now be:


function onClickSound(){
document.getElementById('thup').Play();
}

function allAanchor(){
var anchors = document.getElementsByTagName("a");
for (var i=0; i < anchors.length; i++)
anchors[i].onclick=onClickSound;
}

window.onload = allAanchor;

The reason for this, is what the technical experts will tell us. The reason that it is confusing is that - say you assign a function to an element's event attribute:


<a href="whatever.htm" onclick="onClickSound();return true;">Whatever</a>

Here (in the above) a function is assumed. Likewise you could have done this (and perhaps should to get the correct return value in all cases):


function allAanchor(){
var anchors = document.getElementsByTagName("a");
for (var i=0; i < anchors.length; i++)
anchors[i].onclick=function(){onClickSound();return true;};
}

Without the explicit return value of true, some browser(s) might not fire the href.

Twey
11-07-2006, 08:24 AM
If we're valuing brevity here, that could be written as:
window.onload = function() {
for (var i = 0, anchors = document.links; i < anchors.length; ++i)
anchors[i].onclick = function() {
onClickSound();
return true;
};
};I believe document.links is better-supported in older browsers than document.getElementsByTagName("a"), and besides, it's faster to type :)
Without the explicit return value of true, some browser(s) might not fire the href.Which browsers? I haven't encountered this. Most seem to treat a return of undefined the same as a return of true.
That's one of the many reasons we keep folks like Mike (mwinter) and Twey around. They know more about the technical side of things than God does.Mike might. Wouldn't say that about me, though :p

MarcMiller
11-07-2006, 08:37 PM
Thanks a lot for those two above replies.

At the moment my mind is more than half asleep so I do not have the will to digest what you have said but, I will get to it when I can and have the time.

mburt
01-04-2007, 03:00 PM
That's one of the many reasons we keep folks like Mike (mwinter) and Twey around. They know more about the technical side of things than God does.
Amen, lol.