HTML< audio>的后备解决方案和旧版浏览器 [英] Fallback solution for HTML <audio> and legacy browsers

问题描述

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

I am working on creating a sound board with various audio clips.

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

Rather than using the standard HTML5 audio controls, I want to style each button with some title text, so that when a user presses a button, the associated clip plays.

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

Everything is working fine in HTML 5 browsers (Chrome, Firefox, Safari, and IE9+), using the following code:

    <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）上不支持此解决方案。

However, this solution is not supported on non-HTML 5 compliant browsers like Internet Explorer 8.

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

I am looking for some sort of workaround solution that will allow me to either (a) detect if a browser doesn't support the HTML 5 tag and redirect to an alternate version of the sound board or (b) use a fallback (flash, etc.) with custom styling on the button if support is not present.

推荐答案

您应该同时使用 Modernizr 和Garret所说的 jPlayer

You should use both Modernizr as Garret said and jPlayer

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

Check Garrett's answer on how to check for compatibility. Though I don't see why it would be useful if your only goal is to seamlessly play HTML5 or Flash based on compatibility. jPlayer does it automatically.

你只需要实例化它：

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

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

The following depends on the interface you want to use. jPlayer has some skins, but you can modify them to your will or just create a whole interface from scratch like I do and use jPlayer methids

这篇关于HTML< audio>的后备解决方案和旧版浏览器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！