Kindle Fire HD Playing Both Ogg and MP3 using HTML5 Audio Tag

Question

Using the new HTML audio tag:

<audio autoplay="autoplay">
<source src="../../audio/andromeda_oars.ogg" type="audio/ogg" />
<source src="../../audio/andromeda_oars.mp3" type="audio/mpeg" />   
Your browser does not support the audio element.
</audio>

This works fine in all browsers I've tried (IE v10, Chrome v23, Opera v12, and Firefox v17). However, when I view the same pages in Kindle Fire HD, both audio files (ogg and mp3) play -- one after the other (which is driving me mad). This is not supposed to happen. Anyone have any answers and/or suggestions? Thanks! Happy Holidays....

tagawa · Answer 1 · 2012-12-27T04:50:40.217

0

This sounds like a bug in the Kindle Fire browser. If the first source file can be played, the second one should be ignored.

It might be worth changing the order of the source elements (i.e. put MP3 first). I doubt it will make a difference but just in case - could be some strange browser quirk.

Another possibility is a bug with the browser's autoplay implementation. Have you tried removing the autoplay attribute? If that's the problem then you could try using JavaScript's play() method on page load instead.

A more reliable solution is to use JavaScript to detect for codec support. Something like this should work:

HTML:

<audio id="myAudio">
Your browser does not support the audio element.
</audio>

JavaScript:

function getAudioType(element) {
    if (element.canPlayType) {
        // CanPlayType returns maybe, probably, or an empty string.
        if (element.canPlayType('audio/ogg; codecs="vorbis"') !== '') {
            return('ogg');
        } else if (element.canPlayType('audio/mpeg;') !== '') {
            return('mp3');
        }
    }
    return false;
}

var audio = document.getElementById('myAudio');
var audiotype = getAudioType(audio);
if (!audiotype) {
    // Some fallback or not-supported message here
} else {
    audio.src = '../../audio/andromeda_oars.' + audiotype;
    audio.play();
}

UPDATE: Example of this in action

edited Dec 27 '12 at 04:50

answered Dec 26 '12 at 08:49

tagawa

4,561
2
27
34

Thanks for the reply. I have tried switching the source order -- which produced the same result. I need the auto-play for this particular project. I will experiment with your JavaScript audio type check, but the straight HTML5 Audio tag would be the preferred method -- and it does work as expected in most standard, HTML5 capable browsers. – Tom Arnone Dec 26 '12 at 15:12
Sorry, I couldn't get your code to work. However, code at the following link works perfectly in most standard, HTML5 capable browsers, but not at all in the Kindle Fire HD.... [SoundLink](http://www.javascriptkit.com/script/script2/soundlink.shtml) Was using in body of script: – Tom Arnone Dec 26 '12 at 16:17
Strange. I've added a link to a working example of this code to my answer. It works for me in Opera, Firefox and Chrome on desktop, and in Opera Mobile, Mobile Firefox and the default Android browser (2.3). If all else fails, the only other thing I can offer is SoundManager 2: http://www.schillmania.com/projects/soundmanager2/ Scott Schiller has put in a huge amount of work to get audio playing reliably across different browsers and devices. It's probably overkill for your needs but it could be the only option. – tagawa Dec 27 '12 at 04:57

score 0 · Answer 2 · answered Jan 14 '13 at 19:39

I have tried the following HTML in the FireHD7 and it works fine - only one of the audio tags plays. If you are still having a problem what version Silk browser are you using and is it on the HD7 or HD8.9 device?

<html lang="">
<head>
<meta http-equiv="content-type" content="text/html; charset=">
<title>Audio Test</title>
</head>
<body>

<audio id=audio0 controls autoplay="true">
<source src='http://www.russianlessons.net/audio/lesson3-20.mp3' type='audio/mpeg'>
<source src='http://www.russianlessons.net/audio/lesson3-20.ogg' type='audio/ogg'>
</audio>

</body>
</html>

Kindle Fire HD Playing Both Ogg and MP3 using HTML5 Audio Tag

2 Answers2