Notificação com Audio no JavaScript
Exibir notificação usando apenas javascript
[click here for English]
Sempre precisamos da um retorno para o nosso usuário sobre alguma informação, seja um cadastro finalizado ou remoção de algo, e hoje uma das melhores formas de darmos um feedback para nossos usuários é com notificação, por tanto vamos criar uma notificação usando javascript e para ficar mais profissional vamos adicionar um áudio sempre que a notificação for chamada.
Código
Primeiro vamos criar a interface, faremos algo simples, utilizando apenas HTML
Para exibir nossa notificação, vamos criar apenas um botão.
No nosso código javascript temos nossas constantes que possuem o título da mensagem, a mensagem um ícone e um arquivo de áudio.
Para a notificação foi criado uma função chamada notifyMe que será executada sempre que clicarmos no botão.
Na função notifyMe primeiro verificamos se o browser tem suporte a notificação, depois verificamos se o usuário já permitiu ser notificado, e caso não tenha ainda permitido, então verificamos se ele também não negou e então a própria api de notificação faz o request para o usuário verificando se ele autoriza ou não o envio de notificação.
Por fim temos a função callNotify nela é exibido a notificação com o título mensagem e ícone que definimos, e ainda usamos a api de áudio do próprio browser para que sempre que esta função for chamada de play no arquivo de áudio.
pronto simples assim.
Demo
Veja abaixo o projeto completo funcionando.
Youtube
Se preferir assistir, veja o desenvolvimento no youtube.
Obrigado por ler!
Se você tiver alguma dúvida, reclamação ou dica, pode deixar aqui nos comentários. Vou ter o maior prazer em responder!
😊😊 Até mais! 😊😊
