i am looking for autoplay an audio in loop without getting blocked by browser.
Code :
<audio id="audio1" src="assest/sound/1.mp3" autoplay="" />
<script>
a = document.getElementById('audio1');
a.onended = function(){setTimeout("a.play()", 1000)}
</script>
My current code working on firefox but in default it is blocked, i have to allow autoplay manually so it can play the audio and in other side in chrome the audio is not even playing.
Edited :
Iframe code :
<iframe src="assest/sound/1.mp3" allow="autoplay" style="display:none" id="iframeAudio">
</iframe>
I have even tried iframe auto play code but it still not working with chrome. iframe code automatically trigger auto download of audio file.
Any solution for this?
WITH HTML
<audio controls autoplay loop hidden>
<source src="assest/sound/1.mp3" type="audio/mpeg">
</audio>
Please have a look at this document to know what is the problem that you're facing: https://developer.mozilla.org/en-US/docs/Web/Media/Autoplay_guide.
As described in the document:
As a general rule, you can assume that media will be allowed to autoplay only if at least one of the following is true:
The audio is muted or its volume is set to 0
The user has interacted with the site (by clicking, tapping, pressing keys, etc.)
If the site has been allowlisted; this may happen either automatically if the browser determines that the user engages with media frequently, or manually through preferences or other user interface features
If the autoplay feature policy is used to grant autoplay support to an and its document.
I think a reasonable way is to let users interact with your site first. Eg:
Show an in-page popup and the user clicks to close it;
Ask users whether they want to listen to music or not;
...
After they interacted with your site, you can run the script to play the audio without browser blocking.
Related
I have a button that redirects to a youtube video, but the video is always loaded paused. I want the video to start automatically for various reasons (try the link out). Here is my code:
<input type="button" onclick="location.href='https://www.youtube.com/watch?v=dQw4w9WgXcQ'" value="Go">
I know this is a solution with the <iframe> element, but it should work for this as well. At the end of the url, try adding the this autoplay parameter ?autoplay=1
This is not working as simple as it did once in 2021.
Nowadays modern browser block autoplay Chrome as an example
But it can be done in other ways:
If you visit youtube developer site you can see they write
Chrome's autoplay policies are simple:
Muted autoplay is always allowed.
Autoplay with sound is allowed if:
The 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 played video with sound.
The user has added the site to their home screen on mobile or installed the PWA on desktop.
Top frames can delegate autoplay permission to their iframes to allow autoplay with sound.
Autoplay example
So with that knowledge an example of a video (your video link is not working anymore) having autoplay could then be to use the embed code and mute it: for example:
https://www.youtube.com/embed/sx_G-J3lOXM?autoplay=1&mute=1
I'm getting this error when trying to play audio within componentDidMount.
'Uncaught (in promise) DOMException: play() failed because the user didn't interact with the document first.'
componentDidMount() {
document.getElementById("backgroundMusic").play();
}
<audio id="backgroundMusic">
<source src={url} type="audio/mpeg" />
Your browser does not support the audio element.
</audio>
It works fine with an onclick event. Is there any way to autoPlay audio in React? I thought I could trigger the audio to start by using onMouseOver, but ideally the music would just start without any user interaction.
Autoplay Policy Changes no longer allow autoplay without user interaction first.
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 played video with sound.
The user has added the site to their home screen on mobile or installed the PWA on desktop.
Top frames can delegate autoplay permission to their iframes to allow autoplay with sound.
The only way to bypass this would be your mouse movement implementation
The error message you've got is pretty much self-explaining. Most of the modern browsers prevent audio/video autoplay before user interaction with the page. They do so to avoid certain undesired effects for the user (for instance, a user might have maximum audio volume set & auto-playing loud audio might surprise/scare her).
There are certain hacks you can try out, but none is really guaranteed to work cross-browser.
I fixed this by catching the error and play the sound after the first click. In your code, that would be something like this:
componentDidMount() {
document.getElementById("backgroundMusic").play().catch((error) => {
document.addEventListener('click', () => {
document.getElementById("backgroundMusic").play()
}, { once: true } )
}
<audio id="backgroundMusic">
<source src={url} type="audio/mpeg" />
Your browser does not support the audio element.
</audio>
This way, you're compliant with the Autoplay Policy Changes mentioned by Halmond and you stay away from hacky solutions referenced by Igor.
I am developing a web system to monitor some values from a database, and I need to play some sound alert when a range of values is received. I've tried a lot of internet samples, but anyone works. The error returned is "uncaught (in promise) DOMException: play() failed because the user didn't interact with the document first". The last try was with the code bellow:
<audio id="myAudio" muted="muted">
<source src="./resources/sound/Alarm.mp3" type="audio/mp3">
</audio>
<script>
alert(){
let x = document.getElementById("myAudio");
if(this.percentIntegral[0]>=70 && this.percentIntegral[0]<=80){
//alert("play");
x.play();
}
}
</script>
Thank you for asking this question, I am also suffered from this issue, You can not autoplay audio because the browser needed some interaction with a user after music will autoplay. It's the security purpose of the browser.
The user didn't interact with the document first. It only works when the user interacts with a browser.
You also can not jquery click into the browser. when the user scrolls up down or clicks to any button then after audio will work.
If I link from another page in my site, they play. They look like this:
<video playsinline autoplay loop class="vf-video">
<source src="/assets/video/the-video.mp4" type="video/mp4">
</video>
When I paste in the URL and hit enter, they do not play. I even added this jQuery in a DOMContentLoaded listener:
setTimeout(function () {
$("video[autoplay]").each(function () {
console.log(this);
this.play();
});
}, 3000);
Still will not play. They play fine in FireFox. Using latest Google Chrome on OS X.
For video elements without sound disabled, they wont play without a user interaction. A click from a previous page is apparently considered a user interaction that should allow video to play. For my example, I just had to add the 'muted' to meet this criteria so the video would autoplay.
My team and I are tying to make a web application autoplay HTML5 video/audio tags on iPad. So far no luck after many attempts with CSS and JavaScript.
The question is: What other option is there to make it autoplay ?
I'm thinking native app with integrated browser with iOS API calls to simulate a touch/click and thus making the video/audio tags autoplay.
Is it possible and if yes, how and with which iOS version ?
Thanks
you can't auto-play videos and audios on iOS in normal mode, you may use trick like simulate user input to auto-play videos and audios.
Safari HTML5 Audio and Video Guide
In Safari on iOS (for all devices, including iPad), where the user may be on a cellular network and be charged per data unit, preload and autoplay are disabled. No data is loaded until the user initiates it. This means the JavaScript play() and load() methods are also inactive until the user initiates playback, unless the play() or load() method is triggered by user action. In other words, a user-initiated Play button works, but an onLoad="play()" event does not.
This plays the movie: <input type="button" value="Play" onclick="document.myMovie.play()">
This does nothing on iOS: <body onload="document.myMovie.play()">
Have you found solution for autoplay video on iOS device? If not, I've just find a solution here, you can use WeChat of iPhone to open it (just support WeChat of iPhone but not support iPad WeChat), it use video.js player, related code as below:
<video id="example_video_1" class="video-js vjs-default-skin" controls autoplay preload="auto" webkit-playsinline="true" x-webkit-airplay="true" width="750" height="460" poster="" data-setup="{}">
It also has solution for support video play without full screen on iOS/Android/PC.