对于HTML备用解决方案 与传统的浏览器(Fallback solution for HTML

我的工作与各种音频剪辑营造良好的董事会。

而不是使用标准的HTML5音频控制，我要的风格有些标题文本的每个按钮，这样当用户按下一个按钮，相关片段播放。

一切正常的HTML 5级的浏览器（Chrome浏览器，火狐，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。

我要寻找某种解决方法解决方案，让我要么（一）检测，如果浏览器不支持HTML 5的标签，并重定向到音板或（b）使用回退的替代版本（闪光，等）上的按钮的自定义风格如果支持不存在。

Answer 1:

你应该同时使用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:

我发现了另一个例子 ，我稍微修改了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');
}

文章来源: Fallback solution for HTML