甚至 Android 或 Ipad 小工具中的 onmousedown 和 onmouseout

Question

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

以下脚本在 notebook 中测试过，也适用于 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 事件吗？

Answer 1

感谢 Jeff。并通过添加以下脚本行

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

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

甚至 Android 或 Ipad 小工具中的 onmousedown 和 onmouseout

Even onmousedown and onmouseout in Android or Ipad gadget

javascript

touchscreen

onmouseout

onmousedown

onmouseup