• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 280
  • 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
The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work 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

Featured Post

[Webinar] Kill tickets & tabs using PowerShell

Are you tired of cycling through the same browser tabs everyday to close the same repetitive tickets? In this webinar JumpCloud will show how you can leverage RESTful APIs to build your own PowerShell modules to kill tickets & tabs using the PowerShell command Invoke-RestMethod.

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