firefox won't play wav but other browsers do
Firefox won't play the wav files indicated in this page, but other browsers do. Please see the comments in the file for further info.
<html>
<head>
</head>
<body>
<audio id="buttonAudio" src="buttonClick.wav"></audio>
<button onclick="newGame00()">New Game 00</button>
<button onclick="newGame01()">New Game 01</button>
<button onclick="newGame02()">New Game 02</button>
<button onclick="newGame03()">New Game 03</button>
<button onclick="newGame04()">New Game 04</button>
<button onclick="newGame05()">New Game 05</button>
<button onclick="newGame06()">New Game 06</button>
<script>
// W3 Schools (https://www.w3schools.com/html/html5_audio.asp) says Firefox has
// supported HTML5 audio since version 3.5, and Internet Explorer has supported
// it since version 9.0.
// W3 Schools also (https://www.w3schools.com/jsref/met_audio_play.asp) says
// Firefox supports the HTML5 DOM Audio object, and Internet Explorer has done
// so since version 9.0. In fact, this W3 Schools page specifically recommends
// the method I've implemented via the "New Game 06" button.
// Nevertheless:
// I've tried all six of these methods for getting a button click in javascript.
// None of them work in version 61.0.1 (64-bit) of Mozilla Firefox.
// None of them work in version 11.0.9600.19080 of Internet Explorer.
// All six of them work in version 41.16299.371.0 of Edge.
// All six of them work in version 67.0.3396.99 (64-bit) of Google Chrome.
// All six of them work in version 54.0.2952.64 of Opera.
// All six of them work in version 19.0.2.0 (32-bit) of Slimjet.
var buttonClick = new Audio("buttonClick.wav");
var x = document.getElementById('buttonAudio');
function newGame00() {
buttonClick.play();
}
function newGame01() {
buttonAudio.play();
}
function newGame02() {
doit02();
}
function newGame03() {
doit03();
}
function newGame04() {
document.getElementById('buttonAudio').play();
}
function newGame05() {
doit05();
}
function newGame06() {
x.play();
}
async function doit02() {
buttonClick.play();
}
async function doit03() {
buttonAudio.play();
}
async function doit05() {
document.getElementById('buttonAudio').play();
}
// buttonClick.wav is a simple click sound generated by Audacity 2.1.0. I'd be
// suspicious of it, if it weren't for the fact that it works fine in all those
// other browsers. Since yesterday, I've also tried it with buttonClick.mp3 and
// buttonClick.ogg, both with the same results.
// If you wish, you can directly try my code at bds-soft.com/NewSite/clickTest.html .
// Maybe there's something wrong with my code? Please ignore the rest of the
// NewSite - it's ALL still under construction.
// At one of our local library's computers, it worked fine on version
// 41.16299.547.0 of Edge and version 67.0.3396.99 of Chrome; but not on
// version 61.0.1 of Firefox nor on version 11.547.16299.0 of Internet Explorer.
// I found a Firefox suggestion at:
// https://support.mozilla.org/en-US/kb/i-cant-play-audio-remote-desktop-connection
// but it did not solve the problem.
</script>
</body>Modified by cor-el
Chosen solution
There are lots of options (number of channels, sample rate) for creating WAV files and Firefox doesn't support them all, only a small set of commonly used formats is supported. So you can try to use two channels and 48k sampling rate.
Read this answer in context 👍 1All Replies (8)
The only browser that does not support WAV is Internet Explorer. All other browsers (including Firefox) do.
The problem is that the syntax above is not correct. The <audio> needs to enclose a src attribute on the <audio> tag.
This is an example of how it should be structured:
<audio controls>
<source src="file.wav" type="audio/wav">
</audio>
Hope this helps.
Thank you, Wesley -
Unfortunately, that didn't seem to help. Not needing the controls (this is just a button click) I used:
<audio id="buttonAudio">
<source src="buttonClick.wav" type="audio/wav">
</audio>
As before, it worked fine in Edge, Chrome, Opera, and Slimjet; but not in Firefox. Not here at home, and not at the library.
The line was there - it just wouldn't display in this window. Okay, I used the lt and gt mechanism - now it displays above ?!? (grrrr).
Modified by mdavidjohnson
Yeah the controls aren't required, but you are still missing the <audio>.
Here is a fully working piece of code that I have confirmed works without any issues:
<audio id="test">
<source src="http://www.kozco.com/tech/LRMonoPhase4.wav" type="audio/wav">
</audio>
<button onclick="document.getElementById('test').play()">Play Audio</button>
I've verified that this is working properly.
Yes indeed - that does work here for me too.
(Please note my post above - the source tag was there; it just wasn't displaying in that window until I replaced the carets with the lt and gt equivalents. - but it still doesn't play).
I would thus think there's something wrong with my buttonClick.wav file, except that it works fine in the other browsers.
I'll have to try the code with some other wav files as well.
Firefox can't play this specific WAV file with the HTML5 media player. If I open the file in a Firefox tab then I get the open with dialog. This means that this file format isn't supported because otherwise you would get the media player.
Hi cor-el -
I'm not sure what you mean. If I try to open buttonClick.wav directly with Firefox, I do (as you say) get the "open with" dialog.
But, if I try to open Wesley's file (http://www.kozco.com/tech/LRMonoPhase4.wav) directly with Firefox, I also get the "open with" dialog. But his wav file clearly works when contained in the audio tag, while mine does not.
Could you please clarify what you meant a bit more?
And, why would button.wav work perfectly in Edge, Chrome, Opera, and Slimjet; but not in Firefox.
I substituted a different file, CHIMES.WAV, into my test page and it works fine in Firefox, so I feel justified in concluding that there is indeed some sort of a problem with the buttonClick.wav file.
Do you have any thoughts on why this might be so.
Meanwhile, I'll go see if the folks at Audacity have any info on this.
Modified by mdavidjohnson
Chosen Solution
There are lots of options (number of channels, sample rate) for creating WAV files and Firefox doesn't support them all, only a small set of commonly used formats is supported. So you can try to use two channels and 48k sampling rate.
Thank you cor-el.
Audacity had saved the file at 44100. I re-did it at 48000 and now it works.
Of course, it still doesn't work in IE. (sigh).
Modified by mdavidjohnson