Safari canPlayType() 将 .ogg 标记为 "probably" & HTML5 <audio><source> 不播放

Question

我想为我乐队的网站创建一个 html5 音频播放器。

音频文件在数据库中存储为 mp3、ogg 和 wav 文件以支持所有主流浏览器的当前版本。

首先，一个音频文件的所有音频文件版本都加载到 html:

<audio class="song-preview" preload="none">
    <source type="audio/ogg" src="/preview/trees/trees/OG/DT/OGG"></source>
    <source type="audio/mpeg" src="/preview/trees/trees/OG/DT/MP3"></source>
    <source type="audio/wav" src="/preview/trees/trees/OG/DT/WAV"></source>
</audio>

方法一： Javascript 检查 audio.canPlayType(type) 浏览器支持并删除所有不受支持的 <source> 元素并添加 "probably" 源到 <audio> 的 src 属性。

Example I: （不适用于我的 iphone）.

问题一： 在 <audio> 元素中嵌套 <source> 元素效果不佳。（尽管 Safari 通常播放来自 <audio> 的 src 的给定 mp3，但如果它位于 <source> 的 src 中则不会。 sources 也会阻止移动设备播放音频。）

方法二： Javascript 检查 audio.canPlayType(type) 的浏览器支持，并将第一个 "probably" 支持的 <source> 的 src 添加到 <audio> 的 [=19] =] 属性。之后所有 <source> 元素都被删除。

Example II: （我不是 JS 专家，但 jsbin 似乎没有正确处理 canPlayType()）.

问题二： Safari 将我的 ogg 文件分类为 "probably"，然后不播放它们。

为什么 <source> 个元素的音频没有播放？
关于如何更好地检查音频类型浏览器支持的任何想法？
在 <audio> 元素和 <source> 子元素中具有相同的 src 是否正常工作？

Answer 1

我目前的工作"solution"：

检测桌面上的 safari，如果为真，则删除所有 ogg 源。

var isSafari = /Safari/.test(navigator.userAgent) && /Apple Computer/.test(navigator.vendor);

if (isSafari) {
    $(this).children("source[type!='audio/mpeg']").remove();
}

code above found here

不推荐此解决方案，因为它依赖于发送用户代理，它可以被伪造等

结合以下代码，将probably可播放源文件合并到音频元素的src属性中。这让 Safari 可以正确播放您的 html 音频：

$(this).children("source").each(function(){
    switch ($audio_preview[0].canPlayType($(this).attr("type"))) {
        case "":
            $(this).remove();
            break;
        case "maybe":
            $audio_preview.attr("src", $(this).attr("src"));
            break;
        case "probably":
            $audio_preview.attr("src", $(this).attr("src"));
            $audio_preview.children("source").remove();
            break;
        default:
            $audio_preview.attr("src", $(this).attr("src"));
    }
});

Answer 2

您是否尝试过更改文件扩展名？我看到人们通过保留 minetype .ogg 获得成功，但将音频的扩展名更改为 .oga，视频的扩展名更改为 .ogv。

<audio class="song-preview" preload="none" id="NameOfSong">
    <source type="audio/ogg" src="/preview/trees/trees/OG/DT/OGa"></source>
    <source type="audio/mpeg" src="/preview/trees/trees/OG/DT/MP3"></source>
    <source type="audio/wav" src="/preview/trees/trees/OG/DT/WAV"></source>
</audio>

Safari canPlayType() 将 .ogg 标记为 "probably" & HTML5 <audio><source> 不播放

Safari canPlayType() marks .ogg as "probably" & HTML5 <audio><source> does not play

html

javascript

safari

mobile-safari

html5-audio