audio要素をスクリプトで制御する
Audioをスクリプトで制御するには、HTMLファイル内に書かれたaudio要素に対して処理する方法と、スクリプトを使ってAudioオブジェクトを作成して制御する方法があります。どちらも使用できるメソッドやプロパティに違いはありません。
最初に、HTMLファイル内に記述されたaudio要素を制御する方法を試してみましょう。HTMLフォームのボタンを利用して再生、停止、音量変更ボタンを作り、ボタンがクリックされたらスクリプトで制御します。
HTMLでは、スクリプトで特定するためaudio要素にID名を指定しておきます（auido要素を特定できる場合は指定しなくても構いません）。スクリプトでは、以下のようにして制御するaudio要素を決めます。
var audioObj = document.getElementById("myMusic");
これで、id="myMusic"が指定されているaudio要素を特定できます。音声の再生はplay()メソッド、停止はpause()です。pause()は音声を一時的に停止させるだけで、再度play()メソッドを実行すると停止した位置から再生が始まります。ちなみに、stop()というメソッドはありません。
音量は、volumeプロパティに0.0～1.0までの小数値を設定して変更します（値が大きいほど音量は大きくなります）。volumeプロパティに範囲外の値を指定してもSafari、Firefox、Google Chromeではエラーになりませんが、Opera 10.50ではエラーを出しますので注意してください。
ここまでをまとめたのがサンプル03です。ボタンをクリックすると音声を制御できます。
ボタンクリックで音声を制御できる
●サンプル03[HTML]
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>スクリプトで音楽を制御する</title>
<link rel="stylesheet" href="css/main.css" type="text/css" media="all">
<script type="text/javascript" src="js/control.js"></script>
</head>
<body>
<h1>スクリプトで音楽を制御する</h1>
<div>
<audio id="myMusic" controls loop>
<source src="music/kfighter.ogg">
<source src="music/kfighter.wav">
</audio>
</div>
<form>
<input type="button" value="再生" onclick="start_music()">
<input type="button" value="停止" onclick="start_pause()"><br>
<input type="button" value="音量アップ" onclick="volume_up()">
<input type="button" value="音量ダウン" onclick="volume_down()">
</form>
</body>
</html>
●サンプル03[JavaScript:control.js]
// 再生開始
function start_music(){
var audioObj = document.getElementById("myMusic");
audioObj.play();
}
// 再生停止（一時停止）
function start_pause(){
var audioObj = document.getElementById("myMusic");
audioObj.pause();
}
// 音量アップ
function volume_up(){
var audioObj = document.getElementById("myMusic");
audioObj.volume = audioObj.volume + 0.1;
}
// 音量ダウン
function volume_down(){
var audioObj = document.getElementById("myMusic");
audioObj.volume = audioObj.volume - 0.1;
}
