« ◇主語-述語と主体-命題 | トップページ | □TABLEの色組み合わせを試すツール »

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

メモです

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

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

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

<script src="api/html5media.min.js"></script>
を1行追加するだけです。


この記事では次の所に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)はせいぜい二百数十Kバイトです。。

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要素、メソッドとイベント
に置いてあります。

|

« ◇主語-述語と主体-命題 | トップページ | □TABLEの色組み合わせを試すツール »

トラックバック


この記事へのトラックバック一覧です: 非対応ブラウザでaudioタグを動かす:html5media:

« ◇主語-述語と主体-命題 | トップページ | □TABLEの色組み合わせを試すツール »