Scaling HTML5 Audio With Rackspace Cloud Files

Filed in Product & Development by Philip Thomas | February 6, 2013 3:30 pm

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)[1] 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[2].

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[3] 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[4], 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[5] and Ogg Vorbis[6] 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[9].

Uploading to Rackspace Cloud Files

On the Rackspace open cloud[10] 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:

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/[14].

Endnotes:
  1. World Wide Web Consortium (W3C): http://www.w3.org/
  2. this open-source MP3 player: http://flash-mp3-player.net/
  3. Rackspace Cloud Files: http://www.rackspace.com/cloud/files/
  4. this chart on Wikipedia shows: http://en.wikipedia.org/wiki/HTML5_Audio#.3CAudio.3E_element
  5. MP3: http://en.wikipedia.org/wiki/MP3
  6. Ogg Vorbis: http://en.wikipedia.org/wiki/Ogg
  7. RackspaceCloudFiles.mp3: http://0639ac876cdeb83a534d-95c931daa7c80b903aae4215b472f9f8.r4.cf1.rackcdn.com/RackspaceCloudFiles.mp3
  8. RackspaceCloudFiles.ogg: http://0639ac876cdeb83a534d-95c931daa7c80b903aae4215b472f9f8.r4.cf1.rackcdn.com/RackspaceCloudFiles.ogg
  9. Media.io: http://media.io/
  10. Rackspace open cloud: https://mycloud.rackspace.com/
  11. Browser Shots: http://browsershots.org
  12. HTML5 Audio (Wikipedia): http://en.wikipedia.org/wiki/HTML5_Audio
  13. JPlayer jQuery HTML5 Audio / Video Library (OpenSource): http://www.jplayer.org/
  14. http://www.rackspace.com/cloud/media/: http://www.rackspace.com/cloud/media/

Source URL: http://www.rackspace.com/blog/scaling-html5-audio-with-rackspace-cloud-files/