Support: 1-800-961-4454
1-800-961-2888

Scaling HTML5 Audio With Rackspace Cloud Files

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:

Background

HTML5

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.

HTML5 marks the latest version of HTML, and it adds new ways to interact with content and share media. In the past, JavaScript and Flash were used to accomplish much of the same goals, but the HTML5 standard brings security, cross-browser compatibility, and ease of implementation to many of these now-common tasks.

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!

HTML5 Audio

In the past, embedding audio such as music or podcasts required using JavaScript or Flash, such as with this open-source MP3 player.

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.

Implementation

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.

In general, providing audio in the MP3 and Ogg Vorbis formats allows it to be played 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.

Embedding


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.
  • Incompatibility: The text between the audio tags is displayed only if the browser does not support HTML5. Here, I display a simple message that the browser is incompatible. To see what it looks like, try using Browser Shots on this page or your website, it can show you how an older website displays HTML5 audio content. It is possible to embed JavaScript between the audio tags as a fall-back player for older browsers.

Conclusion

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/.

About the Author

This is a post written and contributed by Philip Thomas.

Philip Thomas graduates this spring from Washington University in St. Louis, where he majors in Systems Engineering and Physics. He serves as an Associate at Cultivation Capital. In his free time, he performs on the WUSauce salsa dance team, and runs a venture capital lecture series of the Washington University Tech Entrepreneurs.


More
Racker Powered
©2014 Rackspace, US Inc.