Rectangle 27 0

How to use Modernizr.audio to detect browser codec support [jQuery, ...

<!DOCTYPE HTML>
<html>
<head>
  <meta charset="utf-8">
  <!-- Load modernizr for .load method support -->
  <script src="modernizr-latest.js" type="text/javascript"></script>
  <!-- Load jquery for easy DOM manipulation -->
  <script src="jquery-latest.min.js" type="text/javascript"></script>

  <script type="text/javascript">
    $(document).ready(function(){
      var audio = $('audio')[0];

      // After having the modernizr js loaded, we can query Modernizr for the capabilities supported by the browser
      // If audio support is detected, Modernizr assesses which formats the current browser will play. Currently, Modernizr tests ogg, mp3, wav and m4a.
      // Below we tune the audio source to match the available support
      if (Modernizr.audio.ogg){
        audio.src="example.ogg";
      }else{
        audio.src =  Modernizr.audio.mp3 ? 'example.mp3' : 'example.m4a';
      }
      
      audio.play();

      $('#main').html("Playing " + audio.src);
    });
  </script>
</head>

<body>
<!-- Placeholder for audio source filename -->
<div id="main">
</div>
<audio controls="controls"> </audio>
</body> 
</html>
jQuery html5 JavaScript audio modernizr
Rectangle 27 0

How to use Modernizr.audio to detect browser codec support [jQuery, ...

<!DOCTYPE HTML>
<html>
<head>
  <meta charset="utf-8">
  <!-- Load modernizr for .load method support -->
  <script src="modernizr-latest.js" type="text/javascript"></script>
  <!-- Load jquery for easy DOM manipulation -->
  <script src="jquery-latest.min.js" type="text/javascript"></script>

  <script type="text/javascript">
    $(document).ready(function(){
      var audio = $('audio')[0];

      // After having the modernizr js loaded, we can query Modernizr for the capabilities supported by the browser
      // If audio support is detected, Modernizr assesses which formats the current browser will play. Currently, Modernizr tests ogg, mp3, wav and m4a.
      // Below we tune the audio source to match the available support
      if (Modernizr.audio.ogg){
        audio.src="example.ogg";
      }else{
        audio.src =  Modernizr.audio.mp3 ? 'example.mp3' : 'example.m4a';
      }
      
      audio.play();

      $('#main').html("Playing " + audio.src);
    });
  </script>
</head>

<body>
<!-- Placeholder for audio source filename -->
<div id="main">
</div>
<audio controls="controls"> </audio>
</body> 
</html>
jQuery html5 JavaScript audio modernizr