by Joseph T. Sinclair
Remember that HTML5 is the basis for much publication authoring software. I recommend that you learn some HTML, and this article specifically deals with embedding an sound bite into a webpage. If you know how to do it in HTML, you won’t have any trouble figuring out how to do it in an authoring program.
(If you don’t know HTML, read the article An HTML Primer for Authors before reading this article.)
In prior versions of HTML before HTML5, embedding a sound bite in a webpage was often complex for developers. HTML5 has made it quite simple. You simply use the HTML5 audio markup. HTML audio has an opening and closing markup.
<auto > </audio>
Markups can have special attributes which you can choose to use or not to use. The audio markup has several attributes. The following is a review of some of those attributes.
As with any markup that embeds media in a webpage, you have to use an attribute to locate the media. In this case the media is a digital audio file. Unfortunately not all audio file formats work in all browsers. The one that’s common to all major browsers except Opera is an MP3 file, and that’s what you should use for your audio format. If you use another audio format (file), you can’t be sure it will play in every browser.
Use the SRC attribute to specify the audio file to be used. Without the SRC, there is no sound bite to play.
<auto scr=”audiofile.mp3”> </audio>
The next attribute is AUTOPLAY. This starts playing the sound as soon as the webpage is loaded and is seen by the user. No user action required, and the user has no control over the sound.
<auto scr=”audiofile.mp3” autoplay> </audio>
CONTROLS is an attribute that when selected provides a visual player for the sound. If the player does not appear on the webpage, there is nothing to indicate that sound is available (unless you use AUTOPLAY). In addition, the player is the only way that a user can control the sound. The player enables a user to start, stop, change position, and set volume. (The Chrome player is shown.)
<auto scr=”audiofile.mp3” controls> </audio>
If you use the LOOP attribute, it continues to replay the sound bite as long as the user views the page.
<auto scr=”audiofile.mp3” loop> </audio>
The PRELOAD attributes loads the audio bite before the user elects to hear it. This makes the sound start quicker than it would otherwise.
<auto scr=”audiofile.mp3” preload=”auto”> </audio>
You can use the attributes together, and you will want to use the CONTROLS attribute for almost all sound bites. The following sound bite will start by itself and play in a loop, but the user can stop and start it.
<auto scr=”audiofile.mp3” autoplay controls loop> </audio>
Now it’s time for you to try it. The exercise for you follows. Create a webpage and place in it the audio markup using any MP3 file you might have at hand. Make sure the audio file is in the same folder as the HTML webpage file. Here’s what you should see in a text editor. orange
<p>I’m embedding a sound bite in my webpage.</p>
<auto scr=”audiofile.mp3” controls > </audio>
Now save the HTML page and look at it in your browser. It should look like the following:
OK now. You should have a good idea of how simple it is to add a sound bite to a digital publication whether you do it in a webpage, an ebook page, a book app, an interactive PDF, or some other digital publication format. The hard part is not embedding the audio. The hard part is creating the audio (i.e., creating something people want to hear). And I will leave it up to you as to what audio you need and what audio you can either acquire or create.
This webpage was created in WordPress which features its own visual player as follows:
Listen to it.
The author of this article, Joseph T. Sinclair, is the author of twenty How To books published by national publishers.
For low-cost non-exclusive reprints rights for this article, contact sales@AuthorsAndPublishersDigitalReview.
©2014 Joseph T. Sinclair. All rights reserved.