これで使える!初心者の為のHTML5のaudio要素解説

11_5_30_2_9-150x150

外部プラグインはもういらない!HTML5はブラウザだけで音楽再生!

HTML5の新要素であるaudio要素は今までのようにembed要素を利用し外部プラグインなどのプレイヤーを使うことなく音楽再生が可能です。javascriptを使って音楽再生をコントロールできるという便利な機能!このaudio要素の使い方を説明します。

基本的なaudio要素の使い方

音楽ファイルを再生させる

 

 

<audio src="sample.mp3" controls></audio>

上記参照でimgのようにsrcにて再生ファイルを指定してやるだけで音楽を再生することができます。

ただし気をつけるべきことがあります。上記のようなmp3を指定するとfirefoxなどでは再生することができません。これはブラウザによって読み込めるファイルのフォーマットが違うために起こる現象です。

各ブラウザに対応させる

この現象をクリアするには各ブラウザが読み込めるフォーマットを用意してやることです。

	<audio controls>

		<source src="music/sample.ogg" type="audio/ogg">

		<source src="music/sample.mp3" type="audio/mpeg">

        <source src="music/sample.wav" type="audio/wav">

		<p>このブラウザはAudio要素に対応していません</p>

	</audio>

このようにaudio要素にsource要素を各フォーマット分だけ用意してやるとブラウザが読み込めるフォーマットを読み込み再生するようになり、どのフォーマットにも対応しない場合はエラーメッセージを表示させることができます。下の音楽はoggに対応させているためFireFoxでも再生が可能となります。

audio要素の属性と値の説明

audio要素の属性と値についての参考表です。

属性 説明
src ファイルのパス 記入必須項目
preload none ロードしないようにする
metadata メタデータのみを事前にロードさせる
auto 事前にロードさせる
autoplay なし 自動再生する
loop なし リピート再生
controls なし ブラウザにコントローラを表示させる
type MINEタイプ コーデック ブラウザが対応しているかを判断

JavaScriptを使って操作する方法

コントローラーを表示させる

javascriptによって専用のコントローラーを表示させて操作することができます。先ほどのaudio要素にinputタグでコントローラーを追加してみます。

	<audio id="audio" controls>

		<source src="sample.ogg" type="audio/ogg">

		<source src="sample.mp3" type="audio/mpeg">

		<p>ブラウザがHTML5のaudioに対応していない場合はこの表示が出ます。</p>

	</audio>

	<br />

	<input type="button" value="再生" onclick="myPlay()">

	<input type="button" value="一時停止" onclick="myPause()">

	<input type="button" value="速度アップ" onclick="myRatePlus()">

	<input type="button" value="速度ダウン" onclick="myRateMinus()">

	<input type="button" value="停止" onclick="myStop()">

これでコントローラーが表示されました。

コントローラーが操作できるようにjavascriptを記述する

次にコントローラーが操作できるようにhead部分にjavascriptを記述していきます。

<script type="text/javascript">

function myPlay(){

	document.getElementById('audio').play();

}

function myPause(){

	document.getElementById('audio').pause();

}

function myRatePlus(){

	document.getElementById('audio').playbackRate += 0.5;

}

function myRateMinus(){

	document.getElementById('audio').playbackRate -= 0.5;

}

function myStop(){

	document.getElementById('audio').pause();

	document.getElementById('audio').currentTime = 0;

}

</script>

これでコントローラーでaudio要素を操作することができるようになります。もっとコンパクトにコントローラーのみの表示だけならaudio要素からcontrolsを省けばよいでしょう。

rss登録 rss登録 rss登録

コメント

コメントをお寄せください。

コメントの投稿

コメントフィード コメントフィード

トラックバックURL: http://select.rash.jp/html5/113/trackback/