Audio autoplay not working in chrome

up vote
10
down vote

favorite

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?

asked May 23 at 13:57

Akshay Rathod

611110

add a comment |

up vote
10
down vote

favorite

asked May 23 at 13:57

Akshay Rathod

611110

add a comment |

up vote
10
down vote

favorite

asked May 23 at 13:57

Akshay Rathod

611110

html5 google-chrome html5-audio

asked May 23 at 13:57

Akshay Rathod

611110

asked May 23 at 13:57

Akshay Rathod

611110

asked May 23 at 13:57

Akshay Rathod

611110

asked May 23 at 13:57

Akshay Rathod

611110

asked May 23 at 13:57

Akshay Rathod

611110

add a comment |

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.

edited Sep 24 at 7:24

answered Aug 1 at 9:46

jt25

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

add a comment |

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/

edited Sep 7 at 20:22

georgeawg

32k104865

answered Sep 7 at 20:02

Leonard Storcks

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

add a comment |

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

answered May 23 at 14:03

deltran

395

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

add a comment |

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>

answered Aug 20 at 10:34

Manuel Alves

1,5461415

add a comment |

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

answered Jul 23 at 17:06

Paul Becker

192

add a comment |

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

answered May 23 at 14:01

drpcken

2,44183271

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

add a comment |

up vote
0
down vote

Use iframe instead:

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

edited Oct 3 at 3:41

Rafael

4,24372037

answered Oct 2 at 22:25

Jessé Mendonça

add a comment |

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

answered Nov 4 at 2:49

Youssef KH

add a comment |

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>

answered 2 days ago

Yuriy Boyko

New contributor

add a comment |

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.

answered May 23 at 14:01

Martin van Houte

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

add a comment |

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.

answered Jul 24 at 10:53

Akshay Rathod

611110

add a comment |

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.

answered Sep 9 at 23:22

Fares Younis

325

add a comment |

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

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

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

Name

Required, but never shown

12 Answers
12

active

oldest

votes

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.

edited Sep 24 at 7:24

answered Aug 1 at 9:46

jt25

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

add a comment |

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.

edited Sep 24 at 7:24

answered Aug 1 at 9:46

jt25

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

add a comment |

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.

edited Sep 24 at 7:24

answered Aug 1 at 9:46

jt25

1,142830

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.

edited Sep 24 at 7:24

answered Aug 1 at 9:46

jt25

1,142830

edited Sep 24 at 7:24

answered Aug 1 at 9:46

jt25

1,142830

answered Aug 1 at 9:46

jt25

1,142830

answered Aug 1 at 9:46

jt25

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

add a comment |

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

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

add a comment |

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/

edited Sep 7 at 20:22

georgeawg

32k104865

answered Sep 7 at 20:02

Leonard Storcks

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

add a comment |

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/

edited Sep 7 at 20:22

georgeawg

32k104865

answered Sep 7 at 20:02

Leonard Storcks

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

add a comment |

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/

edited Sep 7 at 20:22

georgeawg

32k104865

answered Sep 7 at 20:02

Leonard Storcks

5112

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/

edited Sep 7 at 20:22

georgeawg

32k104865

answered Sep 7 at 20:02

Leonard Storcks

5112

edited Sep 7 at 20:22

georgeawg

32k104865

edited Sep 7 at 20:22

georgeawg

32k104865

edited Sep 7 at 20:22

georgeawg

32k104865

answered Sep 7 at 20:02

Leonard Storcks

5112

answered Sep 7 at 20:02

Leonard Storcks

5112

answered Sep 7 at 20:02

Leonard Storcks

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

add a comment |

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

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

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

add a comment |

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

answered May 23 at 14:03

deltran

395

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

add a comment |

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

answered May 23 at 14:03

deltran

395

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

add a comment |

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

answered May 23 at 14:03

deltran

395

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

answered May 23 at 14:03

deltran

395

answered May 23 at 14:03

deltran

395

answered May 23 at 14:03

deltran

395

answered May 23 at 14:03

deltran

395

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

add a comment |

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

add a comment |

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>

answered Aug 20 at 10:34

Manuel Alves

1,5461415

add a comment |

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>

answered Aug 20 at 10:34

Manuel Alves

1,5461415

add a comment |

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>

answered Aug 20 at 10:34

Manuel Alves

1,5461415

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>

answered Aug 20 at 10:34

Manuel Alves

1,5461415

answered Aug 20 at 10:34

Manuel Alves

1,5461415

answered Aug 20 at 10:34

Manuel Alves

1,5461415

answered Aug 20 at 10:34

Manuel Alves

1,5461415

add a comment |

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

answered Jul 23 at 17:06

Paul Becker

192

add a comment |

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

answered Jul 23 at 17:06

Paul Becker

192

add a comment |

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

answered Jul 23 at 17:06

Paul Becker

192

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

answered Jul 23 at 17:06

Paul Becker

192

answered Jul 23 at 17:06

Paul Becker

192

answered Jul 23 at 17:06

Paul Becker

192

answered Jul 23 at 17:06

Paul Becker

192

add a comment |

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

answered May 23 at 14:01

drpcken

2,44183271

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

add a comment |

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

answered May 23 at 14:01

drpcken

2,44183271

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

add a comment |

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

answered May 23 at 14:01

drpcken

2,44183271

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

answered May 23 at 14:01

drpcken

2,44183271

answered May 23 at 14:01

drpcken

2,44183271

answered May 23 at 14:01

drpcken

2,44183271

answered May 23 at 14:01

drpcken

2,44183271

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

add a comment |

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

add a comment |

up vote
0
down vote

Use iframe instead:

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

edited Oct 3 at 3:41

Rafael

4,24372037

answered Oct 2 at 22:25

Jessé Mendonça

add a comment |

up vote
0
down vote

Use iframe instead:

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

edited Oct 3 at 3:41

Rafael

4,24372037

answered Oct 2 at 22:25

Jessé Mendonça

add a comment |

up vote
0
down vote

Use iframe instead:

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

edited Oct 3 at 3:41

Rafael

4,24372037

answered Oct 2 at 22:25

Jessé Mendonça

Use iframe instead:

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

edited Oct 3 at 3:41

Rafael

4,24372037

answered Oct 2 at 22:25

Jessé Mendonça

edited Oct 3 at 3:41

Rafael

4,24372037

edited Oct 3 at 3:41

Rafael

4,24372037

edited Oct 3 at 3:41

Rafael

4,24372037

answered Oct 2 at 22:25

Jessé Mendonça

answered Oct 2 at 22:25

Jessé Mendonça

answered Oct 2 at 22:25

Jessé Mendonça

add a comment |

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

answered Nov 4 at 2:49

Youssef KH

add a comment |

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

answered Nov 4 at 2:49

Youssef KH

add a comment |

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

answered Nov 4 at 2:49

Youssef KH

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

answered Nov 4 at 2:49

Youssef KH

answered Nov 4 at 2:49

Youssef KH

answered Nov 4 at 2:49

Youssef KH

answered Nov 4 at 2:49

Youssef KH

add a comment |

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>

answered 2 days ago

Yuriy Boyko

New contributor

add a comment |

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>

answered 2 days ago

Yuriy Boyko

New contributor

add a comment |

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>

answered 2 days ago

Yuriy Boyko

New contributor

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>

answered 2 days ago

Yuriy Boyko

New contributor

answered 2 days ago

Yuriy Boyko

New contributor

answered 2 days ago

Yuriy Boyko

answered 2 days ago

Yuriy Boyko

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.

add a comment |

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.

answered May 23 at 14:01

Martin van Houte

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

add a comment |

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.

answered May 23 at 14:01

Martin van Houte

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

add a comment |

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.

answered May 23 at 14:01

Martin van Houte

242418

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

answered May 23 at 14:01

Martin van Houte

242418

answered May 23 at 14:01

Martin van Houte

242418

answered May 23 at 14:01

Martin van Houte

242418

answered May 23 at 14:01

Martin van Houte

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

add a comment |

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

add a comment |

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.

answered Jul 24 at 10:53

Akshay Rathod

611110

add a comment |

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.

answered Jul 24 at 10:53

Akshay Rathod

611110

add a comment |

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.

answered Jul 24 at 10:53

Akshay Rathod

611110

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.

answered Jul 24 at 10:53

Akshay Rathod

611110

answered Jul 24 at 10:53

Akshay Rathod

611110

answered Jul 24 at 10:53

Akshay Rathod

611110

answered Jul 24 at 10:53

Akshay Rathod

611110

add a comment |

up vote
-1
down vote

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.

answered Sep 9 at 23:22

Fares Younis

325

add a comment |

up vote
-1
down vote

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.

answered Sep 9 at 23:22

Fares Younis

325

add a comment |

up vote
-1
down vote

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.

answered Sep 9 at 23:22

Fares Younis

325

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.

answered Sep 9 at 23:22

Fares Younis

325

answered Sep 9 at 23:22

Fares Younis

325

answered Sep 9 at 23:22

Fares Younis

325

answered Sep 9 at 23:22

Fares Younis

325

add a comment |

draft saved

draft discarded

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Qfyilyi