Question

我正在制作一个带有各种音频剪辑的声卡。

我不想使用标准的HTML5音频控件，而是使用一些标题文本为每个按钮设置样式，这样当用户按下按钮时，相关的剪辑就会播放。

使用以下代码，HTML 5浏览器（Chrome，Firefox，Safari和IE9 +）中的一切正常运行：

    <script type="text/javascript" charset="utf-8">
       $(function() {
            $("audio").removeAttr("controls").each(function(i, audioElement) {
                var audio = $(this);
                var that = this; //closure to keep reference to current audio tag
                $("#doc").append($('<button>'+audio.attr("title")+'</button>').click(function() {
                    that.play();
                }));
            });
        });
    </script>

    <!-- Sample Audio Clip -->
    <audio controls preload="auto" autobuffer title="Sounds of Laughter"> 
    <source src="assets/clips/1.mp3" />
    <source src="assets/clips/1.ogg" />
    </audio>

但是，在非HTML 5兼容的浏览器（如Internet Explorer 8）上不支持此解决方案。

我正在寻找某种解决方案，这将允许我（a）检测浏览器是否不支持HTML 5标记并重定向到声板的备用版本或（b）使用后备（闪光灯等）如果支持不存在，按钮上会自定义样式。

Answer 1

你应该像Garret所说的那样Modernizr和jPlayer

检查Garrett关于如何检查兼容性的答案。虽然我不明白为什么如果您的唯一目标是基于兼容性无缝播放HTML5或Flash，它会有用。 jPlayer自动完成。

你只需要实例化它：

$("#music").jPlayer({
    ready: function (event) {
        $(this).jPlayer("setMedia", {
            mp3:"music.mp3",
            oga:"music.ogg"
        });
    },
    swfPath: "js",
    supplied: "mp3, oga"
});

以下内容取决于您要使用的界面。 jPlayer有一些皮肤，但您可以根据自己的意愿修改它们，或者像我一样从头创建一个完整的界面并使用jPlayer methids

Answer 2

您应该查看Modernizr脚本库。这将允许您根据浏览器支持的HTML5功能执行条件逻辑。例如，你可以这样做：

var audio = new Audio();
audio.src = Modernizr.audio.ogg ? 'background.ogg' :
            Modernizr.audio.mp3 ? 'background.mp3' :
                                  'background.m4a';
audio.play();

可以在此处找到文档：http://modernizr.com/docs/#features-html5。

Answer 3

我发现another example我稍微修改了MP3到OGG的后备。它使用canPlayType方法：

var audiofile = 'example.mp3';
var audioTag = document.createElement('audio');
if (!(!!(audioTag.canPlayType) && ("no" != audioTag.canPlayType("audio/mpeg"))
      && ("" != audioTag.canPlayType("audio/mpeg")))) {
    audiofile = audiofile.replace('.mp3','.ogg');
}

HTML <audio>和旧版浏览器的后备解决方案</audio>

3 个答案: