Play Sound in HTML 5

Hello,

Please look at this.

https://englishbenchmarks.com/html5_sound_test.htm

This was the simplest POSSIBLE test I could think of.

It doesn't work.

Why?
Richard KortsAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Kiran SonawaneProject LeadCommented:
Try like this- Change code on click event of button

onclick="document.getElementById("sound1").play()"
0
Kiran SonawaneProject LeadCommented:
Place single quote

onclick="document.getElementById('sound1').play();"
0
Richard KortsAuthor Commented:
To sonawanekiran

That eliminates the error, but no sound plays.

Thanks.
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

Kiran SonawaneProject LeadCommented:
Here is complete code. Tested

<!DOCTYPE html>

<html>
<head>
<title>HTML 5 Audio test</title>
</head>
<body>
<audio src="audio/soundcheck_demo.mp3" preload="auto" autobuffer id="sound1"></audio>
<input type="button" value="Sound Check" name="go1" onClick="document.getElementById('sound1').play();">

</body>
</html>

Open in new window

0
Richard KortsAuthor Commented:
To sonawanekiran

I fixed the quotes problem.

No sound plays.
0
Richard KortsAuthor Commented:
To sonawanekiran

VERY strange.

I copied your code exactly.

Here are the results by browser:

FireFox Vers 11.o - No sound plays
IE Vers 8 - gets the attached error
Google Chrome - works perfectly

Crazy!!

I HAVE to make it work in IE & FireFox
html5-sound-IE.jpg
0
Richard KortsAuthor Commented:
One more comment.

My WHOLE reason for doing this is that I want to get an iPad version working.

This last version DOES work on the iPad; so, I can programatically (using php) use either the current version (you have not seen that) which works in IE & FireFox or this version on the iPad.

Of course it would be nicer is ONE version worked on all 4 browsers.
0
COBOLdinosaurCommented:
To work cross browser it requires more than one format for the audio file.  It will not work for older
browser that do not support HTML5 tags.  That means it will work in IE9 but probably nothing earlier:
<audio preload="auto" autobuffer id="sound1"></audio>
  <source src="song.ogg" type="audio/ogg" />
  <source src="song.mp3" type="audio/mp3" />
  Your browser does not support the audio tag.
</audio>

Open in new window


You can get a free mp3/ogg converter here:
http://download.cnet.com/Free-MP3-WMA-OGG-Converter/3000-2140_4-10793572.html


Cd&
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Richard KortsAuthor Commented:
COBOLdinosaur

I'm sort of shocked that FireFox does not support HTML 5.

I have the VERY latest version of FireFox (Version 11.0).
0
Richard KortsAuthor Commented:
To COBOLdinosaur

Never mind, I found the answer, I need the ogg format.
0
Richard KortsAuthor Commented:
Amazing that it requires IE 9, does NOT work in IE 8.

It now works PERFECT in FireFox (with an ogg version of the sound file).

Thanks
0
COBOLdinosaurCommented:
IE8 only supports about 10% of HTML5... IE9 is up to around 45%... FF and Chrome are over 90%.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
HTML

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.