Advancements in HTML5 audio enable you to add sound to increase engagement with your audience and convey an audible level of meaning with your story. The introduction of the audio element in HTML5 offers basic streaming playback in browsers, leveraging HTML5 standards to add sound to your visual designs without requiring proprietary technologies.
In this article, I examine the HTML5 audio element and show you how to control playback. I also share some best practices and considerations when working with audio in compositions you create with Edge Animate CC.
Support for audio on the web has been rather unsophisticated until recently. Web developers had to leverage plug-ins, such as Adobe Flash Player and Apple QuickTime, to play audio online while being confined by the playback controls built into those tools. HTML5 audio provides a standard that did not previously exist, which enables web developers to embed sound that is supported by modern browsers directly in their web pages.
The HTML5 audio element includes attributes that you can set to display sound controls, autoplay, and preload audio source files. The browser provides a default audio player, or you can create your own by adding audio events to HTML elements. This offers incredible flexibility in your projects, making it possible to customize the audio playback experience to match the design of a project.
The syntax used for the HTML5 audio element is:
<audio controls> <source src="/media/soundtrack.mp3" type="audio/mp3"> <source src="/media/soundtrack.ogg" type="audio/ogg"> <source src="/media/soundtrack.wav" type="audio/wav"> </audio>
In this example, the
controls attribute in the
<audio> tag displays the standard HTML5 controls for the audio on a web page. Multiple source files are provided to target a range of modern browsers. If a browser does not support playback of the first file type listed, it attempts to play the next provided source file.
The HTML5 specification includes many helpful attributes you can apply to the audio element to control it programmatically. Edge Animate CC takes advantage of open standards and uses the native HTML5 audio APIs, which means you can use any audio attribute available to browsers while developing your projects in the Edge Animate CC workspace.
The most common audio attributes are:
muted="false"so the audio plays.
(Visit W3Schools for a complete list of attributes for the audio tag.)
The following examples illustrate how to apply audio attributes.
Some browsers may begin playing the sound file immediately when the page first loads, even without adding the
autoplay attribute. In these cases, you can set the
autoplay attribute to "
false", enabling visitors to click the Play button to initiate playback:
<audio autoplay="false"> <source src="soundtrack.mp3" type="audio/mp3"> <source src="soundtrack.ogg" type="audio/ogg"> <source src="soundtrack.wav" type="audio/wav"> </audio>
loop attribute enables you to set the audio to play automatically and repeatedly:
<audio controls loop autoplay> <source src="soundtrack.mp3" type="audio/mp3"> <source src="soundtrack.ogg" type="audio/ogg"> <source src="soundtrack.wav" type="audio/wav"> </audio>
preload attribute of the audio element to buffer large audio files into the browser cache. It accepts three values:
Use the following syntax to preload the sound source files when a page loads:
<audio preload="auto"> <source src="soundtrack.mp3" type="audio/mp3"> <source src="soundtrack.ogg" type="audio/ogg"> <source src="soundtrack.wav" type="audio/wav"> </audio>
While stopping the playback of media is as easy as calling the element's
pause() method, some browsers will continue downloading the audio file in the background until you remove the media element programmatically.
var audioElement = document.getElementById("audioElementID"); audioElement.pause(); audioElement.src=''; //or audioElement.removeAttribute("src");
Depending on the browser, you can either remove the media element's
The following code example offers one strategy for controlling play/pause and increasing or decreasing the volume in a custom audio player:
<audio id="soundtrack" src="soundtrack.mp3"></audio> <div> <button onclick="document.getElementById('soundtrack').play()">Play the Audio</button> <button onclick="document.getElementById('soundtrack').pause()">Pause the Audio</button> <button onclick="document.getElementById('soundtrack').volume+=0.1">Increase Volume</button> <button onclick="document.getElementById('soundtrack').volume-=0.1">Decrease Volume</button> </div>
All major modern browsers support HTML5 audio, but standard specifications for the audio element are still in flux. At this time, any recent browser based on WebKit, such as Google Chrome and Apple Safari, support the playback of MP3 files. Mozilla Firefox (version 22 or later) supports MP3 files, while older versions of Firefox support the Ogg format using the Vorbis audio codec.
If you include both MP3 and Ogg versions of your audio file, you'll be covered in terms of browser support.
To learn more about current browser support for the HTML5 audio element, visit the HTML5 audio page on the W3Schools website.
Since different browsers support different audio file types, it is a best practice to create several versions of the audio source file and link to several sources in the code to ensure that the target browsers can play one of them. Edge Animate CC does not include audio conversion capabilities, but you can use many other tools to output the source files prior to developing an Adobe Edge Animate project.
Use Adobe Audition, Adobe Media Encoder CC, an online audio converter like media.io, or your preferred audio encoding software to convert a master audio file to other audio formats. Save the exported files in your project folder and then follow the steps in the next section to add audio to a project in Edge Animate CC.
The workspace in Edge Animate CC has been updated to include native HTML5 audio functionality. If you are a Creative Cloud member, be sure to download the latest version of Edge Animate CC to work with audio in your compositions. You can now drag and drop audio files to add them to projects. Manage your imported sound files by organizing the elements in the Elements panel.
Use these new features to incorporate sound in your animations:
Browsers and devices play the audio element directly, so the audio capabilities differ by platform. You may encounter issues on one browser that do not affect other browsers, so be sure to schedule time for testing and troubleshooting during the development phase.
If the audio content is displayed as an "X" on the screen, check that the audio files exist online. Also verify that the permissions of the uploaded project folder are set to 755, ensuring that you have full editing privileges, while visitors can only read and execute.
If the audio doesn't play using a relative path, try using the full URL for the audio file. For example, instead of listing the audio filename, enter the absolute path to the uploaded file:
It may be necessary to add MIME types in order to add audio file types to the site's .htaccess file. See the article entitled Configuring MIME types in .htaccess on the Joyent Documentation Center to find out more.
Always test your project across all targeted browsers to confirm that it plays successfully.
Note: The order of source tags or parameters in audio tags may cause playback to fail. Check the syntax on the <audio> element page on the Mozilla Developer Network for more details. Also see the HTML5 audio page on the W3Schools website.
Developing animation projects with audio for mobile distribution can be challenging due to the technical constraints of mobile browsers. Mobile devices may limit the maximum size of audio content, and mobile browsers may not support all audio features. If sounds aren't playing as expected, be sure to check online to see if your code and file types are supported.
autoplay attributes are disabled for all iOS devices, including iPad and iPhone. Autoplay is also not supported on Android devices.
Due to the fees associated with downloading data on smartphones, sounds won't load or play without user initiation. You can create a Play button to enable visitors to begin playback, but an
onLoad="play()" event doesn't work in iOS.