HTML5 makes it easy to share podcasts, recordings and more across all modern browsers. Today we will explore embedding a Rackspace Cloud Files-hosted recording using the new HTML5 audio standard, like this:
HyperText Markup Language, or HTML, has served as the basic formatting language of the Internet for over two decades. As the content of the Internet has changed, so too has the language. The World Wide Web Consortium (W3C) controls the standard for HTML, and previous revisions to the language have introduced content such as tables and images to the World Wide Web.
This month, W3C finalized the HTML5 definitions, and in 2014 they expect to adopt them as official web standards. However, web browsers released over the past year, including those on smartphones, have already incorporated HTML5 technology, so there is no need to wait until 2014 to begin utilizing its powerful features!
Rather than using this complicated code, HTML5 allows a simple <audio></audio> tag for embedding audio, similar to an HTML link. These tags link directly to the audio files. However, this means that anybody viewing the source code of the web page may then download sound file, so this is not a protected embedding of sound.
Rackspace Cloud Files / Akamai Advantage
A music or podcast file may easily be larger than the rest of a webpage combined. Thus, ensuring playback is quick and scalable on a normal file server is taxing. Rackspace Cloud Files is optimized to serve content such as podcasts to millions at blazing speeds. The Akamai content delivery network (CDN) technology behind Rackspace Cloud Files also powers many of the top media sites, making it an industry benchmark for speed and stability. And, with Rackspace Cloud Files, anybody can access this sophisticated technology at a low price.
Preparing the Files
While HTML5 audio has been adopted by all major web browsers, one quirk remains – not every web browser can play every type of sound file! As this chart on Wikipedia shows, we have to provide the same audio file in multiple formats to ensure that is plays in all major browsers.
For this demo, I am using these two files:
I found that the easiest way to convert files to .mp3 and .ogg was with the website Media.io.
Uploading to Rackspace Cloud Files
On the Rackspace open cloud interface, first choose an existing container or create a new container to host your content. Upload the .mp3 and .ogg files and publish them in the container. Click the sprocket next to each file, and then select “View All Links.” Copy the HTTP links for the two audio files.
The basic HTML5 audio player above uses this code:
<audio controls> <source src="http://0639ac876cdeb83a534d-95c931daa7c80b903aae4215b472f9f8.r4.cf1.rackcdn.com/RackspaceCloudFiles.mp3" type="audio/mpeg" /> <source src="http://0639ac876cdeb83a534d-95c931daa7c80b903aae4215b472f9f8.r4.cf1.rackcdn.com/RackspaceCloudFiles.ogg" type="audio/ogg" /> <em>Sorry, your browser doesn't support HTML5 audio.</em> </audio>
You may copy the code into your website, replacing the .mp3 and .ogg file links with your own.
Let’s walk through the various parts of the code and explain what they do:
- <audio>: The audio tag initializes the HTML5 audio player. Controls in the opening tag tells the browser to show controls for the audio. In the opening tag, other useful attributes include:
- Autoplay: Begins the audio as soon as the page loads
- Preload: Begins loading the audio file as soon as the page loads, rather than when the play button is clicked. This means that the page loads more slowly, but the file is immediately available when the user is ready to listen to it.
- Loop: Continuously replays the sound file until it is paused.
- <source>: These lines declare different source files and their formats. If there is only one format, a src may be declared in the opening audio tag. However, because no single audio format is compatible across all major browsers, using source tags is the most common way to embed multiple audio formats.
If you have any questions, please post them in the comment section below. Other good HTML5 Audio resources include:
Check back tomorrow when I’ll discuss supercharging HTML5 video with Rackspace Cloud Files.
For more information on high performance media that’s fast, simple and reliable, be sure to check out the new Rackspace Media Hosting on the Cloud website at: http://www.rackspace.com/cloud/media/.