Javascript Safari canPlayType（）将.ogg标记为；大概是"&；HTML5<；音频>&书信电报；来源>；不玩

我想为我乐队的网站创建一个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>

（不适用于我的iphone）

问题一：
在
中嵌套
元素（我不是JS专家，但jsbin似乎无法正确处理canPlayType（）

问题二：
Safari将我的ogg文件分类为
“可能”
，然后不播放它们


为什么
元素的音频不播放
有没有关于如何更好地检查audiotype浏览器支持的想法
在
元素和
子元素中具有相同的src是否正常工作
到目前为止，我的工作“解决方案”：

在桌面上检测safari，如果为真，请删除所有ogg源

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

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


不建议使用此解决方案，因为它依赖于发送用户代理，这可能是伪造的，等等

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

您是否尝试过更改文件扩展名？
我见过有人成功地保留了地雷类型。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>


这可能会有所帮助：欢迎来到html5音频的怪异世界。这可能也有帮助。我应该为safari浏览器编写自定义javascript以排除OGG文件吗？或者这个方法不包括所有主要的浏览器吗？虽然多个解决方案会提供更多的灵活性，但是你的ogg是用vorbis还是opus编解码器包装的？