Question

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

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

首先，将一个音频文件的所有audiofileversions加载到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>

方法I： Javascript会检查audio.canPlayType(type)以获取浏览器支持并删除所有不受支持的<source>元素，并为"probably"的{{1}}属性添加<audio>来源。

Example I: （不在iphone上工作）。

问题我： src元素中的嵌套<source>元素效果不佳。（Altough Safari通常播放来自<audio>的{{1}}的给定mp3，如果它位于<audio>的{{1}}中，则不会播放。具有大的wav文件消息来源也阻止移动设备播放音频。）

方法II： Javascript会检查src以获取浏览器支持，并将第一个“可能”支持的<source>的{{1}}添加到src的{{1}}属性中。之后，所有audio.canPlayType(type)元素都将被删除。

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

问题II： Safari将我的ogg文件归类为<source>，然后不播放它们。

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

Answer 1

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

检测桌面上的safari，如果为true，则删除所有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可播放源文件将合并到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"));
    }
});

Answer 2

您是否尝试过更改文件扩展名？通过保持我的类型.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标记为“可能”＆amp; HTML5 <audio> <source />无法播放

2 个答案: