A Smarter Way To Learn HTML & CSS(2015)

82
Audio

It’s far easier to host your own audio files than your own video files, because the compatibility issues are tamer. If you use Audacity or another audio editor to save your file in just two formats, mp3 and Ogg Vorbis, your audio will play in any modern browser, using HTML5. This is the code.

<audio controls>
<source src="whatever.ogg">
<source src="whatever.mp3">
</audio>

If a particular browser can’t handle the Ogg Vorbis file, it’ll play the mp3 file.

The audio tag shown above includes the optional controls. This tells the browser to make the player visible and allow the user to control it.

<audio controls>
<source src="whatever.ogg">
<source src="whatever.mp3">
</audio>

An alternative is to have the audio autoplay, with or without controls. The following code starts the audio automatically, without a visible player.

<audio autoplay>
<source src="whatever.ogg">
<source src="whatever.mp3">
</audio>

The following code starts the audio automatically and displays controls.

<audio controls autoplay>
<source src="whatever.ogg">
<source src="whatever.mp3">
</audio>

Be careful with autoplay. In most situations, users find it annoying.

You can add a paragraph inside the audio tags that displays if the user has an antique browser that doesn’t handle HTML5.

<audio controls>
<source src="whatever.ogg">
<source src="whatever.mp3">
<p>This browser doesn't support our audio format.</p>
</audio>

In your HTML file, insert a <br> at the bottom, then embed the audio files http://www.asmarterwaytolearn.com/boing.ogg and http://www.asmarterwaytolearn.com/boing.mp3. Save the file. Display the page. Play the audio.

Sample HTML code is at:
http://asmarterwaytolearn.com/htmlcss/practice-82-1.html.

Find the interactive coding exercises for this chapter at:
http://www.ASmarterWayToLearn.com/htmlcss/82.html