DZone
Thanks for visiting DZone today,
Edit Profile
  • Manage Email Subscriptions
  • How to Post to DZone
  • Article Submission Guidelines
Sign Out View Profile
  • Post an Article
  • Manage My Drafts
Over 2 million developers have joined DZone.
Log In / Join
Refcards Trend Reports Events Over 2 million developers have joined DZone. Join Today! Thanks for visiting DZone today,
Edit Profile Manage Email Subscriptions Moderation Admin Console How to Post to DZone Article Submission Guidelines
View Profile
Sign Out
Refcards
Trend Reports
Events
Zones
Culture and Methodologies Agile Career Development Methodologies Team Management
Data Engineering AI/ML Big Data Data Databases IoT
Software Design and Architecture Cloud Architecture Containers Integration Microservices Performance Security
Coding Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
Partner Zones AWS Cloud
by AWS Developer Relations
Culture and Methodologies
Agile Career Development Methodologies Team Management
Data Engineering
AI/ML Big Data Data Databases IoT
Software Design and Architecture
Cloud Architecture Containers Integration Microservices Performance Security
Coding
Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance
Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
Partner Zones
AWS Cloud
by AWS Developer Relations
  1. DZone
  2. Coding
  3. Languages
  4. Audio in HTML 5: state of the art

Audio in HTML 5: state of the art

Giorgio Sironi user avatar by
Giorgio Sironi
·
Feb. 27, 12 · Interview
Like (0)
Save
Tweet
Share
6.39K Views

Join the DZone community and get the full member experience.

Join For Free
HTML 5 capable browsers support multimedia files as first class citizens - HTML is not a language for describing documents anymore, but more a medium for building applications, which can leverage every bit of built-in functionality to run fast and to not weigh heavily on the shoulders of developers for maintenance.
In this article, we'll see all the ways to play audio inside a modern browser via HTML 5.

The <audio> element

<audio> is a new tag not only able to load a sound file and play it, but also to feature a series of control buttons for playing, pausing and pausing the reproduction. Of course there are many use cases where you won't need controls, like for the background music of a game.

<audio> is not more complex than <img>: you specify a mandatory src attribute, and other options to configure the sound player where needed.

<!DOCTYPE html>
<html>
<head>
    <title>HTML5 Audio</title>
</head>
<body>
    <audio src="doorbell.ogg" controls preload="auto" autobuffer></audio>
    <audio src="doorbell.ogg" controls></audio>
</body>
</html>
The attributes shown in this example (and a few others) are:
  • controls: when present, displays a browser-specific player to control the playback. The HTML 5 specification says that with these controls the user should be able to "begin playback, pause playback, seek to an arbitrary position in the content (if the content supports arbitrary seeking), change the volume" and a bunch of other features that I have not seen supported yet.
  • autoplay: when present, tells the browser to begin playing the sound file as soon as it can.
  • loop: when present, specifies the sound file should start again as soon as it finishes.
  • muted: when present, sets the volume at 0 as a default.
  • preload: specifies a policy for loading the sound file. "none" corresponds to no prefetching, which minimizes traffic; "metadata" prefetches only the start of the file, in order to read metadata like a song's duration. "auto" authorizes the browser to prefetch the whole file.

Audio object

Apparently the combination of HTML 5 and CSS 3 is a Turing complete language: however, it is more practical to code behavior of a web application in JavaScript. That's why eveyrthing you can do with an <audio> element can also be accomplished programmatically with JavaScript Audio objects:
<!DOCTYPE html>
<html>
<head>
    <title>HTML5 Audio</title>
    <script type="text/javascript">
        var doorBell = new Audio("doorbell.ogg");
        doorBell.play();
    </script>
</head>
<body>
</body>
</html>

Thus via JavaScript you can control an audio element by calling a series of methods such as play() and pause(), and adjust properties like *volume*. Audio objects implement an interface named HtmlMediaElement, where you can find the list of all methods, plus modifiable and readonly properties available.

For example, doorBell.seekable.length is a range, while doorBell.currentTime is an assignable property to make reproduction jump to a certain point of the file.

Formats and support

The real problem with HTML 5 Audio right now is its support in different browsers; not the support for <audio> and Audio - which is pretty consistent - but for the codecs to play all the different formats an audio file can come in.

There are mainly two sides in the issue:

  • Firefox, Chrome and Opera being as usual friendly to open source and open formats, and being the first to support Ogg Vorbis. Ogg is an open container for audio and video files, and Vorbis is a free lossy codec like MP3, but without any patent on it.
  • Internet Explorer and Safari supporting MP3 instead.

Let's not even talk about support on mobile browsers, which is close to non-existent with respect to codecs.

By the way, for experimenting with <audio> stick to Chrome, Firefox and Opera. Fortunately, a series of <source> elements can be embedded in an <audio> (or <video>, equivalently) element to provide alternative formats, listed by MIME type:

<source src="audio.ogg" type='audio/ogg; codecs=vorbis'>

Encoding lots of files in different formats just to please browsers can be a pain, but it's viable in the case of small clips and sound effects.

HTML

Opinions expressed by DZone contributors are their own.

Popular on DZone

  • Low-Code Development: The Future of Software Development
  • AWS CodeCommit and GitKraken Basics: Essential Skills for Every Developer
  • Keep Your Application Secrets Secret
  • Accelerating Enterprise Software Delivery Through Automated Release Processes in Scaled Agile Framework (SAFe)

Comments

Partner Resources

X

ABOUT US

  • About DZone
  • Send feedback
  • Careers
  • Sitemap

ADVERTISE

  • Advertise with DZone

CONTRIBUTE ON DZONE

  • Article Submission Guidelines
  • Become a Contributor
  • Visit the Writers' Zone

LEGAL

  • Terms of Service
  • Privacy Policy

CONTACT US

  • 600 Park Offices Drive
  • Suite 300
  • Durham, NC 27709
  • support@dzone.com
  • +1 (919) 678-0300

Let's be friends: