Kindle Fire HD使用HTML5音频标签播放Ogg和MP3

时间:2012-12-25 17:51:18

标签: html5 audio kindle

使用新的HTML音频标签:

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

这在我尝试过的所有浏览器中都能正常运行(IE v10,Chrome v23,Opera v12和Firefox v17)。然而,当我在Kindle Fire HD中查看相同页面时,两个音频文件(ogg和mp3)一个接一个地播放(这让我很生气)。这不应该发生。有人有任何答案和/或建议吗?谢谢!节日快乐....

2 个答案:

答案 0 :(得分:0)

这听起来像是Kindle Fire浏览器中的一个错误。如果可以播放第一个源文件,则应忽略第二个源文件。

可能值得更改源元素的顺序(即将MP3放在第一位)。我怀疑它会有所作为,但以防万一 - 可能是一些奇怪的浏览器怪癖。

另一种可能性是浏览器的自动播放实现的错误。您是否尝试删除autoplay属性?如果这是问题,那么您可以尝试在页面加载时使用JavaScript的play()方法。

更可靠的解决方案是使用JavaScript来检测编解码器支持。这样的事情应该有效:

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();
}

更新: Example of this in action

答案 1 :(得分:0)

我在FireHD7中尝试过以下HTML,它运行正常 - 只播放一个音频标签。 如果您仍然遇到问题,您使用的是什么版本的Silk浏览器,是否在HD7或HD8.9设备上?

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