How can I download and play audio clips without user interaction? - javascript

Is there a way programmatically to begin audio play before the user has interacted with the page?
With the following JavaScript:
console.log('Playing abc.');
XYZ.abc = new Audio('audio/abc.wav');
XYZ.abc.play();
I'm getting an error message,
Uncaught (in promise) DOMException: play() failed because the user didn't interact with the document first.
When I click on the page, that goes away.
Is the standard UI pattern to request the user to click to start sound, or is there a loophole to do this programmatically?
Thanks,

So what the problem is that users don't usually expect audio to come from the website, so chrome requires your audio or video element to be muted by default. For the <audio> tag, you need to add the muted attribute, so -> <audio muted>
Respectively, the js element will have a .muted property. So, what you need is XYZ.abc.muted = true;

Related

Cannot get HTML audio element to play on Chrome Android (no progress unless muted)

I'm posting this in case others have a similar problem.
I have a web app that uses the <audio> element. When the user clicks a button, I set the src attribute on the <audio> element to a URL of a mp3 file, then I call .load() and then .play(). The play() method's Promise resolves properly.
On the web, this works, I hear the music. On Android Chrome, the audio did not play:
The Play/Pause control showed the Pause icon (indicating the audio element thinks it's playing).
The progress on the track stayed frozen at the beginning 0:00.
If I muted the element, the track started playing.
If I just browsed to the URL of the mp3 file in Chrome, the audio loaded and I could play the song.
Anybody out there know why?
After a bunch of playing around and debugging, on a whim I finally removed some code I had planned to experiment with around audio context / graph:
const audioCtx = new AudioContext();
const sourceNode = audioCtx.createMediaElementSource(this.audioElem);
After remove these lines - the <audio> element played properly!

Allow Audio to Play on Page Load

I'm maintaining a legacy ASP/VBScript application for some warehouse scanners. They run Android 7 with Chrome 64. I can configure Chrome however I want so I'm not constrained like a normal website would be. Due to the nature of this web application, playing a sound on page load would improve usability (when the submitted action fails). Is there any way to allow an audio file to play on page load?
I can play sounds easily after a user interaction. However, I've tried multiple methods to play a sound on page load without success:
An <audio> tag with autoplay does not play (<audio autoplay="">).
Play the sound during the load event (Audio.play()). The returned Promise fails with the error:
NotAllowedError: play() can only be initiated by a user gesture.
Create an Audio with autoplay, and append it to body during the load event.
Create an Audio, append it to body, and .play() it during the load event. Yields the same "NotAllowedError".
Whitelisting the website for sounds in Chrome.
Ensuring the media autoplay setting is set to allowed in Chrome.
Both Chrome and Firefox, have dropped support for the autoplay attribute for both audio and video unless it's a video with the sound muted.
You can read more on that here: Autoplay Policy
However, recently I found a workaround using the Howler.js library, and it seems to work quite well in just these lines of code:
let timer, sound;
sound = new Howl({
src: ['<?= get_theme_file_uri() ?>/images/spotAudio.mp3']
});
sound.play();
You can download the library and read the docs here: https://howlerjs.com/

Video don' t start playing but instead throw DOMException

I have just created video object on fly , then add 2 attributes such as source and muted before appending the video object in the document and finally use method play() to play the added video as illustrated below.
let v = document.createElement("video");
v.setAttribute("src","videoplayback.mp4");
v.setAttribute("muted","muted");
document.body.appendChild(v);
v.play().catch((e)=>{ console.log(e)}); // it returns DomException why?
So can someone can tell me What is wrong or solve this for me .
NB :one image of the video is displayed but it is not running..
by default, not just in Chrome but also in Mozilla Firefox and other browsers the video autoplay command is being denied if the Video contains audio and is not muted.
The only way around it is a javascript forced autoplay with audio.
However if you set the video tag to muted="muted" and autoplay the video will still autoplay even if you have set your browser to not to autoplay videos onload.
It's a new feature that has been added to Google Chrome - media (e.g. videos and sounds) cannot be played before the user interacts actively with the page (click). Just add a created variable, put all your code inside a click handler, and create the video if created is false, and set created to true:
let created = false;
$(document).on("click", () => {
if (!created) {
created = true;
let v = document.createElement("video");
v.setAttribute("src","videoplayback.mp4");
v.setAttribute("muted","muted");
document.body.appendChild(v);
v.play().catch((e)=>{ console.log(e)});
}
});
This may seem obvious, however, make sure you don't have an extension installed that is preventing the video from playing. In my case, a site I recently completed has been working fine. I went back to take a look at the site and got this error message: VM476:96 Uncaught (in promise) DOMException: The play method is not allowed by the user agent.
Within a few minutes, I realized I recently installed AutoplayStopper which of course was preventing the video from running auto play.
This is because of your browser default settings. It has set not to play any Audio or video.
Firefox:
https://support.mozilla.org/en-US/kb/block-autoplay

Audio on chrome some times work sometimes not

playSound : function() {
var audio = new Audio(audio.mp3);
audio.play();
}
I am using the above code to simply play audio. But I am facing two issues below:
The sound never plays till I click on the tab (for this I go to another tab and then click the current tab). Seems it needs an event before playing sound.
Sometimes I get exception and audio never plays "Uncaught (in promise) DOMException: play() failed because the user didn't interact with the document first."
I don't want to mess with HTML element.
You're likely seeing the policy change for autoplaying media on websites issued by Chrome: https://developers.google.com/web/updates/2017/09/autoplay-policy-changes
In essence, the policy says that unless the user interacts on your media and your handler* does not start the media synchronously, it will not play.
Notice the word synchronously - you can't even use setTimeout or some such. This is to protect the user from spammy ads and alike. The other browsers have this as well, as a setting, but they might and likely will enable this by default, so you better get ready for it.
[*] - (e.g. click handler)

Android/IOS Chrome is not playing audio with HTML5 audio

I am currently using HTML5 audio to play sound on particular button in my angular app, sound is coming in desktop in all browsers, but it has problem with Android/IOS browsers.
So I tried below things:
1). First I tried to play the sound through js but it is not coming as Android/IOS chrome not allow me to use audio.play(), it always give me the error,
Uncaught (in promise) DOMException: play() can only be initiated by a user gesture.
2). Then if it is not allowing me to use audio.play, so to avoid first i created one audio element with autoplay property in html to test that audio tag is working on mobile or not, and found that it is working.
<audio id = "audio1" src="s.mp3" type="audio/mpeg" autoplay></audio>
So what i did that I created one html element of audio with autoplay property with javasript because i want audio to be play on click of button not on load.
var source = "s.mp3";
var element = document.createElement('audio');
element.setAttribute("src",source);
element.setAttribute("autoplay","");
document.body.appendChild(element);
but this is not working in mobiles chrome, looking like strange to me as I am just created the element with the same attributes as I did that in html.

Categories