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.
Related
This is pretty insane. I've built a VueJS based frontend for an order recieving application. Technically I'm making an ajax call every two minutes to check for orders. If there are any orders I have it play a sound. This I've implemented by calling play on an hTML audio element.
The problem is that if the browser tab is not focused or if the user is on another tab. The sound doesn't play. I've even changed the code to instead of playing a sound file - refresh a hidden iframe that loaded the sound file. But that also doesn't seem to work if the browser is out of focus. What exactly am I missing here.
-- EDIT
My situation is that - the user would have multiple browser tabs open and the only way to alert the user would be via a unique sound that would be played. I know it can be done because there are a number of other sites that do this somehow. I'm not sure how. Is there a way to force focus back to the tab using javascript?
I want to generate a "beep" sound every minute on the web browser.
For the "every minute" thing I rely on setInterval() since there is a seconds counter and I want to update the second counter every second. I am well aware of the non-real timing facts going on but it's not a big deal in this case.
The real deal is generating a short notification sound after every 59 seconds.
I am currently doing it using the audio API.
As follows:
a=new AudioContext();
function pitar(volumen, frecuencia, duracion){
v=a.createOscillator()
u=a.createGain()
v.connect(u)
v.frequency.value=frecuencia
v.type="square"
u.connect(a.destination)
u.gain.value=volumen*0.01
v.start(a.currentTime)
v.stop(a.currentTime+duracion*0.001)
}
pitar(999,220,300);
What is the problem?
This is not working on Safari.
This is not Working on chrome on iOS.
Specific errors:
Console log says for Chrome: "The AudioContext was not allowed to start. It must be resumed (or created) after a user gesture on the page."
It basically just works as expected on Firefox.
I tried to do it by checking if the AudioContext is available in the current browser and using a base64 encoded mp3 beep when it's not, following this older way:
How do I make JavaScript beep?
But it still won't work without the user interacting (id est. clicking somewhere on the page.)
I can somehow force the user to click once, by putting a button saying something like: "Hey, let's start".
But that will enable the click only for the first time, and not for every other minute.
I thought about creating a one minute audio file with 1 second beep and 59 seconds in silence and play it on replay. But even that would be problematic, since the beep would not be synchronized with the counter.
Another solution, would be to record a video and play that on loop.
Regarding this question - Play infinitely looping video on-load in HTML5 - it also won't work since autoplay requires muted on some browsers.
Any way of hiding the controlers and creating a custom javascript play button?
Or do you know any better way to achieve this?
I've created this game using Javascript, and I play all sounds (including effects and background music) using the Audio type. It works perfectly when I run the page from my computer, but after I uploaded on my host and tried to run from the web, it started to sounds really terrible: sometimes it is delayed, sometimes it does not play at all.
I've noticed that the main problem is related to playing the same audio more than once in a short amount of time: it plays a shooting sound whenever the user clicks on the page, so usually it isn't that bad when they're not spamming their mouse, but once you start clicking many times the sounds turns out terrible.
The audio file for that particular sound is very short, and when running from my computer is has no problem even when the user is clicking very fast. Here is what the function does:
function play(aux,volume){
if(volume == undefined)
volume = 1;
if(!sound){return;}
aux.volume = globalVolume * aux.customVolume * volume;
aux.load();
aux.play();
}
So, pretty much, what it does is loading and playing the sound again whenever that function is called. That was made so it would start again even if the the function is called while the sound was still going on.
Again, this whole things works smoothly when running from my computer, but from the web it just sucks.
Q: Does anyone knows how to fix this? Or does anyone know an alternative I could use to make it work?
Suggestions are welcome as well.
Audio on the web is going through a lot of growing pains, so you might want to save yourself a bit of trouble and use Howler.js:
https://github.com/goldfire/howler.js
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.
I've been evaluating HTML5 audio on iOS 4 and have been trying to understand its limitations. From what I can tell...
It is possible to play audio in the background
It is not possible to fire JavaScript events in the background upon track completion
It is possible to fire JavaScript events while the screen is off, but Safari must be in the foreground (before turning the screen off)
My goal for this current project is to create a dynamic playlist that will continue to fire events and move to the next track even while Safari is not in the foreground. Is this possible with the current way HTML5 audio works on iOS?
I am curious about how the chaining of JavaScript events works on iOS if anyone has additional information. It seems that you are allowed to queue back to back sounds, but it must happen shortly after a "human" function happens (for example, tapping an element). Anything else that tries to queue a sound outside of this human function is denied the ability to play.
Also...
Is it even possible to have events that fire to move a real iOS application to the next track? It seems as if the application is only allowed to finish its current audio stream and then it goes into an idle state. Just trying to figure out all the angles here!
This is quite an old question, so I'm not sure if you've found an answer already or not.
One thing I know is that an audio clip cannot be played via JavaScript on mobile Safari.
Autoplay audio files on an iPad with HTML5
The only way to make audio play, is through a click event. This wasn't the case on 3.x, but on 4.x it is. This is because Apple doesn't want the webapp to download audio on a 3g connection programmatically, so they force the user to initiate it.
I would think that if all of the tracks were started downloading (cached), then it may be possible. I would try forcing the user to start one track, and at the same time call .load() on all of the other tracks (in the same click handler). This will force the iOS device to start downloading the audio tracks, and you may be able to play the next track (not sure though).