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 Video Library
Refcards
Trend Reports

Events

View Events Video Library

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

How does AI transform chaos engineering from an experiment into a critical capability? Learn how to effectively operationalize the chaos.

Data quality isn't just a technical issue: It impacts an organization's compliance, operational efficiency, and customer satisfaction.

Are you a front-end or full-stack developer frustrated by front-end distractions? Learn to move forward with tooling and clear boundaries.

Developer Experience: Demand to support engineering teams has risen, and there is a shift from traditional DevOps to workflow improvements.

Related

  • Mastering Accessibility in Web Development: A Developer’s Guide
  • How to Merge HTML Documents in Java
  • Exploring Intercooler.js: Simplify AJAX With HTML Attributes
  • Creating Scrolling Text With HTML, CSS, and JavaScript

Trending

  • How to Install and Set Up Jenkins With Docker Compose
  • Memory Leak Due to Uncleared ThreadLocal Variables
  • Java Enterprise Matters: Why It All Comes Back to Jakarta EE
  • Cognitive Architecture: How LLMs Are Changing the Way We Build Software
  1. DZone
  2. Coding
  3. Languages
  4. Audio in HTML 5: state of the art

Audio in HTML 5: state of the art

By 
Giorgio Sironi user avatar
Giorgio Sironi
·
Feb. 27, 12 · Interview
Likes (0)
Comment
Save
Tweet
Share
7.2K 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.

Related

  • Mastering Accessibility in Web Development: A Developer’s Guide
  • How to Merge HTML Documents in Java
  • Exploring Intercooler.js: Simplify AJAX With HTML Attributes
  • Creating Scrolling Text With HTML, CSS, and JavaScript

Partner Resources

×

Comments

The likes didn't load as expected. Please refresh the page and try again.

ABOUT US

  • About DZone
  • Support and feedback
  • Community research
  • Sitemap

ADVERTISE

  • Advertise with DZone

CONTRIBUTE ON DZONE

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

LEGAL

  • Terms of Service
  • Privacy Policy

CONTACT US

  • 3343 Perimeter Hill Drive
  • Suite 100
  • Nashville, TN 37211
  • [email protected]

Let's be friends: