4

どういうわけか音波のように見えるが、ピアノの鍵盤のように振る舞うバナーを作成しようとしています。このキーボードの各キーで、ホバー状態で短い固有のサウンド（.oggまたは.mp3サンプル）を再生したいと思います。

Flashを使用してこれを実装する方法は知っていますが、このプロジェクトではHTML / JSに固執したいので、実際に実行するのに問題があります。

「キーボード」は次のようになります（SVG）：

キーボード

これを実装する方法についていくつかのヒントを教えてください。

私は、、、<svg>または<canvas>画像マップが良いオプションである可能性があると考えています。ご助力ありがとうございます。

4

2 に答える 2

5

編集：代わりに次のようなものを試すことができます：

デモ： http： //jsfiddle.net/SO_AMK/xmXFf/

jQuery：

$("#layer1 rect").each(function(i) {
    $("#playme").clone().attr({
        "id": "playme-" + i,
        "src": B64Notes[i]
    }).appendTo($("#playme").parent());
    $(this).data("audio", i);
});
$("#layer1 rect").hover(function() {
    var playmeNum = $("#playme-" + $(this).data("audio"));
    playmeNum.attr("src", playmeNum[0].src)[0].play();
    // Reset the src to stop and restart so you can mouseover multiple times before the audio is finished
    $(this).css("fill", "red");
}, function() {
    $(this).css("fill", "#d91e63");
});​

重複を避けたいと思いますが、それ以外の方法で複数のノートを同時に再生する方法はありません。

svgは、コードを単純化するためにページに直接あり、別のドメインから読み込まれるため、jQueryがアクセスして変更することはできません。外部ソースから埋め込まれたsvgドキュメントにアクセスするには、http：//xn--dahlstrm-t4a.net/svg/html/get-embedded-svg-document-script.htmlを参照してください。

于 2012-10-15T12:57:06.983 に答える
3

各キーにIDを割り当て、html5を使用するのはどう<audio>ですか？次に、jQueryを使用してオーディオタグのsrc属性を変更しますか？

$('#a').hover(function(){
    $('#oggfile').attr("src","a.ogg");
    $('#mpegfile').attr("src","a.mp3");
});

$('#c').hover(function(){
    $('#oggfile').attr("src","a.ogg");
    $('#mpegfile').attr("src","a.mp3");
});

$('#c').hover(function(){
    $('#oggfile').attr("src","c.ogg");
    $('#mpegfile').attr("src","c.mp3");
});
​

http://jsfiddle.net/wPGSv/

于 2012-10-15T13:31:31.050 に答える