0

我正在尝试用 JS 制作一个简单的乐器。使用的库是Pizzicato.js。用于触发声音的 HTML 元素是一个带有onclick、onmousedown和事件onmouseup的按钮。onmouseout第一个事件仅用于测试函数play()和stop()来自Pizzicato对象。后面这两个事件用于更方便的交互。

以下脚本在笔记本中进行了测试，也适用于 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();
    }
}

这没用。我应该更改带有触摸屏的小工具中的onmousedown,onmouseup和onmouseout事件吗？

4

1 回答 1

0

谢谢杰夫。_ 并通过添加以下脚本行

b.addEventListener("touchstart", playSound);
b.addEventListener("touchend", stopSound);

它确实有效，但不幸的是仅在 Google Chrome 中而不在 Safari 中。

于 2018-03-17T11:06:54.950 回答