html - 音频未加载到 HTML 音频标签中

标签 html audio html5-audio

我正在测试音频 HTML 标签。

它在我的测试环境中工作,但出于某种原因不在我的生产环境中。

我只是使用:<audio src="/sandbox/test.mp3" controls="controls"></audio> .

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

我可以下载轨道,所以我知道它在正确的位置。

生产网址为:http://pieterhordijk.com/sandbox

如前所述,完全相同的代码可在测试站点上运行。

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

附言

我正在测试使用:

Chrome 11.0.696.68

编辑

现在我使用的是 Chrome 13(Canary 版本)并加载了 MP3。

但是 WAV 只加载第一秒。

最佳答案

http://pieterhordijk.com/sandbox/test.mp3用作音频/mpeg,这很好。但是,当我用 Opera 下载它时,由于某种原因它出现损坏,我无法将它添加到 Foobar 的播放列表或任何东西。但是,它确实可以通过 wget 下载,所以这可能只是 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 header 。但是,不确定这是否是原因。

现在,正如您将从我的测试页面中看到的那样,它正在使用:

<!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 音频作为另一个后备方案。

关于html - 音频未加载到 HTML 音频标签中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/6037756/

相关文章:

python - 在Python上存储声音

java - 简短的声音文件在Netbeans中播放,但不在jar中播放

c# - 如何在Xamarin中使用MediaPlayer获得跟踪的持续时间

javascript - 使用 Icecast 移动到后备安装时音频停止播放

javascript - 使用 jQuery 插入带有标签的单选按钮

javascript - 对 HTML 实体代码和原始代码之间的区别感到困惑

ios在页面更改时暂停音频

javascript - HTML5 MP3 的持续时间有时有效

html - 由具有绝对定位的图像定义的 Div 高度?

当仅插入前 2 个和时,Javascript 计算返回 NaN