DOMException: play() can only be initiated by a user gesture

Question

I\'m working on a QRCode Reader with JavaScript. If a user is on my website, it asks for permission to use the device camera. As soon the user acce

Answer 1

To whom all that having and trying to solve this autoplay problem; it's a bit late maybe but I figured out how to solve this issue, after making few experiments. I was trying to create an endless loop for a sound which starts after play button and I wasn't wanting it with HTML autoplay attribute which was creating gap while it was repeating. Then I figured out that if i create an tag twice with same sound src and then i could setTimeout(function); to start the second one just after the end of the first and this would be a loop. This is where i faced with this play() DOMException. In desktop it was flawless but on mobile it was stopping because it was needing a gesture. Then I found out that if you play() the audio with gesture for 1 time then you would be able to pause() set currentTime = 0; and then play() again without user gesture. The code below creates an endless loop for mobile and desktop without any problem.

Here is the DEMO

HTML

  Rain

JS

$(document).ready(function(){
  var interloop;
  var aud = document.getElementById("rain");
  var audloop = document.getElementById('rainloop');
  var wplay = aud;
  $('button').click(function(){
    if(aud.paused && audloop.paused){
      audloop.play();
      audloop.pause()
      audloop.currentTime = 0;
      looper();
    } else {
      aud.pause();
      aud.currentTime = 0;
      audloop.pause();
      audloop.currentTime = 0;
      clearInterval(interloop);
    }
  });

  function looper(){
        wplay.play();
        if(wplay == aud){
        wplay = audloop;
        } else {
        wplay = aud;
        }
    interloop = setTimeout(looper, 4600);
      }

  $('#slider').slider({
    value: 100,
    slide:changevolume,
    stop:changevolume
    });

  function changevolume(){
    var val = $('#slider').slider('value');
    aud.volume = (val/100);
    audloop.volume = (val/100);
  }
});