title: Even onmousedown and onmouseout in Android or Ipad gadget
body: <p>I am trying to make a simple music instrument with JS. The library used is <a href="https://alemangui.github.io/pizzicato/" rel="nofollow noreferrer">Pizzicato.js</a>. HTML element for triggering the sound is a button with <code>onclick</code>, <code>onmousedown</code>, <code>onmouseup</code> and <code>onmouseout</code> events. The first event is only for testing the function <code>play()</code> and <code>stop()</code> from <code>Pizzicato</code> object. And later the two events are used for more convenient interaction.</p>
  
  <p>Following script is tested in notebook and also worked in Android or IPad gadgets</p>
  
  <pre><code>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();
          }
      }
  }
  </code></pre>
  
  <p>for <code>click</code> event, but for <code>onmousedown</code> , <code>onmouseup</code> and <code>onmouseout</code> events in the followiing script</p>
  
  <pre><code>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 &lt; 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();
      }
  }
  </code></pre>
  
  <p>it does not work. Should I change <code>onmousedown</code>, <code>onmouseup</code> and <code>onmouseout</code> events in gadgets with touchscreen?</p>