HTML5 Audio と JavaScript でピアノ制作
先日, HTML5 Audio の使い方について書きました. その際勉強ついでにピアノを作ったので公開します. 作り方もざっくりとまとめたのでよかったら参考にしてください. webkit-animation や display:box など css3 についても少し触れています.
SAMPLE And DATA
今回作るWebピアノはこちらで遊べます.
ダウンロードはここからできます. 音データの読み込みは遅いので, ダウンロードしてローカルで実行するのがオススメです.
FLOW
HTML5 Audio と JavaScript を使ったピアノを作る流れです. それぞれの解説ページへのリンクにつながっています.
分からない所やアドバイス, 指摘等ありましたら気軽に Twitter などでメッセージくれると嬉しいです.
-
参考にしたサイトはこちら. 作りは全く違いますが
- iPad対応!HTML5 Audioで作るブラウザーピアノ
-
音素材はこちらのサイトから頂きました. 感謝感謝.
- audioタグとJavaScriptでピアノを作ろうとしたけど諦めた
ピアノ作ってみました.
「HTML5 Audio と JavaScript でピアノ制作」
#HTML5 #javascript #css3
http://t.co/k3BPE1M
せっかく自動再生機能を作ったので, カエルの歌をセットするリンクを追加しました.
良い感じのタイミングで Play ボタンを押すとカエルの歌の追っかけを再現できます!!
「HTML5 Audio と JavaScript でピアノ制作」
http://ow.ly/52Jrx
[…] 以前 「HTML5 Audio と JavaScript でピアノ制作」という内容の記事を書いたのですが, たまに音ズレが起きるという指摘を何人かの方から頂きました. […]
html5とjsでピアノ!
[…] 以前, 『HTML5 Audio と JavaScript でピアノ制作』で 作ったサンプルを tmlib.js で実装し直したものになります. […]