playing a wave file under JavaScript

A

ArbolOne

I would like to play a wave file in my web page, for that have written
a javascipt but to no avail. Using http://www.jslint.com/ I have found
the following errors:

============
Error:

Implied global: alert 3, document 18, navigator 8

Problem at line 18 character 9: document.write can be a form of eval.

document.writeln('<bgsound src="' + soundfile + '" loop=1>');

Problem at line 21 character 5: document.write can be a form of eval.

document.writeln('<embed src="' + soundfile + '" autoestart=true
loop=false ...

======================
function backgroundPlayer( soundfile ){
var browserName = navigator.appName;
var bsrMSIE = "Microsoft Internet Explorer";
var brsFirefox = "Netscape";

if(browserName == bsrMSIE){
document.writeln('<bgsound src="' + soundfile + '" loop=1>');
}
else if(browserName == brsFirefox){
document.writeln('<embed src="' + soundfile + '" autoestart=true
loop=false width=2 height=0>');
}
}

=====================
what am I doing wrong??

Thanks in advance
 
S

SAM

Le 4/24/09 3:17 AM, ArbolOne a écrit :
I would like to play a wave file in my web page, for that have written
a javascipt but to no avail. Using http://www.jslint.com/ I have found
the following errors:
Click to expand...

nothing can pass agreement of jslint :-(
=====================
what am I doing wrong??
Click to expand...

to try to use bgsound while IE (and most of navigators) can play sound
with embed

<embed src="mysound.wav" autostart="true" autoplay="true" width="1"
height="1" loop="1" name="mySound">


following not working with my IE

<select onchange="var o = this.selectedIndex;
o = this.options[o].text;
var s = document.getElementById('mySound'); //eval('document.mySound');
s = document.body.removeChild(s);
s.src = o+'.wav';
document.body.appendChild(s);">
<option>happy_birthday</option>
<option>daffy</option>
<option>Mozart</option>
</select>
 
S

SAM

Le 4/24/09 6:25 AM, totalstranger a écrit :
Take a look at this page
http://www.phon.ucl.ac.uk/home/mark/audio/play.htm
Click to expand...

Almost all of that there is not working with my Fx.
(Mac 10.4.11 + QT + Fx.3)
- the embed must be sized to 1px side

That bellow works with my browsers
except Opera that doesn't stop sound :

<script type="text/javascript">
function getObj(obj) { return document.getElementById(obj); }
function playIt(objId) {
var son = getObj(objId);
if(typeof son.Play == 'undefined')
return soundOp('success.wav',objId);
son.Play();
}
function stopIt(objId) {
var son = getObj(objId);
if(typeof son.Stop == 'undefined') return soundOp('',objId);
son.Stop(); // that pause with my QT plugin
if(son.Rewind) son.Rewind(); // so we rewind the sound
}
function soundOp(soundFile, soundId) {
var t = getObj(soundId),
s = t.cloneNode(true);
s.src = soundFile;
document.body.replaceChild(s,t);
s=null;
return false;
}
document.write('<embed src="'+
(navigator.appName=='Opera'? '':'success.wav')+
'" autostart="false" autoplay="false" width="1" '+
'height="1" id="sound2" enablejavascript="true">');
window.onload = function() {
var i = typeof document.images != 'object'? document.images[0] :
document.getElementsByTagName?
document.getElementsByTagName('IMG')[0] :
alert('error images collection');
i.onmouseover = function() { playIt('sound2') };
i.onmouseout = function() { stopIt('sound2'); };
i.style.cursor = 'pointer';
}
</script>

</head>
<body>
<p><img src="sam.jpg" alt="">
 
T

totalstranger

Le 4/24/09 6:25 AM, totalstranger a écrit :
Take a look at this page
http://www.phon.ucl.ac.uk/home/mark/audio/play.htm
Click to expand...

Almost all of that there is not working with my Fx.
(Mac 10.4.11 + QT + Fx.3)
- the embed must be sized to 1px side

That bellow works with my browsers
except Opera that doesn't stop sound :

<script type="text/javascript">
function getObj(obj) { return document.getElementById(obj); }
function playIt(objId) {
var son = getObj(objId);
if(typeof son.Play == 'undefined')
return soundOp('success.wav',objId);
son.Play();
}
function stopIt(objId) {
var son = getObj(objId);
if(typeof son.Stop == 'undefined') return soundOp('',objId);
son.Stop(); // that pause with my QT plugin
if(son.Rewind) son.Rewind(); // so we rewind the sound
}
function soundOp(soundFile, soundId) {
var t = getObj(soundId),
s = t.cloneNode(true);
s.src = soundFile;
document.body.replaceChild(s,t);
s=null;
return false;
}
document.write('<embed src="'+
(navigator.appName=='Opera'? '':'success.wav')+
'" autostart="false" autoplay="false" width="1" '+
'height="1" id="sound2" enablejavascript="true">');
window.onload = function() {
var i = typeof document.images != 'object'? document.images[0] :
document.getElementsByTagName?
document.getElementsByTagName('IMG')[0] :
alert('error images collection');
i.onmouseover = function() { playIt('sound2') };
i.onmouseout = function() { stopIt('sound2'); };
i.style.cursor = 'pointer';
}
</script>

</head>
<body>
<p><img src="sam.jpg" alt="">
Click to expand...

Recently I added php generated audio wav files to speak the Captcha used
on my email contact forms. I use two to four character captchas, just
enough to slow people down and wanted the player to remain hidden. I
personally tested this code on Windows Vista with IE8(both modes),
XP/SP3 IE7, XP/SP3 IE6, Firefox, Safari, Opera and Chrome. Friends
tested in on the Mac with Firefox and Safari. I found the javascript on
a now non-functional page, then tailored it to my needs. Some non
javascript elements are included with the code so it all makes sense.

<style type="text/css">
embed {width:0px; height:0px;} /*Force IE6 and IE7 to hide audio control*/
</style>

<input type='button' name='Audio_Button' value='Listen'
onclick='playaudio()' />

<div id="player_container"></div>

<script type="text/javascript">
var player;
function playaudio(){
if (player) {
player.parentNode.removeChild(player);
}
player = document.createElement("embed");
player.setAttribute("src", "./tmpaudio/your.wav");
player.setAttribute("type", "audio/x-wav");
player.setAttribute("width", 0);
player.setAttribute("height", 0);
player.setAttribute("autostart", true);
document.getElementById("player_container").appendChild(player);
}
</script>
 
B

Ben Crowell

Cool! I messed around for a long time trying to do this in JS, and I
never got it to work. Do you mind if I use your code in my own (GPL'd)
projects?
 
T

totalstranger

Cool! I messed around for a long time trying to do this in JS, and I
never got it to work. Do you mind if I use your code in my own (GPL'd)
projects?
Click to expand...

I was mistaken about where I found the code. It is part of this page
http://sk89q.therisenrealm.com/playground/jswav/
Like you I tried many varied incarnations of javascript and HTML
attempting to get this to work.

The author does not have it working with IE(any version) because IE does
not support sending the wav or in my experience any file as a data URI.
http://en.wikipedia.org/wiki/Data_URI_scheme
My wav files are about 50k-90k and all browsers failed to render them as
a URI, so I write them as a file when generating the Captcha image.
Because I use files for my source it works with IE. However a bit of CSS
is needed should you want to suppress showing the player with IE7 and
IE6. I also bumped into caching issues especially with IE, if I did not
change the name of the file each time it was written. In other words the
old file would play after a new file was generated.

I suggest contacting the code's author for permission. However a view
source brings up this statement:

#######################################
#
# Written by sk89q <http://sk89q.therisenrealm.com>
# Copyright 2008 sk89q. All rights reserved.
#
# Redistribution and use in source and binary forms, with or without
# modification, are permitted provided that the following conditions
# are met:
#
# 1. Redistributions of source code must retain the above
# copyright notice, this list of conditions and the following
# disclaimer.
# 2. Redistributions in binary form must reproduce the above
# copyright notice, this list of conditions and the following
# disclaimer in the documentation and/or other materials provided
# with the distribution.
#
# THIS SOFTWARE IS PROVIDED BY SK89Q "AS IS" AND ANY EXPRESS
# OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
# WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE
# ARE DISCLAIMED. IN NO EVENT SHALL SK89Q BE LIABLE FOR ANY DIRECT,
# INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
# (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR
# SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION)
# HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT,
# STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
# ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF
# ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
#
#######################################
 
B

Ben Crowell

Thanks for the info!

By this point, I've played around with it and morphed it enough that
I don't think there's any remaining resemblance to the original code.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Problem playing an embedded sound 1
Playing an audio file using Javascript 2
Help with code 0
How to Play a series of .mid files as background 2
Needing Help With My First JavaScript script 1
How to play a sound in Firefox? 16
Adaptation 0
Do you hear something in Netscape, Opera, Mozilla ? 5

Members online

Total: 52 (members: 1, guests: 51)
Robots: 491

Forum statistics

Threads
473,994
Messages
2,570,222
Members
46,810
Latest member
Kassie0918

Latest Threads

Top