All geek questions in one place

What events are acceptable for triggering HTML5 audio playback in mobile Chrome

Mobile browsers require a user action to start playing audio elements. The click event satisfies this requirement, but it seems that touchstart is not an acceptable triggering event in Chrome on Android or iOS. (See below)

Does anyone know where to find the exact definition of the context of the event needed to start playback.

(I tried to solve the UX problem with the ideas How to prevent double scaling in iOS and Android . After posting my original question, I found a solution that solves the UX problem without using touchstart , but I think that the essential question is what events are considered user actions is still valid.)

Application:

It has been suggested that I am mistaken in touchstart events , so for the record I am providing a trivial test program. Since this requires a real music file and a mobile device, JSFiddle is not a suitable platform (unless someone knows how to simulate a touchstart event in a violin). To reproduce my observations, edit javascript to load your own audio file.

<!DOCTYPE html>
<html>
<body>

<br>
<button type="button" id="but1">click</button>
<button type="button" id="but2">touch</button>
<br>
<br>
<span id="message"></span>

<script>

var e;

e = document.getElementById('but1');
e.onclick = click;
e = document.getElementById('but2');
e.ontouchstart = touchstart;

function click() {
  alert('caught click');
  play();
  event.preventDefault();
}

function touchstart() {
  alert('caught touchstart');
  play();
  event.preventDefault();
}

var p;
var t;

function play() {

  p = new Audio();
  p.src = '/k487.mp3';      //  CHANGE THIS
  p.preload = 'auto';
  p.play();

  t = setInterval(report,1000);
}

function report() {

  var s = 'Player readyState='+p.readyState+', currentTime='+p.currentTime;
  var e = document.getElementById('message');

  e.innerHTML = s;
}

</script>
</body>
</html>

When I load this page in Chrome 58 on Android 6.0.1, the Click button works as expected, creating a pop-up window, playing music and updating the playback time.

, , . readyState 4 currentTime 0. , touchstart , .

, , , Chrome .

+4
1

.

, , .

... android iOS , , .

    var EXE_JUST_ONE_TIME = false;

    document.addEventListener("touchstart" , function(e) {

    if (EXE_JUST_ONE_TIME == false){
    EXE_JUST_ONE_TIME = true;

    document.getElementById("LaserShot").play(); // need for play pause just for buffering start
    document.getElementById("LaserShot").pause();
    // now you can play programmability from js 
    document.getElementById("LaserShot_CLONE").play();
    document.getElementById("LaserShot_CLONE").pause();

    }
  else if(EXE_JUST_ONE_TIME = true){

    document.getElementById("MakeReadyotherAudio1").play();
    document.getElementById("MakeReadyotherAudio1").pause();

     EXE_JUST_ONE_TIME = 'NOMORE'

  } 


    }

, !

90% - :

   document.getElementById("myAnchor").addEventListener("click", function(event){
    event.preventDefault()
});

// - , :

  window.addEventListener('touchstart', function(e){
      e.preventDefault()

    }, false)

    window.addEventListener('touchmove', function(e){
        e.preventDefault()

    }, false)

    window.addEventListener('touchend', function(e){    
        e.preventDefault()


    }, false)

    window.addEventListener('touchleave', function(e){    
        e.preventDefault()


    }, false)
    window.addEventListener('touchcancel', function(e){    
        e.preventDefault()


    }, false)
    window.addEventListener('touchenter', function(e){    
        e.preventDefault()


    }, false)

:   /

0

Source: https://habr.com/ru/post/1679478/

More articles:


All Articles