Audio autoplay not working in chrome











up vote
10
down vote

favorite
5












audio autoplay 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?










share|improve this question


























    up vote
    10
    down vote

    favorite
    5












    audio autoplay 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?










    share|improve this question
























      up vote
      10
      down vote

      favorite
      5









      up vote
      10
      down vote

      favorite
      5






      5





      audio autoplay 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?










      share|improve this question













      audio autoplay 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?







      html5 google-chrome html5-audio






      share|improve this question













      share|improve this question











      share|improve this question




      share|improve this question










      asked May 23 at 13:57









      Akshay Rathod

      611110




      611110
























          12 Answers
          12






          active

          oldest

          votes

















          up vote
          22
          down vote













          Solution #1



          My solution here is to create an iframe



          <iframe src="audio/source.mp3" allow="autoplay" style="display:none" id="iframeAudio">
          </iframe>


          and audio tag aswell for non-chrome browsers



          <audio autoplay loop  id="playAudio">
          <source src="audio/source.mp3">
          </audio>


          and in my script



            var isChrome = /Chrome/.test(navigator.userAgent) && /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.



          <iframe src="silence.mp3" allow="autoplay" id="audio" style="display:none"></iframe>


          good source for the mp3 file from @Neil silence.mp3



          Then play your real audio file at ease.



          <audio id="player" autoplay loop>
          <source src="audio/source.mp3" type="audio/mp3">
          </audio>


          Personally I prefer solution #2 because it is cleaner approach for not relying so much in JavaScript.






          share|improve this answer



















          • 2




            this should be the answer! works like a charm for me. Thanks
            – Believer
            Aug 4 at 1:17










          • How do you make the audio loop?
            – Kwarrtz
            Aug 18 at 4:34


















          up vote
          5
          down vote













          There is a really neat trick to use the autoplay-function of the audio tag in chrome.



          Add



          <iframe src="silence.mp3" allow="autoplay" id="audio"></iframe>


          whereas silence.mp3 only is 0.5 seconds of silence.



          This



          <audio id="player" autoplay controls><source src="0.mp3" type="audio/mp3"></audio>


          works afterwards.



          Chrome notices that a sound has been played and gives the permission for autoplay in audio tags.



          See it in action: http://deinesv.cf/






          share|improve this answer



















          • 1




            OK, while this does work it also feels like it's exploiting a bug, or at the very least, unintended behaviour. I imagine someone will report this to Google so I wouldn't rely on it working for long. Nice find though!
            – Neil Bryson
            Sep 10 at 9:02






          • 2




            Slightly off topic, but your silence.mp3 is quite large at 36.7k. Try this (216 bytes) - s3-eu-west-1.amazonaws.com/neilbryson.net.random/silence.mp3
            – Neil Bryson
            Sep 10 at 9:13


















          up vote
          3
          down vote













          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






          share|improve this answer





















          • so you are saying there not way we can autoplay the audio in chrome browser?
            – Akshay Rathod
            May 24 at 6:03


















          up vote
          3
          down vote













          Just add this small script as depicted in https://developers.google.com/web/updates/2017/09/autoplay-policy-changes#webaudio



          <head>
          <script>
          window.onload = function() {
          var context = new AudioContext();
          }
          </script>
          </head>


          Than this will work as you want:



          <audio autoplay>
          <source src="hal_9000_sorry_dave.mp3">
          </audio>





          share|improve this answer




























            up vote
            1
            down vote













            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..






            share|improve this answer




























              up vote
              0
              down vote













              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.



              <video autoplay controls muted>
              <source src="movie.mp4" type="video/mp4">
              <source src="movie.ogg" type="video/ogg">
              Your browser does not support the video tag.
              </video





              share|improve this answer





















              • i want audio to play in background.
                – Akshay Rathod
                May 24 at 6:02


















              up vote
              0
              down vote













              Use iframe instead:



              <iframe id="stream" src="YOUTSOURCEAUDIOORVIDEOHERE" frameborder="0"></iframe>





              share|improve this answer






























                up vote
                0
                down vote













                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






                share|improve this answer




























                  up vote
                  0
                  down vote













                  I add controls attribute too tag audio, and simply hide it in CSS.
                  And all works fine in Chrome.



                  <audio autoplay loop controls id="playAudio">
                  <source src="audio/source.mp3">
                  </audio>





                  share|improve this answer








                  New contributor




                  Yuriy Boyko is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
                  Check out our Code of Conduct.

























                    up vote
                    -1
                    down vote













                    You could use <iframe src="link/to/file.mp3" allow="autoplay">, if the origin has an autoplay permission. More info here.






                    share|improve this answer





















                    • it is showing controls and i don't want anything on the page. just play and pause button.
                      – Akshay Rathod
                      May 24 at 5:57










                    • and how to loop the audio?
                      – Akshay Rathod
                      May 24 at 6:17


















                    up vote
                    -1
                    down vote













                    i used pixi.js and pixi-sound.js to achieve the auto play in chrome and firefox.



                    <script>

                    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';

                    });
                    }
                    });

                    </script>


                    HTML:



                    <button class="btn1 btn-lg off" id="paused">
                    <span class="glyphicon glyphicon-pause off"></span>
                    <span class="glyphicon glyphicon-play on"></span>
                    </button>


                    it also works on mobile devices but user have to touch somewhere on the screen to trigger the sound.






                    share|improve this answer




























                      up vote
                      -1
                      down vote













                      As I observed, that autoplay attribute has been removed, HTML5 is not supporting Autoplay option anymore, even if you check the official HTML5 documentation, you will not find anything related to autoplay, as they have removed it from the documentation.



                      Reference:
                      W3Schools. (2018, 09 07). HTML5 Audio. Retrieved from www.w3schools.com: https://www.w3schools.com/html/html5_audio.asp



                      There alternative solutions by using javascript.






                      share|improve this answer





















                        Your Answer






                        StackExchange.ifUsing("editor", function () {
                        StackExchange.using("externalEditor", function () {
                        StackExchange.using("snippets", function () {
                        StackExchange.snippets.init();
                        });
                        });
                        }, "code-snippets");

                        StackExchange.ready(function() {
                        var channelOptions = {
                        tags: "".split(" "),
                        id: "1"
                        };
                        initTagRenderer("".split(" "), "".split(" "), channelOptions);

                        StackExchange.using("externalEditor", function() {
                        // Have to fire editor after snippets, if snippets enabled
                        if (StackExchange.settings.snippets.snippetsEnabled) {
                        StackExchange.using("snippets", function() {
                        createEditor();
                        });
                        }
                        else {
                        createEditor();
                        }
                        });

                        function createEditor() {
                        StackExchange.prepareEditor({
                        heartbeatType: 'answer',
                        convertImagesToLinks: true,
                        noModals: true,
                        showLowRepImageUploadWarning: true,
                        reputationToPostImages: 10,
                        bindNavPrevention: true,
                        postfix: "",
                        imageUploader: {
                        brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
                        contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
                        allowUrls: true
                        },
                        onDemand: true,
                        discardSelector: ".discard-answer"
                        ,immediatelyShowMarkdownHelp:true
                        });


                        }
                        });














                         

                        draft saved


                        draft discarded


















                        StackExchange.ready(
                        function () {
                        StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f50490304%2faudio-autoplay-not-working-in-chrome%23new-answer', 'question_page');
                        }
                        );

                        Post as a guest















                        Required, but never shown

























                        12 Answers
                        12






                        active

                        oldest

                        votes








                        12 Answers
                        12






                        active

                        oldest

                        votes









                        active

                        oldest

                        votes






                        active

                        oldest

                        votes








                        up vote
                        22
                        down vote













                        Solution #1



                        My solution here is to create an iframe



                        <iframe src="audio/source.mp3" allow="autoplay" style="display:none" id="iframeAudio">
                        </iframe>


                        and audio tag aswell for non-chrome browsers



                        <audio autoplay loop  id="playAudio">
                        <source src="audio/source.mp3">
                        </audio>


                        and in my script



                          var isChrome = /Chrome/.test(navigator.userAgent) && /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.



                        <iframe src="silence.mp3" allow="autoplay" id="audio" style="display:none"></iframe>


                        good source for the mp3 file from @Neil silence.mp3



                        Then play your real audio file at ease.



                        <audio id="player" autoplay loop>
                        <source src="audio/source.mp3" type="audio/mp3">
                        </audio>


                        Personally I prefer solution #2 because it is cleaner approach for not relying so much in JavaScript.






                        share|improve this answer



















                        • 2




                          this should be the answer! works like a charm for me. Thanks
                          – Believer
                          Aug 4 at 1:17










                        • How do you make the audio loop?
                          – Kwarrtz
                          Aug 18 at 4:34















                        up vote
                        22
                        down vote













                        Solution #1



                        My solution here is to create an iframe



                        <iframe src="audio/source.mp3" allow="autoplay" style="display:none" id="iframeAudio">
                        </iframe>


                        and audio tag aswell for non-chrome browsers



                        <audio autoplay loop  id="playAudio">
                        <source src="audio/source.mp3">
                        </audio>


                        and in my script



                          var isChrome = /Chrome/.test(navigator.userAgent) && /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.



                        <iframe src="silence.mp3" allow="autoplay" id="audio" style="display:none"></iframe>


                        good source for the mp3 file from @Neil silence.mp3



                        Then play your real audio file at ease.



                        <audio id="player" autoplay loop>
                        <source src="audio/source.mp3" type="audio/mp3">
                        </audio>


                        Personally I prefer solution #2 because it is cleaner approach for not relying so much in JavaScript.






                        share|improve this answer



















                        • 2




                          this should be the answer! works like a charm for me. Thanks
                          – Believer
                          Aug 4 at 1:17










                        • How do you make the audio loop?
                          – Kwarrtz
                          Aug 18 at 4:34













                        up vote
                        22
                        down vote










                        up vote
                        22
                        down vote









                        Solution #1



                        My solution here is to create an iframe



                        <iframe src="audio/source.mp3" allow="autoplay" style="display:none" id="iframeAudio">
                        </iframe>


                        and audio tag aswell for non-chrome browsers



                        <audio autoplay loop  id="playAudio">
                        <source src="audio/source.mp3">
                        </audio>


                        and in my script



                          var isChrome = /Chrome/.test(navigator.userAgent) && /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.



                        <iframe src="silence.mp3" allow="autoplay" id="audio" style="display:none"></iframe>


                        good source for the mp3 file from @Neil silence.mp3



                        Then play your real audio file at ease.



                        <audio id="player" autoplay loop>
                        <source src="audio/source.mp3" type="audio/mp3">
                        </audio>


                        Personally I prefer solution #2 because it is cleaner approach for not relying so much in JavaScript.






                        share|improve this answer














                        Solution #1



                        My solution here is to create an iframe



                        <iframe src="audio/source.mp3" allow="autoplay" style="display:none" id="iframeAudio">
                        </iframe>


                        and audio tag aswell for non-chrome browsers



                        <audio autoplay loop  id="playAudio">
                        <source src="audio/source.mp3">
                        </audio>


                        and in my script



                          var isChrome = /Chrome/.test(navigator.userAgent) && /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.



                        <iframe src="silence.mp3" allow="autoplay" id="audio" style="display:none"></iframe>


                        good source for the mp3 file from @Neil silence.mp3



                        Then play your real audio file at ease.



                        <audio id="player" autoplay loop>
                        <source src="audio/source.mp3" type="audio/mp3">
                        </audio>


                        Personally I prefer solution #2 because it is cleaner approach for not relying so much in JavaScript.







                        share|improve this answer














                        share|improve this answer



                        share|improve this answer








                        edited Sep 24 at 7:24

























                        answered Aug 1 at 9:46









                        jt25

                        1,142830




                        1,142830








                        • 2




                          this should be the answer! works like a charm for me. Thanks
                          – Believer
                          Aug 4 at 1:17










                        • How do you make the audio loop?
                          – Kwarrtz
                          Aug 18 at 4:34














                        • 2




                          this should be the answer! works like a charm for me. Thanks
                          – Believer
                          Aug 4 at 1:17










                        • How do you make the audio loop?
                          – Kwarrtz
                          Aug 18 at 4:34








                        2




                        2




                        this should be the answer! works like a charm for me. Thanks
                        – Believer
                        Aug 4 at 1:17




                        this should be the answer! works like a charm for me. Thanks
                        – Believer
                        Aug 4 at 1:17












                        How do you make the audio loop?
                        – Kwarrtz
                        Aug 18 at 4:34




                        How do you make the audio loop?
                        – Kwarrtz
                        Aug 18 at 4:34












                        up vote
                        5
                        down vote













                        There is a really neat trick to use the autoplay-function of the audio tag in chrome.



                        Add



                        <iframe src="silence.mp3" allow="autoplay" id="audio"></iframe>


                        whereas silence.mp3 only is 0.5 seconds of silence.



                        This



                        <audio id="player" autoplay controls><source src="0.mp3" type="audio/mp3"></audio>


                        works afterwards.



                        Chrome notices that a sound has been played and gives the permission for autoplay in audio tags.



                        See it in action: http://deinesv.cf/






                        share|improve this answer



















                        • 1




                          OK, while this does work it also feels like it's exploiting a bug, or at the very least, unintended behaviour. I imagine someone will report this to Google so I wouldn't rely on it working for long. Nice find though!
                          – Neil Bryson
                          Sep 10 at 9:02






                        • 2




                          Slightly off topic, but your silence.mp3 is quite large at 36.7k. Try this (216 bytes) - s3-eu-west-1.amazonaws.com/neilbryson.net.random/silence.mp3
                          – Neil Bryson
                          Sep 10 at 9:13















                        up vote
                        5
                        down vote













                        There is a really neat trick to use the autoplay-function of the audio tag in chrome.



                        Add



                        <iframe src="silence.mp3" allow="autoplay" id="audio"></iframe>


                        whereas silence.mp3 only is 0.5 seconds of silence.



                        This



                        <audio id="player" autoplay controls><source src="0.mp3" type="audio/mp3"></audio>


                        works afterwards.



                        Chrome notices that a sound has been played and gives the permission for autoplay in audio tags.



                        See it in action: http://deinesv.cf/






                        share|improve this answer



















                        • 1




                          OK, while this does work it also feels like it's exploiting a bug, or at the very least, unintended behaviour. I imagine someone will report this to Google so I wouldn't rely on it working for long. Nice find though!
                          – Neil Bryson
                          Sep 10 at 9:02






                        • 2




                          Slightly off topic, but your silence.mp3 is quite large at 36.7k. Try this (216 bytes) - s3-eu-west-1.amazonaws.com/neilbryson.net.random/silence.mp3
                          – Neil Bryson
                          Sep 10 at 9:13













                        up vote
                        5
                        down vote










                        up vote
                        5
                        down vote









                        There is a really neat trick to use the autoplay-function of the audio tag in chrome.



                        Add



                        <iframe src="silence.mp3" allow="autoplay" id="audio"></iframe>


                        whereas silence.mp3 only is 0.5 seconds of silence.



                        This



                        <audio id="player" autoplay controls><source src="0.mp3" type="audio/mp3"></audio>


                        works afterwards.



                        Chrome notices that a sound has been played and gives the permission for autoplay in audio tags.



                        See it in action: http://deinesv.cf/






                        share|improve this answer














                        There is a really neat trick to use the autoplay-function of the audio tag in chrome.



                        Add



                        <iframe src="silence.mp3" allow="autoplay" id="audio"></iframe>


                        whereas silence.mp3 only is 0.5 seconds of silence.



                        This



                        <audio id="player" autoplay controls><source src="0.mp3" type="audio/mp3"></audio>


                        works afterwards.



                        Chrome notices that a sound has been played and gives the permission for autoplay in audio tags.



                        See it in action: http://deinesv.cf/







                        share|improve this answer














                        share|improve this answer



                        share|improve this answer








                        edited Sep 7 at 20:22









                        georgeawg

                        32k104865




                        32k104865










                        answered Sep 7 at 20:02









                        Leonard Storcks

                        5112




                        5112








                        • 1




                          OK, while this does work it also feels like it's exploiting a bug, or at the very least, unintended behaviour. I imagine someone will report this to Google so I wouldn't rely on it working for long. Nice find though!
                          – Neil Bryson
                          Sep 10 at 9:02






                        • 2




                          Slightly off topic, but your silence.mp3 is quite large at 36.7k. Try this (216 bytes) - s3-eu-west-1.amazonaws.com/neilbryson.net.random/silence.mp3
                          – Neil Bryson
                          Sep 10 at 9:13














                        • 1




                          OK, while this does work it also feels like it's exploiting a bug, or at the very least, unintended behaviour. I imagine someone will report this to Google so I wouldn't rely on it working for long. Nice find though!
                          – Neil Bryson
                          Sep 10 at 9:02






                        • 2




                          Slightly off topic, but your silence.mp3 is quite large at 36.7k. Try this (216 bytes) - s3-eu-west-1.amazonaws.com/neilbryson.net.random/silence.mp3
                          – Neil Bryson
                          Sep 10 at 9:13








                        1




                        1




                        OK, while this does work it also feels like it's exploiting a bug, or at the very least, unintended behaviour. I imagine someone will report this to Google so I wouldn't rely on it working for long. Nice find though!
                        – Neil Bryson
                        Sep 10 at 9:02




                        OK, while this does work it also feels like it's exploiting a bug, or at the very least, unintended behaviour. I imagine someone will report this to Google so I wouldn't rely on it working for long. Nice find though!
                        – Neil Bryson
                        Sep 10 at 9:02




                        2




                        2




                        Slightly off topic, but your silence.mp3 is quite large at 36.7k. Try this (216 bytes) - s3-eu-west-1.amazonaws.com/neilbryson.net.random/silence.mp3
                        – Neil Bryson
                        Sep 10 at 9:13




                        Slightly off topic, but your silence.mp3 is quite large at 36.7k. Try this (216 bytes) - s3-eu-west-1.amazonaws.com/neilbryson.net.random/silence.mp3
                        – Neil Bryson
                        Sep 10 at 9:13










                        up vote
                        3
                        down vote













                        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






                        share|improve this answer





















                        • so you are saying there not way we can autoplay the audio in chrome browser?
                          – Akshay Rathod
                          May 24 at 6:03















                        up vote
                        3
                        down vote













                        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






                        share|improve this answer





















                        • so you are saying there not way we can autoplay the audio in chrome browser?
                          – Akshay Rathod
                          May 24 at 6:03













                        up vote
                        3
                        down vote










                        up vote
                        3
                        down vote









                        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






                        share|improve this 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







                        share|improve this answer












                        share|improve this answer



                        share|improve this answer










                        answered May 23 at 14:03









                        deltran

                        395




                        395












                        • so you are saying there not way we can autoplay the audio in chrome browser?
                          – Akshay Rathod
                          May 24 at 6:03


















                        • so you are saying there not way we can autoplay the audio in chrome browser?
                          – Akshay Rathod
                          May 24 at 6:03
















                        so you are saying there not way we can autoplay the audio in chrome browser?
                        – Akshay Rathod
                        May 24 at 6:03




                        so you are saying there not way we can autoplay the audio in chrome browser?
                        – Akshay Rathod
                        May 24 at 6:03










                        up vote
                        3
                        down vote













                        Just add this small script as depicted in https://developers.google.com/web/updates/2017/09/autoplay-policy-changes#webaudio



                        <head>
                        <script>
                        window.onload = function() {
                        var context = new AudioContext();
                        }
                        </script>
                        </head>


                        Than this will work as you want:



                        <audio autoplay>
                        <source src="hal_9000_sorry_dave.mp3">
                        </audio>





                        share|improve this answer

























                          up vote
                          3
                          down vote













                          Just add this small script as depicted in https://developers.google.com/web/updates/2017/09/autoplay-policy-changes#webaudio



                          <head>
                          <script>
                          window.onload = function() {
                          var context = new AudioContext();
                          }
                          </script>
                          </head>


                          Than this will work as you want:



                          <audio autoplay>
                          <source src="hal_9000_sorry_dave.mp3">
                          </audio>





                          share|improve this answer























                            up vote
                            3
                            down vote










                            up vote
                            3
                            down vote









                            Just add this small script as depicted in https://developers.google.com/web/updates/2017/09/autoplay-policy-changes#webaudio



                            <head>
                            <script>
                            window.onload = function() {
                            var context = new AudioContext();
                            }
                            </script>
                            </head>


                            Than this will work as you want:



                            <audio autoplay>
                            <source src="hal_9000_sorry_dave.mp3">
                            </audio>





                            share|improve this answer












                            Just add this small script as depicted in https://developers.google.com/web/updates/2017/09/autoplay-policy-changes#webaudio



                            <head>
                            <script>
                            window.onload = function() {
                            var context = new AudioContext();
                            }
                            </script>
                            </head>


                            Than this will work as you want:



                            <audio autoplay>
                            <source src="hal_9000_sorry_dave.mp3">
                            </audio>






                            share|improve this answer












                            share|improve this answer



                            share|improve this answer










                            answered Aug 20 at 10:34









                            Manuel Alves

                            1,5461415




                            1,5461415






















                                up vote
                                1
                                down vote













                                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..






                                share|improve this answer

























                                  up vote
                                  1
                                  down vote













                                  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..






                                  share|improve this answer























                                    up vote
                                    1
                                    down vote










                                    up vote
                                    1
                                    down vote









                                    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..






                                    share|improve this 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..







                                    share|improve this answer












                                    share|improve this answer



                                    share|improve this answer










                                    answered Jul 23 at 17:06









                                    Paul Becker

                                    192




                                    192






















                                        up vote
                                        0
                                        down vote













                                        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.



                                        <video autoplay controls muted>
                                        <source src="movie.mp4" type="video/mp4">
                                        <source src="movie.ogg" type="video/ogg">
                                        Your browser does not support the video tag.
                                        </video





                                        share|improve this answer





















                                        • i want audio to play in background.
                                          – Akshay Rathod
                                          May 24 at 6:02















                                        up vote
                                        0
                                        down vote













                                        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.



                                        <video autoplay controls muted>
                                        <source src="movie.mp4" type="video/mp4">
                                        <source src="movie.ogg" type="video/ogg">
                                        Your browser does not support the video tag.
                                        </video





                                        share|improve this answer





















                                        • i want audio to play in background.
                                          – Akshay Rathod
                                          May 24 at 6:02













                                        up vote
                                        0
                                        down vote










                                        up vote
                                        0
                                        down vote









                                        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.



                                        <video autoplay controls muted>
                                        <source src="movie.mp4" type="video/mp4">
                                        <source src="movie.ogg" type="video/ogg">
                                        Your browser does not support the video tag.
                                        </video





                                        share|improve this 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.



                                        <video autoplay controls muted>
                                        <source src="movie.mp4" type="video/mp4">
                                        <source src="movie.ogg" type="video/ogg">
                                        Your browser does not support the video tag.
                                        </video






                                        share|improve this answer












                                        share|improve this answer



                                        share|improve this answer










                                        answered May 23 at 14:01









                                        drpcken

                                        2,44183271




                                        2,44183271












                                        • i want audio to play in background.
                                          – Akshay Rathod
                                          May 24 at 6:02


















                                        • i want audio to play in background.
                                          – Akshay Rathod
                                          May 24 at 6:02
















                                        i want audio to play in background.
                                        – Akshay Rathod
                                        May 24 at 6:02




                                        i want audio to play in background.
                                        – Akshay Rathod
                                        May 24 at 6:02










                                        up vote
                                        0
                                        down vote













                                        Use iframe instead:



                                        <iframe id="stream" src="YOUTSOURCEAUDIOORVIDEOHERE" frameborder="0"></iframe>





                                        share|improve this answer



























                                          up vote
                                          0
                                          down vote













                                          Use iframe instead:



                                          <iframe id="stream" src="YOUTSOURCEAUDIOORVIDEOHERE" frameborder="0"></iframe>





                                          share|improve this answer

























                                            up vote
                                            0
                                            down vote










                                            up vote
                                            0
                                            down vote









                                            Use iframe instead:



                                            <iframe id="stream" src="YOUTSOURCEAUDIOORVIDEOHERE" frameborder="0"></iframe>





                                            share|improve this answer














                                            Use iframe instead:



                                            <iframe id="stream" src="YOUTSOURCEAUDIOORVIDEOHERE" frameborder="0"></iframe>






                                            share|improve this answer














                                            share|improve this answer



                                            share|improve this answer








                                            edited Oct 3 at 3:41









                                            Rafael

                                            4,24372037




                                            4,24372037










                                            answered Oct 2 at 22:25









                                            Jessé Mendonça

                                            1




                                            1






















                                                up vote
                                                0
                                                down vote













                                                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






                                                share|improve this answer

























                                                  up vote
                                                  0
                                                  down vote













                                                  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






                                                  share|improve this answer























                                                    up vote
                                                    0
                                                    down vote










                                                    up vote
                                                    0
                                                    down vote









                                                    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






                                                    share|improve this 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







                                                    share|improve this answer












                                                    share|improve this answer



                                                    share|improve this answer










                                                    answered Nov 4 at 2:49









                                                    Youssef KH

                                                    1




                                                    1






















                                                        up vote
                                                        0
                                                        down vote













                                                        I add controls attribute too tag audio, and simply hide it in CSS.
                                                        And all works fine in Chrome.



                                                        <audio autoplay loop controls id="playAudio">
                                                        <source src="audio/source.mp3">
                                                        </audio>





                                                        share|improve this answer








                                                        New contributor




                                                        Yuriy Boyko is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
                                                        Check out our Code of Conduct.






















                                                          up vote
                                                          0
                                                          down vote













                                                          I add controls attribute too tag audio, and simply hide it in CSS.
                                                          And all works fine in Chrome.



                                                          <audio autoplay loop controls id="playAudio">
                                                          <source src="audio/source.mp3">
                                                          </audio>





                                                          share|improve this answer








                                                          New contributor




                                                          Yuriy Boyko is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
                                                          Check out our Code of Conduct.




















                                                            up vote
                                                            0
                                                            down vote










                                                            up vote
                                                            0
                                                            down vote









                                                            I add controls attribute too tag audio, and simply hide it in CSS.
                                                            And all works fine in Chrome.



                                                            <audio autoplay loop controls id="playAudio">
                                                            <source src="audio/source.mp3">
                                                            </audio>





                                                            share|improve this answer








                                                            New contributor




                                                            Yuriy Boyko is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
                                                            Check out our Code of Conduct.









                                                            I add controls attribute too tag audio, and simply hide it in CSS.
                                                            And all works fine in Chrome.



                                                            <audio autoplay loop controls id="playAudio">
                                                            <source src="audio/source.mp3">
                                                            </audio>






                                                            share|improve this answer








                                                            New contributor




                                                            Yuriy Boyko is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
                                                            Check out our Code of Conduct.









                                                            share|improve this answer



                                                            share|improve this answer






                                                            New contributor




                                                            Yuriy Boyko is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
                                                            Check out our Code of Conduct.









                                                            answered 2 days ago









                                                            Yuriy Boyko

                                                            11




                                                            11




                                                            New contributor




                                                            Yuriy Boyko is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
                                                            Check out our Code of Conduct.





                                                            New contributor





                                                            Yuriy Boyko is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
                                                            Check out our Code of Conduct.






                                                            Yuriy Boyko is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
                                                            Check out our Code of Conduct.






















                                                                up vote
                                                                -1
                                                                down vote













                                                                You could use <iframe src="link/to/file.mp3" allow="autoplay">, if the origin has an autoplay permission. More info here.






                                                                share|improve this answer





















                                                                • it is showing controls and i don't want anything on the page. just play and pause button.
                                                                  – Akshay Rathod
                                                                  May 24 at 5:57










                                                                • and how to loop the audio?
                                                                  – Akshay Rathod
                                                                  May 24 at 6:17















                                                                up vote
                                                                -1
                                                                down vote













                                                                You could use <iframe src="link/to/file.mp3" allow="autoplay">, if the origin has an autoplay permission. More info here.






                                                                share|improve this answer





















                                                                • it is showing controls and i don't want anything on the page. just play and pause button.
                                                                  – Akshay Rathod
                                                                  May 24 at 5:57










                                                                • and how to loop the audio?
                                                                  – Akshay Rathod
                                                                  May 24 at 6:17













                                                                up vote
                                                                -1
                                                                down vote










                                                                up vote
                                                                -1
                                                                down vote









                                                                You could use <iframe src="link/to/file.mp3" allow="autoplay">, if the origin has an autoplay permission. More info here.






                                                                share|improve this answer












                                                                You could use <iframe src="link/to/file.mp3" allow="autoplay">, if the origin has an autoplay permission. More info here.







                                                                share|improve this answer












                                                                share|improve this answer



                                                                share|improve this answer










                                                                answered May 23 at 14:01









                                                                Martin van Houte

                                                                242418




                                                                242418












                                                                • it is showing controls and i don't want anything on the page. just play and pause button.
                                                                  – Akshay Rathod
                                                                  May 24 at 5:57










                                                                • and how to loop the audio?
                                                                  – Akshay Rathod
                                                                  May 24 at 6:17


















                                                                • it is showing controls and i don't want anything on the page. just play and pause button.
                                                                  – Akshay Rathod
                                                                  May 24 at 5:57










                                                                • and how to loop the audio?
                                                                  – Akshay Rathod
                                                                  May 24 at 6:17
















                                                                it is showing controls and i don't want anything on the page. just play and pause button.
                                                                – Akshay Rathod
                                                                May 24 at 5:57




                                                                it is showing controls and i don't want anything on the page. just play and pause button.
                                                                – Akshay Rathod
                                                                May 24 at 5:57












                                                                and how to loop the audio?
                                                                – Akshay Rathod
                                                                May 24 at 6:17




                                                                and how to loop the audio?
                                                                – Akshay Rathod
                                                                May 24 at 6:17










                                                                up vote
                                                                -1
                                                                down vote













                                                                i used pixi.js and pixi-sound.js to achieve the auto play in chrome and firefox.



                                                                <script>

                                                                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';

                                                                });
                                                                }
                                                                });

                                                                </script>


                                                                HTML:



                                                                <button class="btn1 btn-lg off" id="paused">
                                                                <span class="glyphicon glyphicon-pause off"></span>
                                                                <span class="glyphicon glyphicon-play on"></span>
                                                                </button>


                                                                it also works on mobile devices but user have to touch somewhere on the screen to trigger the sound.






                                                                share|improve this answer

























                                                                  up vote
                                                                  -1
                                                                  down vote













                                                                  i used pixi.js and pixi-sound.js to achieve the auto play in chrome and firefox.



                                                                  <script>

                                                                  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';

                                                                  });
                                                                  }
                                                                  });

                                                                  </script>


                                                                  HTML:



                                                                  <button class="btn1 btn-lg off" id="paused">
                                                                  <span class="glyphicon glyphicon-pause off"></span>
                                                                  <span class="glyphicon glyphicon-play on"></span>
                                                                  </button>


                                                                  it also works on mobile devices but user have to touch somewhere on the screen to trigger the sound.






                                                                  share|improve this answer























                                                                    up vote
                                                                    -1
                                                                    down vote










                                                                    up vote
                                                                    -1
                                                                    down vote









                                                                    i used pixi.js and pixi-sound.js to achieve the auto play in chrome and firefox.



                                                                    <script>

                                                                    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';

                                                                    });
                                                                    }
                                                                    });

                                                                    </script>


                                                                    HTML:



                                                                    <button class="btn1 btn-lg off" id="paused">
                                                                    <span class="glyphicon glyphicon-pause off"></span>
                                                                    <span class="glyphicon glyphicon-play on"></span>
                                                                    </button>


                                                                    it also works on mobile devices but user have to touch somewhere on the screen to trigger the sound.






                                                                    share|improve this answer












                                                                    i used pixi.js and pixi-sound.js to achieve the auto play in chrome and firefox.



                                                                    <script>

                                                                    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';

                                                                    });
                                                                    }
                                                                    });

                                                                    </script>


                                                                    HTML:



                                                                    <button class="btn1 btn-lg off" id="paused">
                                                                    <span class="glyphicon glyphicon-pause off"></span>
                                                                    <span class="glyphicon glyphicon-play on"></span>
                                                                    </button>


                                                                    it also works on mobile devices but user have to touch somewhere on the screen to trigger the sound.







                                                                    share|improve this answer












                                                                    share|improve this answer



                                                                    share|improve this answer










                                                                    answered Jul 24 at 10:53









                                                                    Akshay Rathod

                                                                    611110




                                                                    611110






















                                                                        up vote
                                                                        -1
                                                                        down vote













                                                                        As I observed, that autoplay attribute has been removed, HTML5 is not supporting Autoplay option anymore, even if you check the official HTML5 documentation, you will not find anything related to autoplay, as they have removed it from the documentation.



                                                                        Reference:
                                                                        W3Schools. (2018, 09 07). HTML5 Audio. Retrieved from www.w3schools.com: https://www.w3schools.com/html/html5_audio.asp



                                                                        There alternative solutions by using javascript.






                                                                        share|improve this answer

























                                                                          up vote
                                                                          -1
                                                                          down vote













                                                                          As I observed, that autoplay attribute has been removed, HTML5 is not supporting Autoplay option anymore, even if you check the official HTML5 documentation, you will not find anything related to autoplay, as they have removed it from the documentation.



                                                                          Reference:
                                                                          W3Schools. (2018, 09 07). HTML5 Audio. Retrieved from www.w3schools.com: https://www.w3schools.com/html/html5_audio.asp



                                                                          There alternative solutions by using javascript.






                                                                          share|improve this answer























                                                                            up vote
                                                                            -1
                                                                            down vote










                                                                            up vote
                                                                            -1
                                                                            down vote









                                                                            As I observed, that autoplay attribute has been removed, HTML5 is not supporting Autoplay option anymore, even if you check the official HTML5 documentation, you will not find anything related to autoplay, as they have removed it from the documentation.



                                                                            Reference:
                                                                            W3Schools. (2018, 09 07). HTML5 Audio. Retrieved from www.w3schools.com: https://www.w3schools.com/html/html5_audio.asp



                                                                            There alternative solutions by using javascript.






                                                                            share|improve this answer












                                                                            As I observed, that autoplay attribute has been removed, HTML5 is not supporting Autoplay option anymore, even if you check the official HTML5 documentation, you will not find anything related to autoplay, as they have removed it from the documentation.



                                                                            Reference:
                                                                            W3Schools. (2018, 09 07). HTML5 Audio. Retrieved from www.w3schools.com: https://www.w3schools.com/html/html5_audio.asp



                                                                            There alternative solutions by using javascript.







                                                                            share|improve this answer












                                                                            share|improve this answer



                                                                            share|improve this answer










                                                                            answered Sep 9 at 23:22









                                                                            Fares Younis

                                                                            325




                                                                            325






























                                                                                 

                                                                                draft saved


                                                                                draft discarded



















































                                                                                 


                                                                                draft saved


                                                                                draft discarded














                                                                                StackExchange.ready(
                                                                                function () {
                                                                                StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f50490304%2faudio-autoplay-not-working-in-chrome%23new-answer', 'question_page');
                                                                                }
                                                                                );

                                                                                Post as a guest















                                                                                Required, but never shown





















































                                                                                Required, but never shown














                                                                                Required, but never shown












                                                                                Required, but never shown







                                                                                Required, but never shown

































                                                                                Required, but never shown














                                                                                Required, but never shown












                                                                                Required, but never shown







                                                                                Required, but never shown







                                                                                Popular posts from this blog

                                                                                What visual should I use to simply compare current year value vs last year in Power BI desktop

                                                                                How to ignore python UserWarning in pytest?

                                                                                Alexandru Averescu