Android/IOS Chrome is not playing audio with HTML5 audio - javascript

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.

Related

How do I force audio to autoplay on chrome and firefox?

I'm trying to add autoplaying music to a tumblr theme, but Chrome and Firefox both prevent autoplaying audio by default. How do I circumvent this?
Currently, to hear the autoplaying music, a user would have to change their personal browser settings to allow autoplay. Is there a workaround I can use to make the page play audio even if they have sound set to automatic (in Chrome) or autoplay blocked (in Firefox)?
Tumblr themes allow HTML, CSS, and Javascript, so I'd be happy for a solution using any of those. Ideally I would like my autoplay solution to allow multiple songs in a playlist, if possible.
I tried adding an invisible iframe, but that didn't work; I'm not sure whether it was the third-party audio player I'm using, or just that the iframe technique doesn't work at all anymore.
You can't circumvent auto-play from being blocked. There has to be some user interaction before the audio can play. This is the same for both HTML <audio> element as well as the web-audio API's audioContext
There's some reading about this on MDN Autoplay guide for media and Web Audio's API
You can try to play the audio on javascript onload.
Example:
HTML:
<audio controls id="horseAudio">
<source src="https://www.w3schools.com/html/horse.ogg" type="audio/ogg">
<source src="https://www.w3schools.com/html/horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
JavaScript:
window.onload = function (){
document.getElementById("horseAudio").play();
}
I do not think there is a way around autoplay being deactivated until there is user interaction. I was working on a project with similar problem and I decided to put a "begin" button on it to direct the user to click it. By clicking it (click event listener), they would have satisfied an interaction and it would then play my animations and audio.

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

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;

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

Cannot get WebAudio to play through iOS 8

I have been trying to get WebAudio working in Safari on iOS8 (i have succesfully got it working in Windows and on Android devices).
It is my understanding that you cannot automatically play webaudio through Safari on iOS, but instead you must trigger the first WebAudio call through a user action (e.g. a button press). Then once this first user-driven action is done, WebAudio will work.........Apparantly.
So i have a button set up (using JQM) like this:
Enable Audio<hr />
"PlayDing" is a function which looks like this:
function PlayDing(DingType) {
var sound = new Audio('../../UI/Audio/' + DingType + '.mp3').play();
}
The idea is that by clicking the "Enable Audio" button, this triggers a user interaction to play an mp3 file (which is just 1 second of silence) and then subsequent audio events will just work.
Any ideas why this is not working on iOS8 / Safari?
EDIT:
If i change my JQM button to play a proper ding sound, it works fine and my iPad plays the ding.
EDIT 2:
This is nothing to do with playing audio files from my iPad's music library. This is about playing files / resources that are part of the website.
"It is my understanding that you cannot automatically play webaudio through Safari on iOS, but instead you must trigger the first WebAudio call through a user action (e.g. a button press). Then once this first user-driven action is done, WebAudio will work.........Apparantly."
You are completely right about the handling of the playing. To avoid playing unwanted sounds or unwanted download of sounds onto users devices possibly using up monthly data - a soundplay has to be called in the same stack as the user's touch/click.
There are multiple of things you have to deal with to make sure all your users can reliably play the sound. One thing is it has to be downloaded before you play it. To achieve this we use a technique called preloading.
You also have to take into account that not all users support the same audio format.
An example of your HTML and Javascript could be as follows:
Javascript:
function PlayDing(DingType) {
//Get a reference to the audio element
var sound = document.getElementById(DingType);
//Play it
sound.play();
}
HTML:
<body>
<!--Declare the sounds in as many formats as possible and let the user's browser handling what sound to play & caching -->
<audio id="Silent" preload="auto">
<source src="'../../UI/Audio/silent.ogg" type="audio/ogg">
<source src="'../../UI/Audio/silent.wav" type="audio/wav">
<source src="'../../UI/Audio/silent.aac" type="audio/mpeg">
</audio>
Enable Audio
<hr />
</body>

Categories