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?
