Il seguente demo mostra l'implementazione di un notifier per GMail usando jQuery e l'elemento audio di HTML5. Si tratta di una procedura semplicissima: mostriamo un tooltip e contemporaneamente facciamo suonare un beep. Per rendere l'effetto ancora più realistico, ho usato il suono predefinito dell'applicazione Google Notifier. Vediamo alcuni dettagli dell'implementazione.
Il file audio è la parte più importante del demo:
<audio controls="controls" id="beep">
<source src="jquery-gmail/beep.mp3" type="audio/mpeg" />
<source src="jquery-gmail/beep.ogv" type="audio/ogg" />
</audio>
Ovviamente l'elemento va nascosto in questo modo:
#beep {
display: block;
width: 1px;
height: 1px;
overflow: hidden;
position: absolute;
top: -1000em;
}
Con jQuery mostriamo il tooltip e facciamo suonare il nostro beep usando il metodo play() della nuova interfaccia di HTML5:
$(function() {
function notifyEmail() {
var $notification = $('#notification');
var $close = $('#close', '#notification');
var $beep = $('#beep')[0];
$close.click(function(event) {
$notification.fadeOut(1000);
event.preventDefault();
});
$notification.fadeIn(1000, function() {
$beep.play();
});
}
setTimeout(notifyEmail, 2000);
});
Ovviamente per usare tale metodo dobbiamo selezionare il controller audio come un normale elemento DOM e non come un elemento del set di jQuery.
Potete visionare l'esempio finale in questa pagina e scaricare l'esempio completo
esempio non disponibile.