How to create a seconds counter that beeps every minute - 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?

Related

Repeat audio on Chrome/Firefox mobile when phone is off

I wrote a small language learning app for my own use which plays audio recordings with howlerjs. The audio is played in a loop, when the end is reached, it just restarts until the user intervenes.
To the Problem: When I turn off my phone (standby) the audio file still plays - like it should - but is not restarted ones the end is reached.
Is there a JavaScript trick I can use to restart it even when my phone is off? Or can I change a setting in Chrome/Firefox to stop Chrome/Firefox from preventing a restart?
I didn't see, that howlerjs has a loop attribute, one can set to true. I always restarted the audio again via code, when it was finished. Thanks to Kaiido it works now.

How to control how much of a HTML5 video buffers?

Context
I am trying to loop several HTML5 videos one after the other. This is achieved via Javascript with an event listener listening for 'ended' - the video to end. At which point the url to the video is changed and video.play() is executed for the new URL.
For simplicity, lets say there are 2 videos that are to be (auto) played. After the second video finishes playing, it goes back to the first and plays that one (and the cycle continues). The videos will get cached on the user's device after they are first played.
TL-DR: Now what I want to achieve is to code a HTML5 video to be 'mobile friendly', in respect to mobile data plans.
I want the video to either stream when the page loads or buffer only a few seconds from after the point from where the user is watching. So if the user is 5 seconds into the video, the buffer extends to 15 seconds into the video (so 10 seconds of the video is buffered in case the network connection is weak). If the user pauses the video, the video stops buffering. Though the user won't have access to controls; they will be unable to forward, rewind or pause. I only gave the example of the user changing the point of the video to emphasise that I want control over how much the video has buffered and will buffer.
Alternatively, I want the video to stream to the user’s device. And only download that which needs to be immediately played. This is the less desirable option and is probably less desirable than leaving the video tag as it is since if the user has a dodgy connection, the video will play, stop, play, etc.
The reason for me wanting to achieve this is that I have noticed in Edge, IE, Firefox and Chrome that the video auto plays (good, that's what I want it to do) and plays while simultaneously downloading the whole video to their device (terrible). Of course this behaviour is expected, but practically, it should not do this. If users leave the site straight away, why would we want them to download a whole video they won't see?
Sort of but not entirely relevant, it doesn’t help:
HTML5 Video: Force abort of buffering
Simply put, the thread shows only hacks to hide the src and not any actual control over the buffer. I need to control the loading of the buffer in real time, relative to at what point the user is at, and not based on a 'pause' event. I would also like to know if there is a little-known supported method across most browsers (I only really need to worry about this on mobile) to achieve this, as opposed to a 'hack'.
Nevershowmyface: From what I can gather from the code, it stops the buffering every 0.5 seconds. There is no code for resuming the video? As for why this method will not work, it is not buffering relative to at what point the user is at. For all intents and purposes, it is still buffering the video in a linear fashion, without depending on a variable (the point at which the user is at). It's just doing it more slowly or 'in chunks'. If it loads another chunk just before the video runs out of video, I risk the video stopping and waiting to load again if the connection is poor.
Preload:none is useless here since the video is automatically played (notice bold auto at the top). I should have been more explicit. When the page loads, the video automatically plays. Preload loads the video before the play button is clicked on; preload:"none" does not load the video before play is clicked. But since there is no play button and the video plays once the page has loaded, it is a useless attribute.
My hopeless conclusion in regards to what should be a vital and basic feature
(not a rant)
From what I have found, there is no standardised way to achieve this and there are only ‘hacks’, as described in the post, which only serve to provide limited buffering functionality/ control in some browsers, potentially breaking other browsers and potentially having no effect in other browsers. In light of this, I’m on the verge of giving up on this task so thought I’d ask if anyone else has effectively managed to achieve this; it appears to have no support or has not even be considered in HTML5 or Javascript; I might be and hope I'm wrong – would be great to have this in Javascript.
Do other web developers not consider this when they use videos on their sites? I have spoken to other developers about this and they said the data usage from a site is not or is rarely the concern of the developer.
While I understand there are more important things to worry about, it goes without saying this would be very important for mobile users with low data plans.
Analysis:
The HTML5 audio element does not have a stop() function, nor does it
have an option where you can set the amount of data that it is allowed
to buffer, or a way of saying you want the element to stop buffering -
Don't confuse this with the 'preload' function, this only applies to
the element before the play button is clicked.
I have no clue why this is and why this functionality is not
available. If anyone can explain to me why these crucial functions are
not implemented in a standard that should make web development for
mobile phones better and more standardized I would love to know.
And before someone says the conclusion from that post was that this is currently impossible, note:
1) I am dealing with a video file, not an audio file. Slightly different context, where the file being buffered is significantly larger than an .mp3 file.
2) I am not trying to stop buffering altogether. I am trying to restrict it and keep it relative to the point of the video at which the user is at. So you could actually say I am trying to stop it but at an 'x' number of times after the point where the user's video is.

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.

predefined sections to mute in html5 audio

newbie in front end dev.
I've managed to use audio tag - really cool.
My need is to mute parts of the .wav that are predefined (for example mute between second 3 to second 8, and from second 32 to second 41) - meaning that if the user will listen to the wav, once getting to the configured sections - won't hear anything.
Is there a way to do it? or cannot be done?
Using .wav is not the most crossbrowser friendly, but it is possible to do what you want to do by monitoring the timeupdate event and when it reaches the time you want, e.g. 3 seconds, set the video's mute value to true, and then change it to false when it reaches 8 seconds.

Play sound only in one window of which is active (within one website) using javascript (possibly jquery)

Alright, I've found a bunch of answers concerning native functions like window.onblur and window.onfocus... But they won't help so I'd like to be more specific
Say you open several tabs of one website
Say you receive a message and there's a sound to announce the message
As you have several tabs opened, you will hear the sound the number of opened tabs. Which makes a how'd'u'callit symphony
Best solutions I've found so far, but which don't work
1. window.onfocus and window.onblur
2. Play sound if var infocus evaluates to true, don't play if not
3. It is crossbrowser
4. It is simple
5. It does not work
Why the best solution won't work? Say you switch focus to another tab of a different website, your website loses focus so you won't hear the sound. Even worse, say you switch to another program, then the browser itsel loses focus and you won't hear the sound
So what shall I do?
You could save the timestamp of the last onFocus() event in a JavaScript variable and in a cookie (access set to your website root). Then when you want to play the alert sound, you compare the current values of the variable and the cookie and only play the sound if those two match.
Alright, two weeks after it seems like I've found the real solution. Which actually proves that if you want to do something, don't ask for help, just do it
This is what I did:
Create a cookie with a randon id and the current time (winid + t1). The cookie is created by each opened tab on loading.
document.cookie = 'winid='+winid+t1;
Create a function which will update the current time in the set cookie, say, every 3 seconds (I kindda don't like to overflow clients, so it's 3 secs not 1). If the function finds out that the winid in the cookie and the winid of the current tab don't match and 3 secs have elapsed, then the tab was closed, redefine the primary tab inside the same function.
window.setInterval(setwinid,3000);
This is it, every time you need to, say, play a sound, you should check first, whether it is the tab which is to play it
The trick is that each tab has its own winid. But only one winid is stored in cookie, is updated and thus allows the one tab to perform actions. Pretty simple. I actually started using this method for updating messages in the box across all tabs not only for playing music
One solution would be to have a server-side solution that would play the notification only once. You don't specify how the site receives the messages, but I assume it's some form of AJAX call that gets the message from the server and the messages are saved in a database.
Add a flag to the database that signifies that the message has been sent. Set the flag the first time the user's browser queries for new messages. On the page itself play the sound only if the flag has not been set, otherwise don't play the sound. Now only the first page that fetches the message will play the sound.

Categories

Resources