by Joseph T. Sinclair
With the advent of HTML5, multimedia is finally easy and straightforward. This post will cover the insertion of an audio bite into a webpage. It’s really quite simple, and all it takes is the URL of an audio file. The audio file can be anywhere on the Web, but most likely you will store it in the same place (same folder) as your webpages.
The audio file can be in any one of several formats depending on the browser to be used. Nonetheless, MP3 (.mp3) seems to be the most universal format, and you should use that unless you have a specific reason to do otherwise.
The basic markup is <audio> </audio>. You can include text (or code) between the markups, such as <audio><p>Your browser doesn’t play MP3 audio.</p></audio>. The text will display if the user’s browser doesn’t play MP3 audio files. Or you can include code that calls up another audio player.
Note that the audio markup requires one of the following three attributes in order to play: autoplay, controls, or loop. It also requires the src attribute.
Without any further action on your part other than using the audio markup and a requisite attribute, the webpage will enable the audio file to play (stream).
What are the attributes of the audio markup? Well, there are five popular attributes. Let’s take them one by one.
This attribute starts the audio playing each time the webpage is loaded into a user’s browser. In other words, the user has no control over the audio. It looks like this: <audio src=”http://mywebsite.com/beethoven9.mp3” autoplay> </audio>.
Using the controls attribute is the best practice, because audio that a user cannot control can be very frustrating. The user must initiate the play using the on-page control device.
This attribute starts the audio again as soon as it finishes. It plays in a perpetual loop. It looks like this: <audio src=”http://mywebsite.com/beethoven9.mp3” loop> </audio>.
This attribute loads the audio file before a user initiates playing the audio file. Thus, the audio file is more likely to paly immediately upon initiation. It looks like this: <audio src=”http://mywebsite.com/beethoven9.mp3” controls preload> </audio>.
This is simply the URL (location) of the audio file. It looks like this: <audio src=”http://mywebsite.com/beethoven9.mp3” controls> </audio>. The src is a required attribute.
As you can see, each of the attributes creates a certain function that you may find useful, or not. Keep in mind that anytime you put the audio function out of the control of a user, such a person can get frustrated. For instance, if the autoplay starts playing automatically every time the webpage is accessed, that can become annoying, as a user surfs from one webpage to another and back. An endless loop can also become annoying. Thus, you need to be careful as to what exactly what you do in regard to embedding audio in a webpage. Again, using the controls attribute is the best practice unless you have a specific reason to do otherwise.
The idea of an audio “bite” implies a short period of audio. Nonetheless, the audio presentation can be as long as you want to be. The audio will stream into a webpage without any special programming on your part. HTML5 takes care of it.
If you have heavy traffic with a lot of people accessing your audio at the same time, you have a special problem that most Web publishers don’t have. Your Internet provider’s software and server capability may not be able to handle the heavy traffic. In such a case, you need to put your audio file with an Internet provider that specializes in streaming media. That will be your assurance that the audio is delivered to your webpage (i.e., to users) without problems or delays.
How do you use audio in a webpage? That’s only limited by your imagination. The audio function of HTML5 is not designed for any specific use. You can use it for very short sound effects or stream Beethoven’s entire Ninth Symphony (some Internet provider’s may have limitations). You can use it for voice, music, background sounds, sound effects, audio tests, or whatever your audio need happens to be.
The quality of the sound is limited by the MP3 specifications, user’s browser, operating system, sound system inside the user’s computer, speakers, and headset. Those are programs and devices over which you have no control. You do have control, however, when you make or acquire the recording. It should be of high quality and take full advantage of the MP3 specifications.
Keep in mind that many authoring systems are based upon HTML5. In such systems you can use the audio markup to embed audio or otherwise use a function of the authoring system that works just as easily. For instance, many app authoring systems are based on HTML enabling you to embed audio in an app just by using the HTML5 audio markup. In WordPress it is quite easy to embed an audio bite, such as the one near the top of the page in this blog post. Thus, the door is open for you to include sound in your webpages, in all authoring systems based upon HTML5 (such as for ebooks and book apps), and even in WordPress.
Why stick to text? Figure out ways that audio can enhance your text in ebooks, book apps, and other digital presentations. Then use it. Enhance your text. HTML5 makes it easy.
The author of this article, Joseph T. Sinclair, is the author of twenty How2 books published by national publishers.
For low-cost non-exclusive reprints rights for this article, contact sales@AuthorsAndPublishersDigitalReview.
©2016 Joseph T. Sinclair. All rights reserved.