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.
Related
Background:
To trigger a sound in a webpage notification under iOS safari
Fact:
I realized that safari doesn't allow sound to play without DOM interaction according to its autoplay audio policy. User has to interact with DOM after first loading of the application in someway to play sounds.
setInterval(function(){
if(condition)
sound.play();
}.bind(this), 1000);
Works:
Plan B would be the iOS safari push notification but currently it is not released until 2023 later.
I would like to seek for your advice the solution or alternative to implement a sound trigger webpage under a scheduled interval in webpage.
Thanks.
You can play any sound after the first DOM interaction. So for example, make the user click a button, like the login button, and play one (silent) sound. After that, you are free to make sounds on interval.
If I refresh a URL audio playing works but for the next time onwards its not playing(its playing randomly). I used phaser framework with Javascript.
Here is my code:
function OtpAudio(product)
{
game.load.audio('theme',
['../../../product_assets/'+product+'/audio/eng/OTP.mp3'
]);
var music = game.sound.add('theme');
music.play();
console.log(music);
}
I am trying to call the above function multiple times but it works only for the first time as I mentioned. Please help me on this.
I asume the first time the music plays is after clicking a link or so. And It doesn't play when you reload the site.
The reason is that, browser prevent playing audio without user interaction.
If you check the browser console you can see an error like:
DOMException: play() failed because the user didn't interact with the document first. ...
To prevent this you can check in the create function if this.sound.locked==true, this would mean sound cannot be played, and than you can prompt the user to click/touch/interact/... with the browser, and on the next interaction you start the sound.
Details to the sound locked documentation: https://photonstorm.github.io/phaser3-docs/Phaser.Sound.WebAudioSoundManager.html#locked__anchor
An alternative simpler approach would be to check on any user event, if the audio is playing. importaint check if music.isPlaying == false and this.sound.locked==false and if both match you can call music.play() the music.
game.sound.add('theme', { loop: true });
You can use the above code if you want to play music in a loop.
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.
There seems to be an issue with the SoundCloud SDK when used on any mobile browsers. The track doesn't play until I pause and then resume.
SC.stream(trackInfo.url,function(sound){
sound.play();
});
Is this a known issue/behavior? I first thought it's an issue with Android, but I got the same behavior when tested on an iPhone.
EDITED
I thought this might be an async loading issue, but even if I don't call sound.play() right away and have it triggered by user clicking play, it still doesn't work. I have to call play > pause > resume. The good news is that once user take these actions, all subsequent tracks in the custom playlist (non-SoundCloud) can continuously play without any user having to take any actions.
Ok, it seems like the issue is the async loading after more testing. User has to explicitly click play after it's loaded. I got a little thrown off before because there was an unrelated issue that was causing the pause/resume effect. Once user has triggered the action, it's able to play all tracks without any further action from user.
I'm building a winstore app and building a skip-able intro (dynamically added it through JavaScript code).
However, if i skip it and set
this.video.pause();
in the button click function, even though the video is paused, the sound of the video is still trailing for a few sec before it stopped.
How could i make the sound stop right there with the images?
It's just weird that the video is already paused but the sound still can be heard when it should've been paused too (the video contain mp4 and mp3 in it).
It's weird because if a video is really paused it off the image and sound.
You can try this following command (it cut the sound) :
this.video.setAttribute("muted", "muted");
But it's not the solution because pause() method should work, so checks if you don't have 2 videos elements in your page.