Monkey Raptor: Latest Firefox (28.0) Plays MP3 Format Audio Element (HTML5)

Webkit browser (Chrome, Yandex, Safari, etc) can always play this MP3 format. It's its "default" playable audio format. Firefox usually only played ogg audio format. But now, the latest version, can also play MP3 format. This happens on my latest version of Firefox browser. I don't know if that will apply to you.
Try this one out with Firefox.

I put this demo on my Google Drive, middle C note from an acoustic guitar.
This is an iFrame of that page :

The audio file is stored in the same folder of the HTML file.

The HTML of that :

<!DOCTYPE HTML>
<html>

<head>
  <meta charset='utf-8'>
</head>
<body>
  <!-- the styling -->
  <style>
    body {
      background: #eee;
      font-family: consolas, courier;
    }
    .wrapperN {
      text-align: center;
    }
    .Tichar {
      text-align: center;
    }
    .nWrap {
      list-style: none;
      padding: 0;
      margin: 0 auto;
      background: #eaeaea;
      box-shadow: 1px 1px 2px #aaa inset;
      padding: 10px;
      display: inline-block;
      border-radius: 10px;
    }
    .note {
      display: inline-block;
      height: 30px;
      width: 30px;
      border-radius: 50%;
      background: #eee;
      box-shadow: -5px -5px 20px #ddd inset, 0 3px 6px #bbb;
      line-height: 30px;
      color: #aaa;
      text-shadow: 1px 1px 1px #fff;
      position: relative;
    }
    .note:hover {
      background: #fff;
      cursor: pointer;
    }
    .note:active {
      background: #fff;
      box-shadow: 0 5px 15px #ddd inset, 0 -1px 6px #ccc;
      top: 1px;
    }
  </style>
  <!-- the trigger elements -->
  <div class='wrapperN'>
    <h3 class='Tichar'>MP3 format HTML5 audio element</h3>
    <ul class='nWrap'>
      <li id='btn' class='note'>1</li>
    </ul>
  </div>
  <!-- the invisible audio element -->
  <audio id='note' preload="auto">
    <source src="C.mp3" type="audio/mpeg">
  </audio>
  <!-- script to control the audio through button click -->
  <script>
    var b = document.getElementById('btn'),
      n = document.getElementById('note');
    b.onclick = function () {
      n.play();
    }
  </script>
</body>

</html>

Info at Mozilla Developer about MP3 format.

Monkey Raptor

Tuesday, April 15, 2014

Latest Firefox (28.0) Plays MP3 Format Audio Element (HTML5)

No comments:

Post a Comment