javascript - Safari canPlayType() 将 .ogg 标记为 "probably"& HTML5 不播放

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 上工作)。

问题一:嵌套 <source> <audio> 中的元素元素效果不佳。 (尽管 Safari 通常会播放 <audio> 的 src 中的给定 mp3，但如果它位于 <source> 的 src 中则不会播放。源中有大的 wav 文件会阻止移动设备播放音频，也是。)

方法二:Javascript 检查 audio.canPlayType(type)用于浏览器支持并添加第一个“可能”支持的 <source>的 src到 <audio>的 src属性。之后所有 <source>元素被删除。

Example II: (我不是 JS 专家，但 jsbin 似乎不能正确处理 canPlayType())。

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

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

Answer 1

到目前为止我的工作“解决方案”:

检测桌面上的 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

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

结合下面的代码，将可能可播放的源文件合并到audio元素的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"));
    }
});