Geek Answers Handbook

How to enable audio on a website using HTML5?

I was asked to create a microsite for a client, and they want it to be a presentation style website that will include audio narration.

They asked for this to be done in HTML5, but I haven't created anything in HTML5 yet. They also want it to reach a wide audience, and is HTML5 applicable, what are the minimum browser requirements?

Besides Flash, there is a way to create scoring for pages ... maybe jQuery or something else?

Will there be options

  • HTML5 limited browser support.
  • Flash-based website that cannot be viewed on iPad / phone.
  • No storytelling!
+3
source share
2 answers

Anytime you work with HTML5, you should consider ways to ensure backward compatibility.

To determine the minimum browser requirements, go to: http://en.wikipedia.org/wiki/Comparison_of_layout_engines_(HTML5 )

Using HTML5 Audio: http://www.w3schools.com/html5/html5_audio.asp

For HTML5 Audio, you will need at least two copies of the audio file for each browser: I would say one in mp3 format, the other in Ogg Vorbis.

You can use a simple JavaScript browser to define the browser and serve the content accordingly: http://javascript.about.com/library/blbrsdet.htm

As a general rule, it would be best practice to identify support and then return to order:

  • If they support HTML5, use <audio>
  • If they do not support HTML5, check Flash support. If everything is ok, make a flash sound.
  • If not, display a block of text with narrative content.

Essentially, always service the latest and greatest, but support the technologies that got you there first.

+4
source

This code should be very compatible (IE6 +) using WAVE:

 <![if (!IE)|(gte IE 9)]> <audio id="speak" src="speak_a.wav" type="audio/wav"></audio> <a href="#" onclick="document.getElementById('speak').play()">Speak</a> <![endif]> <!--[if lt IE 9]> <bgsound id="speak" name="speak" autostart="false" loop="1"> <a href="#" onclick="document.all['speak'].src='speak_a.wav'">Speak</a> <![endif]-->

Another option using both mp3 / ogg and still very compatible:

 <![if (!IE)|(gte IE 9)]> <audio id="speak"> <source src="speak_a.ogg" type="audio/ogg" /> <source src="speak_a.mp3" type="audio/mpeg" /> <a href="speak_a.mp3">Download speak_a.mp3 if you cannot play it</a> </audio> <a href="#" onclick="document.getElementById('speak').play()">Speak</a> <![endif]> <!--[if lt IE 9]> <bgsound id="speak" name="speak" autostart="false" loop="1"> <a href="#" onclick="document.all['speak'].src='speak_a.mp3'">Speak</a> <![endif]-->

If you do not need to support IE9 before, the <audio> should be enough:

 <audio id="speak"> <source src="speak_a.ogg" type="audio/ogg" /> <source src="speak_a.mp3" type="audio/mpeg" /> </audio> <a href="#" onclick="document.getElementById('speak').play()">Speak</a>

Another old way to play audio:

 <object data="speak_a.wav" type="audio/wav"> <embed src="speak_a.wav"></embed> </object>

And you can also use third-party libraries like audio.js

0
source

More articles:


All Articles