title: How to make the touchstart and touchend and touchover work with mouse events?
body: <p>I'm trying to create a basic mobile ready audio player using HTML5 audio tags.</p>
  
  <p>so far I can make things work properly in the browser and with the mouse events.</p>
  
  <p>But when I try the same functions in a touch ready device, everything is so clunky (not smooth) and the touch events do not work at all.</p>
  
  <p>This is what I have so far:</p>
  
  <p><a href="https://jsfiddle.net/nkhy0sxf/" rel="nofollow noreferrer">https://jsfiddle.net/nkhy0sxf/</a></p>
  
  <p>I tried somethign like this:</p>
  
  <pre><code>$pie.on("mousedown touchstart", function (eDown) {
  
          if($(eDown.target).is("#pie")) {
              var seeking = true;
  
              var percent = computeProgress(eDown);
              player.currentTime = percent * player.duration / 100;
  
              $(this).on("mouseup mouseout touchend", function () {
  
                  seeking = false;
              });
  
              $(this).on("mousemove touchmove", function (eMove) {
                  if(seeking == true) {
                      var percent = computeProgress(eMove);
                      player.currentTime = percent * player.duration / 100;
                  }
              });
  </code></pre>
  
  <p>But the issue that i mentioned above persists on touch ready devices.</p>
  
  <p>Can someone please advice on this issue?</p>