表題の通り、あまり役に立ちそうにない仕掛けですw
担当から、キーボードの商品紹介ページにこんな仕掛けがほしいと頼まれました。
- 画像のキーを押すと音がなる
- 押したと同時に右側の画像を入れ替える
サウンドを鳴らすソースは下記のを使わせて頂き、そこに画像を入れ替えるJavaScriptをプラスすればできるんじゃないか!と。力技ですww(ソース汚くてごめんなさい・・・)
デモ
そしてサウンドを再生させるソースはこちら
HTML5 Audio を JavaScript で使う方法
リンクがなくなっていたので
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(); element.style.webkitAnimationPlayState = "running"; }
素材は適当な画像です。見た目はCSSをゴリゴリいじれば、もっと素敵になります。
アイデア次第。
もう少し、商用として使えるよう別でカスタマイズしてみます。しばし時間を!