0

I'm trying to do a simple thing. I want some audio to play exactly after 10 seconds when the user enters the webpage. I used the following code

var aud=new Audio("someAudio.mp3");
$(document).ready(function(){
setTimeout(function(){aud.play()}, 10000);
});

It is working perfectly fine on desktop browsers. However, the audio is not playing in some mobile browsers like Google Chrome though it is working in Firefox. What may be the possible reason for this and how to fix it? I saw some similar questions but didn't find a suitable answer. Thanks in advance

Vibhav Aggarwal
  • 3
  • 5
  • it's a new-ish security policy: touch to play. if the feature works like it's supposed to, you can't bypass it... – dandavis Jul 26 '16 at 17:43
  • But Dandavis, it is working in mobile Firefox and all desktop browsers – Vibhav Aggarwal Jul 26 '16 at 17:45
  • It doesn't look like mobile Chrome supports `Audio` yet. https://developer.mozilla.org/en-US/docs/Web/API/HTMLAudioElement – Michael Hommé Jul 26 '16 at 17:45
  • Pmahomme, can you suggest a possible alternative? – Vibhav Aggarwal Jul 26 '16 at 17:47
  • Yes i know, and it used to work in chrome mobile before they changed it a few weeks ago... – dandavis Jul 26 '16 at 17:47
  • Dandavis, it will be very kind of you if you let me know the trick – Vibhav Aggarwal Jul 26 '16 at 17:48
  • what part of `no` did i leave unclear? it CANNOT be done. give up now. – dandavis Jul 26 '16 at 17:48
  • @dandavis have a look again. This time click the Mobile tab, Chrome isn't even listed. – Michael Hommé Jul 26 '16 at 17:51
  • Can I use flash for this? – Vibhav Aggarwal Jul 26 '16 at 17:51
  • no, there is no flash on chrome mobile. :( i don't like the rule, but it must be followed.. – dandavis Jul 26 '16 at 17:53
  • @pmahomme: fair enough, the page needs updating. regardless, i assure you it's supported. ;) – dandavis Jul 26 '16 at 17:54
  • But I visited many sites on my android chrome where I was able to hear some audios like http://www.playtictactoe.org – Vibhav Aggarwal Jul 26 '16 at 17:55
  • @VibhavAggarwal: i don't hear anything on that link without touching the screen. if you touch/click, then you can use the touch event to call the audio.play() command (or something that does something that then calls the play() command, it just has to be rooted in a user interaction event) – dandavis Jul 26 '16 at 18:05
  • one sneaky way around the rule is to mute the audio, show a screen-blocking div as a "splash screen", and when they click() that splash screen to enter the page, play() the muted audio. You can then un-mute the audio and play() it again in the future from JS w/o further user interaction. – dandavis Jul 26 '16 at 18:13
  • Actually the game in the link I provided is a flash game. So, the point is flash IS supported in android chrome. Also I made another program associated with touch event to play sound but facing the same problem- working on pc not working on android. – Vibhav Aggarwal Jul 26 '16 at 18:43

1 Answers1

1

I'm trying to do a simple thing. I want some audio to play exactly after 10 seconds when the user enters the webpage.

You can't unless there has been user interaction.

Handle a click event for some element. In that event handler, play some other audio. (This audio can be silent!) After 10 seconds have passed from load, if the user has touched/clicked something, and you've done this, you should be able to play your audio file.

Brad
  • 159,648
  • 54
  • 349
  • 530