We Keep Coding

Playing sound from INACTIVE browser tab

I have a control panel for restaurants and it plays an alert sound when an order is given. The problem is that when the control panel tab is not the active tab in Chrome (it's also same for Firefox) the alert sound doesn't play. After clicking the tab it plays the sound.
I see some sites (Facebook Chat, Cloudstats.me server alert, ...) play sound even if they are in inactive tab, so what is the workaround for this problem?

Had a similar thing happen to me as well, we were trying to play a marketclock when the stock market opened and closed for the day. The issue we had was we tried to load the mp3 then play it when the condition is met. So originally I had.
var bell;
// Update the clock, countdown, and tooltips as needed.
function updateClock() {
service.getMarketDate(function(data) {
if (data.soundMarketBell) {
if (!bell) {
bell = new Audio('/sounds/marketclock.mp3');
}
bell.play();
}
});
}
var intervalId = $interval(updateClock, 1000);
By moving the resource loading to happen on page load and then just calling the Audio.play it fixed the issue
var bell = new Audio('/sounds/marketclock.mp3');
// Update the clock, countdown, and tooltips as needed.
function updateClock() {
service.getMarketDate(function(data) {
if (data.soundMarketBell) {
bell.play();
}
});
}
// check for a time update every second
// to balance accuracy with performance
var intervalId = $interval(updateClock, 1000)
Browsers restrict loading resources when a tab is inactive

There's also the possibility that the audio wouldn't play because of browsers Autoplay policy.
For example, in Chrome the audio won't play until the user actively click the web page.
you may find the full list here:
https://developers.google.com/web/updates/2017/09/autoplay-policy-changes

Recording on database the time of a page view

i build a site (in PHP) where the users register and then access to reserved Powerpoint presentations. The owner told me to record the time users spend on viewing presentation, but i don't know how to display and record this kind of data. I think that JS and AJAX could help me, but i don't know what script can i use to do that.
Thank you in advice for your opinions and help.

basically you should trigger a php script when the user closes the powerpoint presentation, and this can be achieved for example opening the presentation in a modal window and force the user to click on a "close" button to terminate the presentation.
Another solution may be to open the presentation in a new window (even if is not so elegant) and use this script to trigger and action when the window onunload event is triggered:
<a>Click me!</a>
window.onclick = function() {
var win = window.open("/");
win.onload = function() {
console.log("onload");
win.onunload = function() {
alert("onunload");
}
}
}
Hope this help.

Show a alert when the user close the window when the audio is playing

I use the MediaElement.js framework to build my audio players...
But, is a podcast and is normal see users closing the window accidentally.
I'm searching for scripts to this, but absolutely nothing works.
How alert the user when he close the window with the player working...?
If is playing: ask if the user really want this.
If the player isn't playing: close the window..

Add an event as follows:
$(window).bind("beforeunload", function(evt) {//gets called before the user leaves the page
//check if audio is already running
if(isPlayingAudio()) {
//shows a confirm message asking user if they want to stay
return "Are you sure you want to leave while playing music?";
}
})
If your elements are on the page and not stored in javascript
function isPlayingAudio() {
var $playing = $('audio').filter(function(i, $audio) {//all audio not paused
return !$audio.prop('paused');
});
return $playing.length === 0;//no audio elements are playing...
}

How to check if mouse is over a notification window in Chrome?

http://developer.chrome.com/extensions/notifications.html
I need to close the notification window after X seconds only if user's mouse is not over the notification window being displayed.
var notification = webkitNotifications.createNotification(
'icon.png',
'Notification titile',
'Notification body text'
);
notification.show();
// TODO: Close notification window only if user's mouse is not over it
setTimeout(function() { notification.cancel() }, 10000);

I haven't touched Chrome extensions for a while but the last time I did, you could use a HTML file as content for the notification.
So what I'd do is:
If you can close the notification with JavaScript inside the notification, then just use the normal onmouseover/onmouseout to store in a boolean if the mouse is on the notification or not and launch the time out from within the notification as soon as it gets loaded.
If you can't do the same thing but have the notification talk to the background page to make it close the notification.

How to play a notification alert sound when the browser window is minimized and when a notification comes from the server

I have a requirement where i need to play a notification sound only when the browser window is minimized similar to what GTalk does.
I've tried it using JQuery's $(window).blur() but it only plays it when I manually blur it but not when the notifications comes and the window is blurred.
Here is the fiddle that I have tried: http://jsfiddle.net/zfUnm/
Actually this is a chat notification that i have to play only when the browser is minimized.
Thanks in advance

I think they don't play it when minimize. They will call it every time the new notification comes, but when window is active, they disable the sound.
var isactive = false;
function playSound(){
if (isactive) return;
playWav...;
}
onNotificaitonComes = playSound;
$(window).focus(function(){
isactive = true;
}).blur(function(){
isactive = false;
});
You can find out more method here Is there a way to detect if a browser window is not currently active?