音频未加载到 HTML 音频标签中
Posted
技术标签:
【中文标题】音频未加载到 HTML 音频标签中【英文标题】：Audio not loading in HTML's audio tag 【发布时间】：2011-05-17 22:09:50 【问题描述】：我正在测试音频 html 标记。
它正在我的测试环境中工作，但由于某种原因不在我的生产环境中。
我只是使用：<audio src="/sandbox/test.mp3" controls="controls"></audio>。
测试站点在 Windows 上，生产站点在 Linux 上，但我认为这应该会有所不同。
我可以下载曲目，这样我就知道它在正确的位置。
制作网址为：http://pieterhordijk.com/sandbox
如前所述，完全相同的代码可在测试站点上运行。
有人知道为什么它不加载我的音频吗？
PS
我正在测试：
Chrome 11.0.696.68
编辑
现在我使用的是 Chrome 13（Canary 版本）并加载了 MP3。
但是 WAV 只加载第一秒。
【问题讨论】：
另一方面，您应该确保您的 vorbis 音频文件具有 .oga 扩展名并作为 audio/ogg 提供。 @Shadow：嗯。好的。不知道那个。我可以重命名文件还是完全不同的格式？ 您只需重命名文件。不过，我确实注意到您的 ogg 文件存在另一个问题。它们不包含 vorbis 音轨，而是包含 flac。您的 wav 文件应使用 rarewares.org/ogg-oggenc.php 编码为 oga 文件 @Shadow。谢谢你的帮助队友。我已经在线转换了它@@oggconvert.com。如果你说格式错误，我会下载一个编码器自己做。 【参考方案1】：http://pieterhordijk.com/sandbox/test.mp3 用作音频/mpeg，这很好。但是，当我使用 Opera 下载它时，由于某种原因它已损坏，我无法将其添加到 Foobar 的播放列表或任何其他内容中。但是，它确实可以使用 wget 很好地下载，因此这可能只是 Opera 的问题或服务器提供给 Opera 的一些时髦的东西。无论如何，使用 加载 mp3 在 Opera 中是行不通的，因为 Opera 不支持这种格式。
http://pieterhordijk.com/sandbox/test.ogg 用作音频/ogg，这很好。而且，它现在还包含 vorbis 而不是 flac（因为您已修复它）。它不会在 Opera 中远程播放，但如果我下载文件并在本地在 Opera 中打开它，它就可以正常播放。它也可以在 Foobar 中播放。
http://pieterhordijk.com/sandbox/test.oga 使用了错误的 mime 类型。它作为文本/纯文本提供，但应该作为音频/ogg 提供（您可以在 .htaccess 中修复此问题）。但是，它确实包含 vorbis 并且可以与 Foobar 一起播放。同样，这个不会在 Opera 中远程播放。但是，如果我下载它并在本地在 Opera 中打开它，它就没有问题。
http://pieterhordijk.com/sandbox/test.wav 用作音频/x-wav，这很好。但是，wav 文件不能用于流式传输，因为它的大小为 30.9MB，除非完全获取，否则播放可能会很糟糕。这个至少可以在 Opera 中远程播放。
但是，在我的网站上一切正常。见http://shadow2531.com/opera/testcases/plugins/temp/peehaa/test_audio_vorbis.html。您的 oga 文件在 Opera 中播放没有问题，对于不支持 Vorbis 的 UA，它应该回退到 mp3。
话虽如此，这似乎与您的服务器提供文件的方式有关。我注意到的唯一区别是您的服务器正在发送 Vary: Accept-Encoding 标头。但是，不知道是不是这个原因。
现在，正如您从我的测试页面中看到的那样，它正在使用：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<p>
<audio controls >
<source src="test.oga" type='audio/ogg; codecs="vorbis"'>
<source src="test.mp3" type="audio/mpeg">
<a href="test.oga">test.oga</a>
<a href="test.mp3">test.mp3</a>
</audio>
</p>
</body>
</html>
这就是您可以退回到其他类型的方法。请参阅http://www.whatwg.org/specs/web-apps/current-work/multipage/the-iframe-element.html#the-source-element 了解更多信息。如果 mp3 和 vorbis 不够用，您可以在 mp4/m4a 容器中添加 aac 音频作为另一个后备。
【讨论】：
这是一个 MP3。我已经在多台机器（所有 Windows）上下载并测试了。它确实可以在我的本地开发机器上加载，但它不会在我的实时机器上。 您能否将有关 oggenc 和 audio/ogg 的 cmets 添加到您的答案中？ @PeeHaa。稍后会在这里做。 @PeeHaa。你去吧。希望对一些人有所帮助。 哇，感谢您的广泛测试！我知道后退。我只是将它分开，以便能够轻松查看实际发生的情况以用于测试目的。特别感谢您 (pieterhordijk.com/sandbox/html5-audio-api)！ :)【参考方案2】：我有一个类似的问题，由于某种原因它不会加载本地 MP3 文件，我的解决方案是使用 OGG 文件并且一切正常。我的本地开发系统是 Linux/apache2，我使用 Firefox 8 和 Chrome 15 进行了测试。音频标签确实适用于远程 MP3 和 OGG 文件，但我不知道为什么它们不能在本地工作，OGG 再次在本地工作。
【讨论】：
以上是关于音频未加载到 HTML 音频标签中的主要内容，如果未能解决你的问题，请参考以下文章