I'm building a quiz app, basically, I want a sound to start playing when a user enters the web page to start playing the quiz.
I tried using javascript to activate sound on page load but the browser does not allow it, it says:
Autoplay is only allowed when approved by the user.
I tried to use jquery to auto click a button to start sound but it does not still work.
const themeSound = new Audio("theme.mp3");
themeSound.play();
broswer error: Uncaught (in promise) DOMException: play() failed
because the user didn't interact with the document first.
but if I put the function in a button and I press the button the sound plays perfectly.
This restriction is placed on you by the browser.
For example, in chrome, 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.
Disable this feature all together by launching with the autoplay-policy parameter chrome.exe --autoplay-policy=no-user-gesture-required.
Source: https://developers.google.com/web/updates/2017/09/autoplay-policy-changes
Related
I want to play audio as an alert but I'm getting an error like "Uncaught (in promise) DOMException: play() failed because the user didn't interact with the document first.
HTML Code:
<audio id="alarm" src="alarm.mp3"></audio>
JavaScript Code:
function alarm() {
var value = document.getElementById("rvoltage").innerHTML;
if (value > 230) {
document.getElementById('alarm').play();
}
}
That is due to the fact that many browsers do not allow HTML elements to autoplay music and videos on page-load to save bandwidth etc. You could create a button and play the music on a click event or hack your way around it to make it play on any click event on your page.
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 their home screen].
https://developers.google.com/web/updates/2017/09/autoplay-policy-changes
Some mobile sites, like YouTube and Twitch, will pause html <video> elements if other apps (like Spotify, or a podcast player that puts media controls in the notifications) start to play audio.
Interestingly, these don't just take audio focus - they also stop playing if they can't obtain it. As an example, I'm using firefox for android, so I tried disabling its ability to take audio focus with adb:
cmd appops set org.mozilla.firefox TAKE_AUDIO_FOCUS ignore
But now, videos just immediately pause, since it can't pause the other audio source.
How do the sites detect this? I attached a debugger to my phone and looked through the docs but I didn't see anything in either place.
I'm not sure about how this specific flag "TAKE_AUDIO_FOCUS" is interpretted, but modern Android focus management is based on "requesting" (not taking) audio focus. Apps would request it and either get it immediately or listen for updates from the AudioManager as to whether they got it. Similarly they will get updates when someone else requests (and then subsequently receives) focus, and they should react accordingly (i.e. pause/duck themselves). Presumably the apps you mention have asked for audioFocus and were denied it and then hadn't received focus yet, so they just chose to stay paused rather than start playing audio/video and blare out over the app that hadn't released focus yet.
source: https://developer.android.com/guide/topics/media-apps/audio-focus
I would play an audio file (on loop) after I open my website.
I know browsers have restrictions about autoplay, but is it possible to autoplay any audio using JavaScript?
Thank you!
There currently isn't any guaranteed way; MDN has the following general guidance:
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 whitelisted; 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.
Otherwise, the playback will likely be blocked. The exact situations that result in blocking, and the specifics of how sites become whitelisted vary from browser to browser, but the above are good guidelines to go by.
Current policies of Chrome and Safari are that you can not just play audio once the page has loaded (unless it's muted).
Chrome has the following policies:
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.
Safari has the following guidance regarding autoplay:
Websites should assume any use of or requires a user gesture click to play.
It’s important to detect if auto-play was denied, since users now have the ability to turn off all forms of auto-play, including silent videos.
Auto-play restrictions are granted on a per-element basis.
I am trying to make an HTML5 video autoplay (in muted condition) in the popup in the page. The popup is hidden when page is loaded. When user tries to go out of page (from top), it shows video popup with AutoPlay & muted ON. Then I tried to play video with JavaScript but it gives this error: play() failed because the user didn't interact with the document first.
It works fine if I click somewhere on page or if developer panel is open before the video popup is displayed. I am using Flow Player, and issue only in Google Chrome (works fine on FF).
Can you please give any ideas on how to overcome this?
Thanks, J
Google Chrome has updated the autoplay policies.
URL for reference
According to new behaviours:
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.
Top frames can delegate autoplay permission to their iframes to allow autoplay with sound.
In the following fiddle there are external controls for the youtube player. They work fine on desktop browsers, however in a mobile browser the play button fails to start the playback of the video.
https://jsfiddle.net/wittjosiah/oLxv6ep2/
According to the Apple Developer Library:
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.
However, in this scenario the play() method is user-triggered but is still failing to initiated playback on both the iPhone simulator and my iPhone 6S.
Am I missing something? Is there a reason this isn't working? Youtube's mobile site initiates playback from a user-action so it must be possible. Any help is appreciated.
YT.Player does not guarantee that playVideo() will work in all mobile environments.
Try setting the preference MediaPlaybackRequiresUserAction to true