環境はFIREFOX44.0.2/WINDOWS7です。
HTML/JAVASCRIPT/CSSでピアノを作っています。参考にしたのはこの本です。
http://ascii.jp/elem/000/000/533/533100/
上記サイトのサンプル(ピアノが画面上に表示されて、マウスのクリックorキーボードからの打鍵で弾ける)についてはちゃんと動き、弾いたキーの色を変えるカスタマイズなども追加してうまくいきました。
これをベースに、submitボタンを押したら、自動で曲が再生され、弾かれているキーボードの色も変わるものを作ろうとしているのですが、しょっぱなの簡単なところで躓いています。
ソースを以下にコピペします。
■■■■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"> </head> <body> <form id="mtitle"> <input type="submit" value="PLAY" onclick="playmusic()"> </form> <script type="text/javascript" src="js/sound.js"></script> </body> </html>■■■■main.css(多分関係ない)■■■■
#mtitle {
position: absolute;
top: 20px;
left: 40px;
}
■■■■sound.js■■■■
function playmusic(){
var url = "music/Piano/C3.ogg";
var audioObj = new Audio(url);
audioObj.play();
alert ("なんでやねん"); //←この行をコメントアウトすると鳴らない。
}
■■■■終了■■■■
HTML上のsumitボタンをクリックすると、sound.jsが音を鳴らすという処理なのですが、sound.jsのソース内にも書いた通り、alert行が入っていると音が再生されますが、この行を抜くとなぜか音が再生できません。全く意味がわかりません;;
ヒントをお持ちの方がいらしたら、ぜひよろしくお願いいたします。
回答1件
あなたの回答
tips
プレビュー