0

JSで簡単な楽器を作ろうとしています。使用するライブラリはPizzicato.jsです。onclickサウンドをトリガーする HTML 要素は、 、onmousedownonmouseupおよびonmouseoutイベントを持つボタンです。最初のイベントは、関数play()とオブジェクトstop()からのテストのみを目的としていPizzicatoます。その後、2 つのイベントはより便利な対話に使用されます。

次のスクリプトはノートブックでテストされ、Android または IPad ガジェットでも動作します

function demoToggleSound() {
    var eout = document.getElementById("scriptResult");
    eout.innerHTML = "";

    var sineWave = new Pizzicato.Sound({ 
        source: 'wave', 
        options: {
                frequency: 880
        }
    });

    var btn = document.createElement("button");
    btn.innerHTML = "Play";
    eout.appendChild(btn);
    btn.addEventListener("click", btnClick);

    function btnClick() {
        var t = event.target;
        if(t.innerHTML == "Play") {
            t.innerHTML = "Stop";
            sineWave.play();
        } else {
            t.innerHTML = "Play";
            sineWave.stop();
        }
    }
}

イベントのclick場合、しかしonmousedown、次のスクリプトのイベントのonmouseup場合onmouseout

function demoSimpleInstrument() {
    var eout = document.getElementById("scriptResult");
    eout.innerHTML = "";

    var baseFrequency = 880;
    var sineWave = new Pizzicato.Sound({ 
        source: "wave",
        options: {
                //frequency: baseFrequency
        }
    });

    var ratio = [1/1, 9/8, 5/4, 4/3, 3/2, 5/3, 15/8, 2/1];
    var label = ["C", "D", "E", "F", "G", "A", "B", "C"];
    for(var i = 0; i < ratio.length; i++) {
        var b = document.createElement("button");
        b.innerHTML = label[i];
        b.id = i;
        eout.appendChild(b);
        b.addEventListener("mousedown", playSound);
        b.addEventListener("mouseup", stopSound);
        b.addEventListener("mouseout", stopSound);
    }

    function playSound() {
        var t = event.target;
        var f = baseFrequency * ratio[t.id];
        sineWave.frequency = f;
        sineWave.play();
    }

    function stopSound() {
        sineWave.stop();
    }
}

それは動作しません。onmousedownonmouseupおよびonmouseoutタッチスクリーン付きガジェットのイベントを変更する必要がありますか?

4

1 に答える 1