使用 Modernizr 检测 html5 音频支持答案

【问题标题】：Detecting html5 audio support with Modernizr使用 Modernizr 检测 html5 音频支持
【发布时间】：2011-10-23 17:25:10
【问题描述】：

是否可以通过 Modernizr 检测浏览器是否支持 Html5 音频？如果是这样，这是如何完成的？如果没有，是否有任何解决方法？ Google 上很少有资源可以解释这一点，因此我们将不胜感激。

【问题讨论】：

我正要发布第三个“阅读文档”答案，但其他两个是在几秒钟前发布的。文档应该是您的第一个资源，而不是 Stack Overflow...

标签： javascript html modernizr

【解决方案1】：

是的，通过modernizr.audio。它支持多种音频格式（当前为 ogg、mp3、m4a 和 wmv）。示例：

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

更多信息请关注documentation。

【讨论】：

是的，我试过这个：它似乎不起作用.. 我会试一试，谢谢伙计
如何在 if 语句中执行内容？
音频甚至无法播放，而这张图片中的i55.tinypic.com/2qdbl3k.png，我不应该将“} else { error}”标记到末尾。
@Michael 请在粘贴网站（如 gist.github.com）上发布完整的生成 HTML

【解决方案2】：

是的，根据the documentation（这是一个链接），Modernizr 检测到音频支持，其中甚至包括一个代码示例（复制如下）：

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

【讨论】：

【解决方案3】：

我找到了这段代码，它对我来说很好用：

<!DOCTYPE html>
<html>  
<head>
<title>Play Audio</title>
<script src="script/jquery-1.6.2.min.js" type="text/javascript"></script>
<script src="script/modernizr-latest.js" type="text/javascript"></script>
<script type="text/javascript">
var currentFile = "";
function playAudio() {

    var oAudio = document.getElementById('myaudio');
    // See if we already loaded this audio file.
    if ($("#audiofile").val() !== currentFile) {
        oAudio.src = $("#audiofile").val();
        currentFile = $("#audiofile").val();
    }
        var test = $("#myaudio");
        test.src = $("#audiofile").val();
    oAudio.play();   
}

$(function() {
    if (Modernizr.audio) {
        if (Modernizr.audio.wav) {
            $("#audiofile").val("sounds/sample.wav"); 
        }
        if (Modernizr.audio.mp3) {
            $("#audiofile").val("sounds/sample.mp3");
        }
    }
    else {
      $("#HTML5Audio").hide();
      $("#OldSound").html('<embed src="sounds/sample.wav" autostart=false width=1 height=1 id="LegacySound" enablejavascript="true" >');
    }

});
</script>
</head>

<body>
<div style="text-align: center;"> 
 <h1>Click to Play Sound<br /></h1>
<div id="HTML5Audio">
<input id="audiofile" type="text" value="" style="display: none;"/><br />

<button id="play" onclick="playAudio();">
    Play
</button>
</div>
<audio id="myaudio">
    <script>
    function LegacyPlaySound(soundobj) {
      var thissound=document.getElementById(soundobj);
      thissound.Play();
    }
    </script>
    <span id="OldSound"></span>        
    <input type="button" value="Play Sound" onClick="LegacyPlaySound('LegacySound')">
</audio>

只需在文件夹中添加具有正确名称的音频，然后添加带有 Jquery 内容的modernizer 文件即可。

【讨论】：

署名：misfitgeek.com/2011/08/…

【解决方案4】：

是的。 http://www.modernizr.com/docs/#installing 半途而废。

【讨论】：