CODEWITHSUNDEEP
javascripthtmlhtml5-audio
RedLizard
RedLizard

Reputation: 41

How can I incorporate audio in a website using HTML5?

I have been asked to produce a microsite for a client and they want it to be a presentation style website that will include audio narration.

They asked for it to be done in HTML5, but I haven't produced anything in HTML5 yet. Also they want it to reach a wide audience, so would HTML5 be applicable, what are the minimum browser requirements?

Other than Flash is there a way of producing voiceover for pages... jQuery maybe or anything else?

Would the options be

Upvotes: 3

Views: 381

Answers (2)

Pere
Pere

Reputation: 1973

This code should be highly 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 don't need to support IE9 and earlier, the <audio> tag 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 of playing audio:

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

And you could also use third-party libraries such as audio.js

Upvotes: 0

stslavik
stslavik

Reputation: 3028

Any time you're developing with HTML5, you should consider ways to offer backward compatibility.

To determine minimum browser requirements, please visit here: 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 sound file to hit every browser: I would say one in mp3 format, the other in Ogg Vorbis.

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

Generally, best practice would be to determine support, then fall back in order:

  1. If they support HTML5, use <audio>
  2. If they don't support HTML5, test for flash support. If ok, serve flash audio.
  3. If neither, display a block of text with the content of the narration.

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

Upvotes: 4

Related Questions