非対応ブラウザでaudioタグを動かす：html5media

メモです

 <audio>タグをサポートしないブラウザでも使う

github からダウンロードできる
 html5media.min.js
を使えば、 <audio>タグに対応していないブラウザでも<audio>タグが 使えるようになります。対応している場合への悪影響はありません。
mp3とAACの再生ができるようです。firefoxでもmp3再生が可能となります。

HTML上での使い方はダウンロードしたhtml5media.min.jsを参照する行

<script src="api/html5media.min.js"></script>

を１行追加するだけです。

---

この記事では次の所にhtml5media.min.jsを置いてあります。

<script src="../../../js/html5media.min.js"></script>

---

MP3が再生できるか？

<audio src="../../../sound/audioTagTstMp3.mp3" controls>
<p class=red>音声を再生するには、audioタグをサポートしたブラウザが必要です。</p>
</audio>

---

WAVが再生できるか？

<audio src="../../../sound/audioTagTstWav.wav" controls>
<p class=red>音声を再生するには、audioタグをサポートしたブラウザが必要です。</p>
</audio>

---

OGGが再生できるか？

<audio src="../../../sound/audioTagTstOgg.ogg" controls>
<p class=red>音声を再生するには、audioタグをサポートしたブラウザが必要です。</p>
</audio>

---

AACが再生できるか？

<audio src="../../../sound/audioTagTstAac.aac" controls>
<p class=red>音声を再生するには、audioタグをサポートしたブラウザが必要です。</p>
</audio>

 JavascriptでAudioクラスを動かしてみる

残念ながらAudioクラスは用意されていないようです。

<script type="text/javascript">
function playAudio(file){
   try {
      var audio = new Audio('../../../sound/'+file);
      audio.play();
      }
   catch(e){ alert("再生できません:"+e); }
   }
</script>
<input type=button value="audioTagTstMp3.mp3" onClick="playAudio('audioTagTstMp3.mp3')" />

 ダウンロード

ダウンロードサイト https://github.com/etianen/html5media/downloads には幾つかのセットがあり、サイズが極端に違います（1M～20M)が、サンプルファイルの差で あって、本体(jsとswf)はせいぜい二百数十Ｋバイトです。。

html5media.min.jsはFlashを使っており、一緒にダウンロードされる.swfファイル

  ./flowplayer.audio.swf
  ./flowplayer.controls.swf
  ./flowplayer.swf

をhtml5media.min.jsと同じフォルダに置く必要があります。

Flashがインストールされていない場合のFlashのインストールも必要です。

QuickTimeをインストールしなくてもsafariで<audio>が使えます。

 HTML5雑感

こうやると、どのブラウザでもmp3が<audio>で出るんですねえ。

やっぱりオーディオやビデオはブラウザネイティブ組み込みなんてクローズドなおバカは やめて、こういったJS+プラグインの形、オープンな形を発展させましょう。

くだらないdiv派生タグも全部すてましょう！<div>と標準classセットという形の方が 絶対に発展的でオープンです。

あっ、でもcss3とmathMlは残してください。

 普通の<audio>サンプル

html5media.min.jsを使わない<audio>サンプルを
 HTML5のaudioを使ってみる
と
 HTML5のaudio要素、メソッドとイベント
に置いてあります。