1

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

我不想使用标准的 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>

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

我正在寻找某种变通方法，可以让我 (a) 检测浏览器是否不支持 HTML 5 标签并重定向到音板的替代版本，或者 (b) 使用后备（flash，等）如果不存在支持，则在按钮上使用自定义样式。

4

3 回答 3

2

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

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

你只需要实例化它：

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

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

于 2012-07-31T19:42:38.793 回答
1

你应该看看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。

于 2012-07-29T20:09:47.413 回答
0

我发现了另一个示例，我对 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');
}
于 2016-05-26T10:12:09.487 回答