Even onmousedown and onmouseout in Android or Ipad gadget

Question

I am trying to make a simple music instrument with JS. The library used is Pizzicato.js. HTML element for triggering the sound is a button with onclick, onmousedown, onmouseup and onmouseout events. The first event is only for testing the function play() and stop() from Pizzicato object. And later the two events are used for more convenient interaction.

Following script is tested in notebook and also worked in Android or IPad gadgets

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();
        }
    }
}

for click event, but for onmousedown , onmouseup and onmouseout events in the followiing script

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();
    }
}

it does not work. Should I change onmousedown, onmouseup and onmouseout events in gadgets with touchscreen?

[touchstart](https://developer.mozilla.org/de/docs/Web/Events/touchstart) would be the touch-screen equivalent — Jeff, Mar 17 '18 at 10:41

score 1 · Accepted Answer · answered Mar 17 '18 at 11:06

1

Thank you to Jeff. And by adding following lines of script

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

It does work, but unfortunately only in Google Chrome and not in Safari.

answered Mar 17 '18 at 11:06

dudung

499
2
17

Thank, was looking for few hours for onMouseDown / Up events for react on android, and couldn't find anything on it, seen it implemented though and working, but couldn't figure out what to do, but this touchStart work like charm, though only for mobile devices, but its onTouchStart. Check touch events --> for info, for anyone still looking https://reactjs.org/docs/events.html – Jan Apr 15 '22 at 04:45

Even onmousedown and onmouseout in Android or Ipad gadget

1 Answers1