表題の通り、あまり役に立ちそうにない仕掛けですw
担当から、キーボードの商品紹介ページにこんな仕掛けがほしいと頼まれました。

  • 画像のキーを押すと音がなる
  • 押したと同時に右側の画像を入れ替える

サウンドを鳴らすソースは下記のを使わせて頂き、そこに画像を入れ替えるJavaScriptをプラスすればできるんじゃないか!と。力技ですww(ソース汚くてごめんなさい・・・)
デモ
000

そしてサウンドを再生させるソースはこちら
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をゴリゴリいじれば、もっと素敵になります。
アイデア次第。

もう少し、商用として使えるよう別でカスタマイズしてみます。しばし時間を!