How to make audio autoplay on chrome

Question

Audio autoplay is working in Mozilla  Microsoft Edge and old Google Chrome as well but not in new Google Chrome  They have blocked the autoplay  is there any way to make it audio autoplay in Google Chrome

User · Answer

i used pixi js and pixi-sound js to achieve the auto play in chrome and firefox    lt script gt               PIXI sound Sound from               url   audios tuto mp3               loop true              preload  true              loaded  function err  sound                        sound play                 document querySelector   paused   addEventListener  click   function                 const paused   PIXI sound togglePauseAll                 this className   this className replace   b on off  g                   this className    paused    on     off                                                    lt  script gt    HTML    lt button class  btn1 btn-lg off  id  paused  gt       lt span class  glyphicon glyphicon-pause off  gt  lt  span gt       lt span class  glyphicon glyphicon-play on  gt  lt  span gt   lt  button gt    it also works on mobile devices but user have to touch somewhere on the screen to trigger the sound

User · Answer

If you re OK with enclosing the whole HTML  lt body gt  with a  lt div gt  tag  here is my solution  which works on Chrome 88 0 4324 104  the latest version as of Jan   23  2021   First  add the audio section along with a piece of script shown below at the start of  lt body gt  section   lt audio id  quot divAudio quot  gt      lt source src  quot music mp3 quot  type  quot audio mp3 quot  gt   lt  audio gt    lt script gt     var vAudio   document getElementById  quot divAudio quot       function playMusic              vAudio play          lt  script gt   Second  enclose your whole HTML  lt body gt  contents  excluding the inserted piece of code shown above  with a dummy section  lt div onmouseover  quot playMusic   quot  gt   If your HTML  lt body gt  contents are already enclosed by a global  lt div gt  section  then just add the onmouseover  quot playMusic   quot  tag in that  lt div gt   The solution works by triggering the playMusic   function by hovering over the webpage and tricks Chrome of  quot thinking quot  that the user has done something to play it  This solution also comes with the benefit that the piece of audio would only be played when the user is browsing that page

User · Answer

Use iframe instead    lt iframe id  stream  src  YOUTSOURCEAUDIOORVIDEOHERE  frameborder  0  gt  lt  iframe gt

User · Answer

The video tag can play audio as well   Given the audio tag doesn t seem to be behaving as it should be  you can just use the video tag for audio   lt video autoplay muted id  quot audio1 quot  src  quot your mp3 quot  type  quot audio mp3 quot  gt      Your browser does not support the  lt code gt video lt  code gt  element   lt  video gt   lt script gt      unmuteButton addEventListener  click   function                           if   unmuteButton innerHTML     quot unmute quot                                  unmuteButton innerHTML    quot mute quot                   audio1 muted   false                 else                   unmuteButton innerHTML    quot unmute quot                   audio1 muted   true                              lt  script gt

User · Answer

Use the Autoplay attribute in HTML to autoplay the audio or video   lt audio id  quot player quot  autoplay controls gt  lt source src  quot 0 mp3 quot  type  quot audio mp3 quot  gt  lt  audio gt

User · Answer

You may simply use   autoplay   true   as following  tested on Chrome Desktop    lt audio id  quot audioID quot  loop gt   lt source src  quot path audio mp3 quot   type  quot audio mp3 quot  gt  lt  audio gt    lt script gt  var myaudio   document getElementById  quot audioID quot   autoplay   true   lt  script gt   If you need to add stop play buttons   lt button onclick  quot play   quot  type  quot button quot  gt playbutton lt  button gt   lt button onclick  quot stop   quot  type  quot button quot  gt stopbutton lt  button gt    lt audio id  quot audioID quot  autoplay loop gt   lt source src  quot path audio mp3 quot   type  quot audio mp3 quot  gt    lt  audio gt    lt script gt  var myaudio   document getElementById  quot audioID quot     function play      return myaudio play         function stop     return myaudio pause         lt  script gt   If you want stop play to be one single button   lt button onclick  quot PlayStop   quot  type  quot button quot  gt button lt  button gt     lt audio id  quot audioID quot  autoplay loop gt   lt source src  quot path audio mp3 quot   type  quot audio mp3 quot  gt    lt  audio gt    lt script gt  var myaudio   document getElementById  quot audioID quot     function PlayStop      return myaudio paused   myaudio play     myaudio pause        lt  script gt   If you want to display stop play on the same button   lt button onclick  quot PlayStop   quot  type  quot button quot  gt Play lt  button gt     lt audio id  quot audioID quot  autoplay loop gt   lt source src  quot path audio mp3 quot   type  quot audio mp3 quot  gt    lt  audio gt    lt script gt  var myaudio   document getElementById  quot audioID quot     function PlayStop      if  elem innerText   quot Play quot         elem innerText    quot Stop quot     else       elem innerText    quot Play quot     return myaudio paused   myaudio play     myaudio pause         lt  script gt   In some browsers audio may doesn t work correctly  so as a trick try adding iframe before your code   lt iframe src  quot dummy mp3 quot  allow  quot autoplay quot  id  quot audio quot  style  quot display none quot  gt  lt  iframe gt    lt button onclick  quot PlayStop   quot  type  quot button quot  gt Play lt  button gt     lt audio id  quot audioID quot  autoplay loop gt   lt source src  quot path audio mp3 quot   type  quot audio mp3 quot  gt    lt  audio gt    lt script gt  var myaudio   document getElementById  quot audioID quot     function button      if  elem innerText   quot Play quot         elem innerText    quot Stop quot     else       elem innerText    quot Play quot     return myaudio paused   myaudio play     myaudio pause        lt  script gt

User · Answer

At least you can use this    document addEventListener  click   musicPlay   function musicPlay         document getElementById  ID   play        document removeEventListener  click   musicPlay       The music starts when the user clicks anywhere at the page   It removes also instantly the EventListener  so if you use the audio controls the user can mute or pause it and the music doesn t start again when he clicks somewhere else

User · Answer

I add controls attribute too tag audio  and simply hide it in CSS  And all works fine in Chrome    lt audio autoplay loop controls id  playAudio  gt     lt source src  audio source mp3  gt   lt  audio gt

User · Answer

Just add this small script as depicted in https   developers google com web updates 2017 09 autoplay-policy-changes webaudio   lt head gt   lt script gt  window onload   function       var context   new AudioContext       lt  script gt   lt  head gt    Than this will work as you want    lt audio autoplay gt         lt source src  hal 9000 sorry dave mp3  gt   lt  audio gt

User · Answer

As of April 2018  Chrome s autoplay policies changed    Chrome s autoplay policies are simple    Muted autoplay is always allowed    Autoplay with sound is allowed if    User has interacted with the domain  click  tap  etc    On desktop  the user s Media Engagement Index threshold has been crossed  meaning the user has previously play video with sound  On mobile  the user has added the site to his or her home screen    Also   Top frames can delegate autoplay permission to their iframes to allow autoplay with sound      Chrome s developer site has more information  including some programming examples  which can be found here  https   developers google com web updates 2017 09 autoplay-policy-changes

User · Answer

Solution  1  My solution here is to create an iframe   lt iframe src  audio source mp3  allow  autoplay  style  display none  id  iframeAudio  gt   lt  iframe gt     and audio tag aswell for non-chrome browsers   lt audio autoplay loop  id  playAudio  gt       lt source src  audio source mp3  gt   lt  audio gt    and in my script     var isChrome    Chrome  test navigator userAgent   amp  amp   Google Inc  test navigator vendor     if   isChrome             iframeAudio   remove         else             playAudio   remove      just to make sure that it will not have 2x audio in the background        Solution  2    There is also another workaround for this according to  Leonard  Create an iframe that doesn t play anything just to trigger the autoplay in the first load    lt iframe src  silence mp3  allow  autoplay  id  audio  style  display  none  gt  lt  iframe gt    good source for the mp3 file silence mp3  Then play your real audio file at ease    lt audio id  player  autoplay loop gt       lt source src  audio source mp3  type  audio mp3  gt   lt  audio gt    Personally I prefer solution  2 because it is cleaner approach for not relying so much in JavaScript   Update August 2019   Solution  3  As an alternative we can use  lt embed gt   For Firefox  It seems that audio auto-play is working so we don t need  the  lt embed gt  element because it will create double audio running      index js let audioPlaying   true      backgroundAudio  browser  browser   navigator userAgent toLowerCase        lt audio class  audio1  src  audio mp3  loop gt  lt  audio gt    prependTo  body    if   browser indexOf  firefox    gt  -1            lt embed id  background-audio  src  audio mp3  autostart  1  gt  lt  embed gt    prependTo  body        backgroundAudio   setInterval function                 background-audio   remove                lt embed id  background-audio  src  audio mp3  gt  lt  embed gt    prependTo  body           120000      120000 is the duration of your audio which in this case 2 mins      Also if you have a toggle event for your audio make sure to remove the created  lt embed gt  element for audio   Note  After your toggle  it will restart from the beginning because the  lt embed gt  is already deleted and the  lt audio gt  element will play as normal now       toggle-audio   on  click   function event        audioPlaying    audioPlaying          background-audio   remove         clearInterval backgroundAudio       if  audioPlaying               audio1   play               play audio            else               audio1   pause            And now make sure to hide these  lt audio gt  and  lt embed gt  elements  audio  embed       position  absolute      z-index  -9999      Note  diplay  none and visibility  hidden will make the  lt embed gt  element not work

User · Answer

Google changed their policies last month regarding auto-play inside Chrome  Please see this announcement   They do  however  allow auto-play if you are embedding a video and it is muted   You can add the muted property and it should allow the video to start playing    lt video autoplay controls muted gt     lt source src  movie mp4  type  video mp4  gt     lt source src  movie ogg  type  video ogg  gt    Your browser does not support the video tag   lt  video gt

User · Answer

The browsers have changed their privacy to autoplay video or audio due to Ads which is annoying  So you can just trick with below code   You can put any silent audio in the iframe    lt iframe src  youraudiofile mp3  type  audio mp3  allow  autoplay  id  audio  style  display none  gt  lt  iframe gt   lt audio autoplay gt       lt source src  youraudiofile mp3  type  audio mp3  gt   lt  audio gt    Just add an invisible iframe with an  mp3 as its source and allow  autoplay  before the audio element  As a result  the browser is tricked into starting any subsequent audio file  Or autoplay a video that isn   t muted

User · Answer

Solution without using iframe  or javascript   lt embed src  quot silence mp3 quot  type  quot audio mp3 quot  autostart  quot true quot  hidden  quot true quot  gt           lt audio id  quot player quot  autoplay controls gt  lt source src  quot source audio mp3 quot  type  quot audio mp3 quot  gt  lt  audio gt   With this solution  the open save dialog of Internet Explorer is also avoided   x000D   x000D      lt embed src  http   deinesv cf silence mp3  type  audio mp3  autostart  true  hidden  true  gt           lt audio id  player  autoplay controls gt  lt source src  https   freemusicarchive org file music ccCommunity Mild Wild a Alright Okay b See Through Mild Wild - Alright Okay mp3  type  audio mp3  gt  lt  audio gt  x000D   x000D   x000D

User · Answer

The default HTML5 audio autoplay attribute is not working in chrome  but you can force audio autoplay using JavaScript   Try this   document getElementById  myAudio   play      This works for me

User · Answer

You could use  lt iframe src  link to file mp3  allow  autoplay  gt   if the origin has an autoplay permission  More info here

User · Answer

I ve been banging away at this today  and I just wanted to add a little curiosum that I discovered to the discussion   Anyway  I ve gone off of this    lt iframe src  silence mp3  allow  autoplay  id  audio  style  display none  gt  lt  iframe gt   lt audio id  audio  autoplay gt     lt source src  helloworld mp3  gt   lt  audio gt    This    lt audio id  myAudio  src  helloworld mp3  gt  lt  audio gt   lt script type  text javascript  gt    document getElementById  myAudio   play     lt  script gt    And finally this  a  solution  that is somewhat out of bounds if you d rather just generate your own thing  which we do     lt script src  https   code responsivevoice org responsivevoice js  gt  lt  script gt   lt input onclick  responsiveVoice speak  Hello World     type  button  value  Play    gt    The discovery I ve made and also the truly funny  strange  odd  ridiculous   part is that in the case of the former two  you can actually beat the system by giving f5 a proper pounding  if you hit refresh repetetively very rapidly  some 5-10 times ought to do the trick   the audio will autoplay and then it will play a few times upon a sigle refresh only to return to it s evil ways  Fantastic   In the announcement from Google it says that for media files to play  automatically   an interaction between the user and the site must have taken place  So the best  solution  that I ve managed to come up with thus far is to add a button  rendering the playing of files less than automatic  but a lot more stable reliable

User · Answer

There is a really neat trick to use the autoplay-function of the audio tag in chrome   Add   lt iframe src  silence mp3  allow  autoplay  id  audio  gt  lt  iframe gt    whereas silence mp3 only is 0 5 seconds of silence   This    lt audio id  player  autoplay controls gt  lt source src  0 mp3  type  audio mp3  gt  lt  audio gt    works afterwards   Chrome notices that a sound has been played and gives the permission for autoplay in audio tags

User · Answer

temp fix    document  on  click     buttonStarter   function evt    var context   new AudioContext    document getElementById  audioPlayer   play        buttonStarter   hide       Game   show         Or use a custom player to trigger play http   zohararad github io audio5js   Note   Autoplay will be renabled in  31 December

[google-chrome] How to make audio autoplay on chrome

Examples related to google-chrome

Examples related to html5-audio