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

【问题标题】：Kindle Fire HD Playing Both Ogg and MP3 using HTML5 Audio TagKindle Fire HD 使用 HTML5 音频标签播放 Ogg 和 MP3
【发布时间】：2012-12-25 17:51:18
【问题描述】：

使用新的 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）都会播放——一个接一个（这让我发疯）。这不应该发生。有人有任何答案和/或建议吗？谢谢！节日快乐....

【问题讨论】：

标签： html audio kindle

【解决方案1】：

这听起来像是 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

【讨论】：

感谢您的回复。我试过切换源顺序——产生了相同的结果。我需要这个特定项目的自动播放。我将尝试使用您的 JavaScript 音频类型检查，但直接的 HTML5 音频标签将是首选方法 - 它在大多数标准、支持 HTML5 的浏览器中都可以正常工作。
抱歉，我无法让您的代码正常工作。但是，以下链接中的代码在大多数标准的、支持 HTML5 的浏览器中都能完美运行，但在 Kindle Fire HD 中却完全不能运行...... SoundLink 在脚本正文中使用：
奇怪。我已在我的答案中添加了指向此代码的工作示例的链接。它适用于桌面上的 Opera、Firefox 和 Chrome，以及 Opera Mobile、Mobile Firefox 和默认的 Android 浏览器 (2.3)。如果一切都失败了，我唯一能提供的就是 SoundManager 2：schillmania.com/projects/soundmanager2 Scott Schiller 投入了大量的工作来让音频在不同的浏览器和设备上可靠地播放。对于您的需求，这可能有点过头了，但它可能是唯一的选择。

【解决方案2】：

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

【讨论】：