Wanting to be able to play a series of bird songs on my Acer A100 tablet, I created a simple HTML (local) web page with the name of each bird, a photograph, and a hyperlink to an MP3 file of the bird’s song. While the file worked just fine on my Linux box, with the MP3 file being played by default in the Totem Movie Player – when I uploaded the file to the A100 – and clicked on a link – nothing happened!
Searching the web for information yielded a whole bunch of reports of similar problems but no definitive solutions. However, one thing I came across was a new (to me) “audio” tag used in HTML5 to assign audio codecs to sound files and, optionally, to include a set of controls to play the file and modify the output volume. The use of this tag for MP3 files takes the form:
<source src=”Jamaican_Woodpecker_2_Bowers.mp3″ type=”audio/mpeg”>
Your browser does not support this audio format.
In general, other file formats, such as .ogg, can be included inside the tag and the browser will process the first one it is capable of using. In the event that the browser doesn’t like any of the selections, then the “not supported” message should be displayed.
Setting up a couple of the bird songs in this format as a test, and loading the revised HTML file into Firefox on my Linux box, did indeed produce a control panel; however, this was greyed out and Firefox refused to play the associated MP3 files through the on-screen controls.
More searching on the web identified a couple of issues. One web posting told me that: “Firefox currently doesn’t support MP3 audio so it just flashes once then disappears.” This might well explain why why a simple link to an MP3 file produced no resulting sound in Firefox on the tablet. A second posting indicated that: “…audio [tag] is supported by most modern browsers, but the problem is that different browsers do not support the same file format. Safari can play mp3s, but Firefox can’t and play [sic.] .ogg files instead…” So, Firefox also doesn’t seem to like the controls generated by the audio tag.
It would appear, therefore, that my basic problem on the tablet was trying to use Firefox to play MP3 files. My solution was to load the HTML file into the A100’s default browser (which is inscrutably named “Browser”) instead of Firefox. Now, the audio controls were live, and the MP3 files played successfully.
[Note that this screenshot is actually taken from Internet Explorer running under Windows. The audio controls are slightly different in Android.]
What you can’t see in the above screenshot is that the image itself has an underlying link to the same MP3 file in the following form:
<a href=”Jamaican_Woodpecker_2_Bowers.mp3″><img src=”Jamaican_Woodpecker.jpg” width=188 height=254 border=0 alt=”Jamaican Woodpecker”></a>
It turns out that the audio tag, and its on-screen controls, aren’t needed. Simply clicking on the image produces a dialogue box that asks if the sound file should be played in Google Play Music or any other available media player. Furthermore, selecting Google Play Music, after checking the box marked “Use by default for this action”, eliminates this query on any future occasion that a sound file is played.
So, by using “Browser”, which provides support for MP3 files, my dilemma is solved and I can adopt the much simpler HTML construct of simply linking the bird’s name (and its photograph) to the MP3 sound file containing the appropriate song:
<a href=”Jamaican_Woodpecker_2_Bowers.mp3″>Jamaican Woodpecker</a>
<a href=”Jamaican_Woodpecker_2_Bowers.mp3″><img src=”Jamaican_Woodpecker.jpg” width=188 height=254 border=0 alt=”Jamaican Woodpecker” hspace=20 align=”middle”></a>
Now I can simply click on the link from the bird’s name, or that associated with the image, and play the bird’s song as an MP3 file.
This exercise has provided me with a number of useful insights:
(1) The HTML audio tag, with its on-screen controls, might be useful for some purposes. This information is to be filed away for possible future reference.
(2) It seems to be difficult to take a screenshot of an Android tablet (hence the reliance on the Windows’ screenshot above). From what I read, one has to load a software development kit, and root the tablet, before being able to do something that should be achieved through a simple application.
(3) Image files located through a Google search are frequently subject to copyright and therefore useless for inclusion in a personal project such as that described here. However, in the true spirit of the open-source movement, many images, including bird photographs, are freely available (subject only to restrictions such as attribution) under the Creative Commons’ license. (Special thanks to Ron Knight (sussexbirder) for making his photographs of various Jamaican birds available.)
(4) Similarly, sound files, with the songs of many birds from around the world, are freely available for downloading from Xeno-Canto. (Special thanks to Rick Bowers for making his sound recordings of various Jamaican birds available.)
HTML5 Audio – The State of Play
Fallback HTML5 audio tags for a simple MP3 podcast are harder than you’d think