audio要素で音楽を再生する
HTML5ではaudio要素が用意されているので、単純に音楽を再生するだけならJavaScriptを使うまでもありません。audio要素のsrc属性に再生したい音声ファイルのURLを指定するだけです。controls属性を指定すればコントローラー（再生／停止ボタン）も表示できますし、autoplay属性で自動再生、loop属性で繰り返し再生もできます（ただし、Firefox 3.6ではloopを設定しても繰り返し再生されません）。
実際のHTMLはサンプル01です。
再生ボタンをクリックすると音楽が再生される
●サンプル01[HTML]
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>audioタグを使って音楽を再生する(1)</title>
<link rel="stylesheet" href="css/main.css" type="text/css" media="all">
</head>
<body>
<h1>audioタグを使って音楽を再生する(1)</h1>
<div>
<audio src="music/kfighter.wav" controls>
</div>
</body>
</html>
サンプル01はWave形式のファイルを指定しているのでSafari、Firefox、Operaでは再生できますが、Google Chromeでは再生できません。そこでHTML5では、audio要素内にsource要素を入れ子にして記述する方法が用意されています。
source要素のsrc属性に音声ファイルのURLを複数記述すると、ブラウザーは再生できる形式を見つけ次第再生を始めます。複数のファイル形式を指定しておけば、将来的に新しいブラウザーが登場しても再生できる可能性は高くなります。
また、audio要素内にはsource要素だけでなく、HTML5 Audioに対応していないブラウザー（Internet Explorerなど）のためのメッセージも記述できます。object要素を記述して、非対応のブラウザー向けにFlashで音声を再生する方法もあります（この場合、Flashコンテンツ側で音声ファイルを再生させます）。
ここまでをまとめたのがサンプル02です。
●サンプル02[HTML]
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>audioタグを使って音楽を再生する(2)</title>
<link rel="stylesheet" href="css/main.css" type="text/css" media="all">
</head>
<body>
<h1>audioタグを使って音楽を再生する(2)</h1>
<div>
<audio controls loop>
<source src="music/kfighter.ogg">
<source src="music/kfighter.wav">
<source src="music/kfighter.mp3">
<p>HTML5 Audioに対応したブラウザをご利用ください</p>
</audio>
</div>
</body>
</html>
サンプル02を実行してみると、表示されるコントローラーのデザインがブラウザーによって異なることが分かります。audio要素で音声ファイルを再生する方法は非常に手軽ですが、プレイヤーの見た目（スキン）を変更できないので、今回のサウンドプレイヤーの作成には不向きです。そこで、次ページからは今回の本題であるスクリプトを使って制御する方法を解説します。
Safari 4での表示
Firefox 3.6での表示
Opera 10.50での表示
Google Chrome 5βでの表示
IE6での表示
