当前位置：文江博客话题详情

音频未加载到 HTML 的音频标记中

发布于 2024-11-08 02:00:59 字数 558 浏览 5 评论 0原文

我正在测试音频 HTML 标签。

它正在我的测试环境中运行，但由于某种原因不在我的生产环境中运行。

我只是使用：。

测试站点在 Windows 上，生产站点在 Linux 上，但我认为这应该会有所不同。

我可以下载该曲目，因此我知道它位于正确的位置。

生产网址是： http://pieterhordijk.com/sandbox

正如所述，完全相同的代码在测试站点上运行。

有人知道为什么它不加载我的音频吗？

我正在测试使用：

Chrome 11.0.696.68

编辑

现在我使用 Chrome 13 (Canary Build) 并加载 MP3。

但 WAV 仅加载前一秒。

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

何止钟意 2024-11-15 02:00:59

http://pieterhordijk.com/sandbox/test.mp3 用作音频/mpeg，很好。然而，当我用 Opera 下载它时，由于某种原因它被损坏了，我无法将它添加到 Foobar 的播放列表或其他任何内容中。但是，它确实可以使用 wget 下载，所以这可能只是 Opera 的问题或服务器给 Opera 提供的一些奇怪的东西。使用

http://pieterhordijk.com/sandbox/test.ogg 用作audio/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 用作audio/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 width="300">
                <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 音频作为另一个后备。

http://pieterhordijk.com/sandbox/test.mp3 is served as audio/mpeg, which is good. However, when I download it with Opera, it comes out corrupted for some reason and I cannot add it to Foobar's playlist or anything. But, it does download fine with wget, so that may just be an issue with Opera or something funky the server gives to Opera. Loading the mp3 with <audio> doesn't work in Opera of course anyway since Opera doesn't support that format.

http://pieterhordijk.com/sandbox/test.ogg is served as audio/ogg, which is good. And, it also contains vorbis now instead of flac (since you fixed it). It won't play in Opera remotely, but plays fine if I download the file and open it in Opera locally. It plays in Foobar fine too.

http://pieterhordijk.com/sandbox/test.oga is served with the wrong mime type. It's served as text/plain, but should be served as audio/ogg (you can fix this in .htaccess). But, it does contain vorbis and is playable with Foobar. Again, this one won't play remotely in Opera. But, if I download it and open it in Opera locally, it plays no problem.

http://pieterhordijk.com/sandbox/test.wav is served as audio/x-wav, which is good. But, the wav file isn't acceptable for streaming since it's 30.9MB in size and playback can be horrible unless it's fully been fetched. This one does play in Opera remotely at least.

However, things work fine on my site. See http://shadow2531.com/opera/testcases/plugins/temp/peehaa/test_audio_vorbis.html. Your oga file plays in Opera no problem and it should fall back to the mp3 for UAs that don't support Vorbis.

With that said, it seems like it's something with how your server is serving up the files. The only difference I noticed is that your server is sending a Vary: Accept-Encoding header. But, not sure if that's the cause or not.

Now, as you'll see from my test page, it's using:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <p>
            <audio controls width="300">
                <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>

That's how you can fall back to other types. See http://www.whatwg.org/specs/web-apps/current-work/multipage/the-iframe-element.html#the-source-element for more info. If mp3 and vorbis are not enough, you could add aac audio in an mp4/m4a container as another fallback.

回复收藏 0 原文

颜漓半夏 2024-11-15 02:00:59

我遇到了类似的问题，由于某种原因它无法加载本地 MP3 文件，我的解决方案是使用 OGG 文件并且一切正常。我的本地开发系统是 Linux/apache2，我使用 Firefox 8 和 Chrome 15 进行了测试。音频标签确实可以与远程 MP3 和 OGG 文件一起使用，但我不知道为什么它们不能在本地工作，再次 OGG 在本地工作。

回复收藏 0 原文

~没有更多了~