2011-10-23 18 views
5

È possibile rilevare se il browser supporta Html5 Audio tramite Modernizr? Se sì, come è fatto? Se no ci sono dei lavori in giro? Ci sono poche risorse su Google che spiegano questo, quindi qualsiasi aiuto sarebbe apprezzato.Rilevamento del supporto audio html5 con Modernizr

+6

Stavo per pubblicare una terza risposta "leggi i documenti" ma gli altri due sono stati pubblicati pochi secondi prima. La documentazione dovrebbe essere la tua prima risorsa, non Stack Overflow ... –

risposta

8

Sì, tramite modernizr.audio. Supporta un numero di formati audio (attualmente ogg, mp3, m4a & wmv). Esempio:

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

Maggiori informazioni nel documentation.

+0

Sì, ho provato questo: e non sembra funzionare .. Darò uno scatto, grazie uomo –

+0

come faccio a eseguire le cose all'interno dell'istruzione if? –

+0

@Michael 'if (Modernizr.audio) {..}' funziona davvero. – alexn

2

Sì, Modernizr rileva supporto audio, secondo the documentation (che è un link), che comprende anche un esempio di codice (copiato sotto):

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

ho trovato questo codice e ha funzionato bene per me:

<!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> 

Basta aggiungere l'audio con il nome giusto nella cartella e aggiungere i file modernizzatore con il Jquery roba e il gioco è fatto.

+0

Attribuzione: http://www.misfitgeek.com/2011/08/play-sound-in-html5-and-cross -browser-support-con-backward-compatibilità / – Trae