[JS]主要ブラウザ全てにaudio要素でMP3を再生できるようにするスクリプト -audio.js

サイト構築 -JavaScript

Post on:2010年12月15日

sponsorsr

IE6/7/8, Firefox, Operaを含む主要ブラウザ全てに、HTML5のaudio要素を使ってMP3を再生できるようにするスクリプトを紹介します。

audio.js
デモページ

[ad#ad-2]

audio要素のサポート状況

audioはHTML5の要素で、サポートしているブラウザは限られたものとなっています。

audio要素のブラウザのサポート状況

IE9
Firefox 3.5+
Chrome
Safari
Opera 9.6+

また、対応している音声ファイルのフォーマットも異なり、現在音声ファイルの主流のMP3はChromeのみが対応しています（Safariも一応再生可）。

「audio.js」は、audio要素に非対応のIE6/7/8、MP3に非対応のFirefox, Safari, Operaで、audio要素を使ってMP3ファイルを再生できるようにします。

[ad#ad-2]

audio.jsの実装例

HTMLは通常のaudio要素を使用します。
「audio.js」を外部ファイルとし、下記のスクリプトを記述します。

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <title>audio.js</title>
  <script src="/audiojs/audio.js"></script>
  <script>
    audiojs.events.ready(function() {
      audiojs.createAll();
    });
  </script>
</head>
<body>
  <audio src="/mp3s/juicy.mp3" preload="auto" />
</body>

音声ファイルは、再生・一時停止は元より、自動再生・ループ再生などにも対応しています。

詳しい使い方は、下記のドキュメントを参照ください。
audio.js docs