• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 283
  • Last Modified:

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?
0
Richard Korts
Asked:
Richard Korts
  • 7
  • 3
  • 2
2 Solutions
 
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
What Kind of Coding Program is Right for You?

There are many ways to learn to code these days. From coding bootcamps like Flatiron School to online courses to totally free beginner resources. The best way to learn to code depends on many factors, but the most important one is you. See what course is best for you.

 
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
 
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
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.

Join & Write a Comment

Featured Post

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 7
  • 3
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now