Playing audio files in Firefox

Playing an audio file on a website is a common activity, so it should be easy to set up. It is easy to set up! That said, I spent 3 hours trying to get things right in Firefox when preparing the Accompaniment Machine style demo page. In this article, I’ll go through some of the pitfalls. The simple solution appears at the end. (In the discussion, the string musicfiles/mymusic.mp3 represents the relative location and name of the audio file.)

The easiest approach is to include the audio file in a link:

<a href="musicfiles/mymusic.mp3">Play the file</a>

The drawback is that Firefox displays a new page with a black background and a small controller at the center. The user must press the back button to return to the original page. This is clearly not desirable if you have a page with several audio files to sample.

Time for an Internet search. Unfortunately, browsers move on, but Internet pages never go away. I found a raft of complex, invalid solutions that were the best workarounds in 2010. The historic record demonstrates that in playing audio files, the approach to standardization has been slow and painful. Some points:

  • Any solution that involves EMBED elements no longer works in Firefox.
  • When I was searching for solutions yesterday, I did have some success using the OBJECT element. The problem was that the audio file started automatically each time I loaded the page, no matter what the settings of the object parameters. This morning, Firefox updated and the OBJECT examples I prepared yesterday no longer worked!
  • It is not necessary to link to any special audio players.

The solution is to use the HTML5 AUDIO element. It does not work on older browsers, but with security concerns and auto-updates, who has an older browser? This code works in Chrome and Internet Explorer:

<audio src="musicfiles/mymusic.mp3" controls></audio>

The CONTROLS parameter is necessary to display the on-screen controller (Fig. 1).

Audio controllers

Figure 1. Audio controllers. The width of the Firefox and Chrome controllers was 300 px. The Internet Explorer control with more knobs had a width of 530 px.

The above code worked in Firefox when I tested a page that referenced multiple audio files on my computer. I encountered a problem when I uploaded it to a server. Firefox hung up after loading the first seven files. The solution is use a form of the AUDIO element with additional parameters:

<audio src="musicfiles/mymusic.mp3" controls preload="auto" autobuffer></audio>

To reiterate, the above code is the correct way to play audio files on a web page with an up-to-date browser [1]. I tested it successfully in Firefox with 32 instances on a page. Note that the browser loads all audio files when the page opens, whether they will be played or not. This is not an issue for pages that contain many short audio files like the style demo page. On the other hand, if you are creating a site with the complete symphonies of Hadyn, it would be a good idea to divide the material between several pages.


[1] The Audio element can also be used in a WordPress page.

Comments are closed.