5

Mobile browsers require user action to start play on Audio elements. The click event satisfies the requirement, but it appears that touchstart is not an acceptable initiating event in Chrome on Android or iOS. (See below)

Does anyone know where to find a precise definition of the event context required to start play.

(I was attempting to solve a UX problem using the ideas in How to prevent doubletap zoom in iOS and Android. Since posting my original question, I've found a solution that solves the UX problem without using touchstart, but I think the essential question about which events are considered to be user action is still valid.)

Addendum:

It has been suggested that I am mistaken about touchstart events, so for the record, I am providing a trivial test program. Since it requires a real music file and a mobile device, JSFiddle isn't a suitable platform (unless somebody knows how to simulate a touchstart event in a fiddle). To reproduce my observations, edit the 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, producing a popup, playing some music and updating the play time.

If I reload the page and touch the Touch button instead, I get the popup, but no music plays. The status display shows a readyState of 4 and a currentTime of 0. In other words, the touchstart event is permitted to load the audio but not to initiate play.

Since I can find no documentation on what events are meant to work, I don't know whether to consider this a Chrome bug, or intended behaviour.

gawkmeister
  • 51
  • 3
  • Yes, I did but I'm using a javascript framework (CreateJS) for this. They have perfectly explained the problem here: http://createjs.com/tutorials/Mobile%20Safe%20Approach/. Maybe you should read it, it may give you some hints on how to fix it. – Ferry Kranenburg Jun 16 '17 at 17:50
  • As far as I can see, your reference offers only the standard **onclick** solution. The question is whether any other events can start play - **touchstart** does NOT work. – gawkmeister Jun 18 '17 at 11:09
  • I think you're right. Touchstart will NOT work. I read articles of people gotten this to work on touchend, but touchend is not really the best option because it could never fire (for example when your finger moves a bit in the touchstart event). I think the only stable option to use the 'click' event. – Ferry Kranenburg Jun 22 '17 at 18:32

2 Answers2

1

When the play() method on a media element is invoked, the user agent must run the following steps https://html.spec.whatwg.org/multipage/media.html#dom-media-play

step1: if the media element is not allowed to play...

then I wonder the condition that allowed to play, it jump to here https://html.spec.whatwg.org/multipage/media.html#allowed-to-play

it says:

For example, a user agent could require that playback is triggered by user activation, but an exception could be made to allow playback while mute

then came to 'triggered-by-user-activation' here I think that's the reason:

An algorithm is triggered by user activation if any of the following conditions is true:

The task in which the algorithm is running is currently processing an activation behavior whose click event's isTrusted attribute is true.

  • change
  • click
  • contextmenu
  • dblclick
  • mouseup
  • pointerup
  • reset
  • submit
  • touchend

'touchstart' is not mentioned there.

hope that helps you.

Topppy
  • 21
  • 4
  • Seems like this list is a more theoretical. On mobile chrome the touchend event also throws the exception that media playback is not allowed. – crazy Nov 27 '20 at 10:08
0

In this page you will found answer on this question .

Use some popup or any animation nice for eye to attract user for tap .

in my memory ... android and iOS have no same behavior it is about max number of audios that we can start buffer with this trick . 

    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'

  } 


    }

If you have problems i can make you code snippet with working example !

I put in 90% in mobile web dev in event function on begin : 

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

//Sometimes even if you dont use some event its good to override : 

  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)

If you wanna you can use this library : desktop/mobile event optimise for canvas

Nikola Lukic
  • 4,001
  • 6
  • 44
  • 75
  • This seems to be answering a different question. You appear to acknowledge that an initial **click** on something is required to start the player. – gawkmeister Jun 18 '17 at 11:27
  • "touchstart is not an acceptable initiating event " this is no true . Look possibly bug track : https://stackoverflow.com/questions/2794769/manipulation-and-touch-events-not-firing-but-mouse-events-do/13610808#13610808 I always use for mobile only touch events. – Nikola Lukic Jun 18 '17 at 14:34
  • 1
    I've added my evidence to the original question. – gawkmeister Jun 21 '17 at 14:59