使用Modernizr檢測html5音頻支持

Question

是否可以通過Modernizr檢測瀏覽器是否具有Html5 Audio支持？ 如果是這樣，這是怎么做到的？ 如果不是，有什么工作嗎？ 谷歌解釋這一點的資源很少，所以任何幫助都會受到贊賞。

Answer 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();

文檔中的更多信息。

Answer 2

是的，Modernizr檢測到音頻支持，根據文檔（這是一個鏈接），甚至包括代碼示例（下面復制）：

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

Answer 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添加現代化程序文件即可。

Answer 4

是。 http://www.modernizr.com/docs/#installing中途停下來。

使用Modernizr檢測html5音頻支持

問題描述

4 個解決方案

解決方案1
8 已采納 2011-10-23 17:28:50

解決方案2
2 2011-10-23 17:29:09

解決方案3
1 2012-09-19 16:37:22

解決方案4
0 2011-10-23 17:31:15

使用Modernizr檢測html5音頻支持

問題描述

4 個解決方案

解決方案1 8 已采納 2011-10-23 17:28:50

解決方案2 2 2011-10-23 17:29:09

解決方案3 1 2012-09-19 16:37:22

解決方案4 0 2011-10-23 17:31:15

解決方案1
8 已采納 2011-10-23 17:28:50

解決方案2
2 2011-10-23 17:29:09

解決方案3
1 2012-09-19 16:37:22

解決方案4
0 2011-10-23 17:31:15