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

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

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

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

首先,一个音频文件的所有音频文件版本都加载到 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",然后不播放它们。

我目前的工作"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"));
    }
});

您是否尝试过更改文件扩展名? 我看到人们通过保留 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>