Develop Reference

Play audio on android but not on iphone

I got application build in vue3. Whenever a qr-code is scanned it trigger a function that plays a sound. This works fine on android and on the web but not when using the browser on ios. I cannot figure out what is wrong. Anyone who has a clue?
<qrcode-stream
:camera="camera"
#decode="onDecode"
:torch="torch"
:track="drawoutline"
>
</qrcode-stream>
Trigger the function:
async function onDecode(data) {
new Audio(require("../assets/audio.mp3")).play();
}
If i trigger it with a button it plays the audio however but not on the fly when the qr-code is detected:
<q-btn
label="play sound"
#click="onDecode('Audio')"
></q-btn>
This is very much simplified. It works fine on android and on the web however but when running it on the web on ios it wont play any audio unless you press the button. Why?

You can not automatically play audio on iOS without the user initiating it via an interaction. This is an iOS imposed limitation.
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.

How do mobile websites pause videos when other apps start playing audio?

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

Audio is unable to play via javascript on some mobile browsers

I'm trying to do a simple thing. I want some audio to play exactly after 10 seconds when the user enters the webpage. I used the following code
var aud=new Audio("someAudio.mp3");
$(document).ready(function(){
setTimeout(function(){aud.play()}, 10000);
});
It is working perfectly fine on desktop browsers. However, the audio is not playing in some mobile browsers like Google Chrome though it is working in Firefox. What may be the possible reason for this and how to fix it? I saw some similar questions but didn't find a suitable answer.
Thanks in advance

I'm trying to do a simple thing. I want some audio to play exactly after 10 seconds when the user enters the webpage.
You can't unless there has been user interaction.
Handle a click event for some element. In that event handler, play some other audio. (This audio can be silent!) After 10 seconds have passed from load, if the user has touched/clicked something, and you've done this, you should be able to play your audio file.

What are the limits of "user-initiated" play events on html5 mobile video player

It seems to be a common complaint that mobile devices won't autoplay video or audio. According to the Apple Developer Library it is disabled on purpose:
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.
What is allowed is for a direct user action to trigger the play event. My problem is that I have thumbnails of videos which when clicked load a video element in their place and need to play once they are loaded. On mobile the user has to click twice to make the video play which is not good. I am frustrated because my user actually is triggering a play action but there are a few other events which take place in between. I started testing a different user-triggered-event to see what the scope or limitations of what apple calls a "direct user action" are.
I found that this code triggered the play event:
$(".clickElement").click(function(){
$("video").get(0).play();
});
while this did not:
$(".clickElement").click(function(){
setTimeout(function(){
$("video").get(0).play();
},0);
});
the same went for different timeout durations and when setInterval was used instead.
My question is what / how does apple define a direct user action? Obviously timeouts and intervals aren't direct enough. Is there a way for me to trigger the play event "directly" from the user and allow enough time for my video element to enter the page?

Android not playing html5 audio from an interval

I'm trying to play audio using a HTML5 Audio tag on my phone.
I've loaded the sound but when I run the .play() command, nothing happens.
I made the default controls visible so that I test by pressing that play button and that one works and the sound plays.
I've also tried playing the sound by executing the javascript from the address bar and that works aswell.
The code I'm using to play looks something like this:
setInterval(function(){
if(blahblah){
document.getElementById("player").play();
}
},500);
To make sure that it even tries to play the sound, I put an alert after it, like this:
setInterval(function(){
if(blahblah){
document.getElementById("player").play();
alert("Played!");
}
},500);
I saw the alert, but no sound was played.
Thanks for any help :)

Most mobile devices will only allow you to play audio when it is the result of a user interaction. If you put your play code into a button click event, it should work (assuming you have no other bugs in the code), but the device is preventing your audio from playing from inside setInterval because it doesn't think it has the user's permission to play it.
What I do now, and I admit this is a workaround, is I play and immediately stop the audio inside my button click event, and then call setInterval. It works--for now--because the device thinks it has been granted permission to play that audio by the user, even if I trigger it later. The code inside my button click event looks like this:
document.getElementById("player").play();
document.getElementById("player").pause();
setInterval(function(){
document.getElementById("player").play();
}, 500);
Keep in mind that on mobile, it may not play nearly as smoothly as it does on your computer. Seek alternative approaches where possible.