HTML5 Audio ピアノ制作 : Step1 – クリックで音を鳴らそう!
鍵盤をクリックした際に音が鳴るようにします. この Step が今回のプログラムで最も重要です. ここをクリアすればほぼ完成です. っというより完成です.
SAMPLE
サンプルはこちらで見ることができます. 鍵盤をクリックすると音がでます.
CODE
まず下記のコードを html 側に追加します.
<script src="script.js"></script>
これでスクリプトが読み込めるようになります. 次に音を鳴らすスクリプトを追加します. スクリプト全体のコードです.
var $id = function(id) { return document.getElementById(id); } var $class = function(c, n) { n=n||0; return document.getElementsByClassName(c)[n]; } var $classes = function(c) { return document.getElementsByClassName(c); } /** * 音データへのパス */ var SOUND_PATH = "../sound/"; /** * サポートされているファイル形式を取得 */ var AUDIO_EXT = (function(){ var audio = new Audio(); var ext = ""; if (audio.canPlayType("audio/ogg") == 'maybe') { ext="ogg"; } else if (audio.canPlayType("audio/mp3") == 'maybe') { ext="mp3"; } else if (audio.canPlayType("audio/wav") == 'maybe') { ext="wav"; } return ext; })(); window.onload = function() { // キーボードエレメントを取得 var keyboards = $classes("keyboard"); // 全ての要素にクリック時のイベントを登録 for (var i=0; i<keyboards.length; ++i) { // クリックイベントを登録 keyboards[i].addEventListener("click", function(){ // 音を鳴らす play(this); }, false); } } /* * 音を鳴らす */ function play(element) { // 音を鳴らす var audio = new Audio(SOUND_PATH + element.getAttribute("name") + '.' + AUDIO_EXT); audio.play(); }
$が付いている関数について
これは私が JavaScript で DOM をいじる際によく使用するショートカットです. まぁ document.~ っと書くのが面倒なのでこうしているだけなのでスルーしていただいてかまいません.
var $id = function(id) { return document.getElementById(id); } var $class = function(c, n) { n=n||0; return document.getElementsByClassName(c)[n]; } var $classes = function(c) { return document.getElementsByClassName(c); }
音を鳴らす
ここがこのプログラムで最も重要なポイントです. やっていることは .keyboard エレメントが押された際に play() 関数に自身を 引数として渡して実行. そして, play() 関数内で 自身の name から音楽ファイル名を取得して, その音を鳴らす. っという流れになっています.
Audio の使い方についてはこちらに書いています.
これでピアノの完成♪♪ ここから先の Step はピアノを押した際の演出や機能追加になっております. 蛇足気味なのでご注意を!
[…] Step1 – クリックで音を鳴らそう! […]