logo标签列表

使用Modernizr检测HTML5音频支持

javascripthtmlmodernizr
6

通过Modernizr可以检测浏览器是否支持Html5音频吗？如果可以，如何实现？如果不行，有没有任何解决方法？谷歌上关于这方面的资源很少，所以需要帮助。

6
我差点发了第三个“看文档”的回答，但其他两个回答在几秒钟前就已经发布了。文档应该是你的第一个资源，而不是 Stack Overflow... - Wesley Murch
4个回答
8

是的，可以通过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();

在文档中获取更多信息。

是的，我尝试过这个：<script type="text/javascript"> if (Modernizr.audio){ <?php include("music.php"); ?> } else { <?php include("error.php"); ?> } </script> 但似乎不起作用.. 我会试一下你说的方法，谢谢 - Michael Grigsby
我该如何在if语句内执行代码？ - Michael Grigsby
音频甚至没有播放，在这张图片中，我不应该在结尾处带有“} else {error}”标签。 - Michael Grigsby
@Michael请将完整的生成HTML发布到粘贴网站（如gist.github.com）上。 - alexn
2

是的，根据文档（这是一个链接），Modernizr可以检测音频支持，甚至包括以下代码示例：

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

我找到了这段代码，它对我很有效：

<!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内容，就完成了。
归属：http://www.misfitgeek.com/2011/08/play-sound-in-html5-and-cross-browser-support-with-backward-compatability/ - Trae
0
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接