recherche

Maison >interface Web >js tutoriel >Explication détaillée de la façon d'implémenter des effets sonores d'alarme à l'aide de JavaScript

Explication détaillée de la façon d'implémenter des effets sonores d'alarme à l'aide de JavaScript

小云云
小云云original
2018-01-20 10:37:544664parcourir

Cet article partage principalement avec vous un morceau de code basé sur JavaScript pour implémenter l'effet sonore d'alarme. Il est très bon et a une valeur de référence. Les amis qui en ont besoin peuvent s'y référer.

Prototype :

Exigences du projet :

Après avoir reçu l'alarme, le serveur transmettra le message à la réception (via le front-end L'effet des invites de message en temps réel - interrogation longue de websocket), après avoir reçu le message, la réception doit émettre une alarme sonore pour le rappeler à l'utilisateur.

Principe :

C'est très simple. Vous pouvez utiliser la balise

Extrait de code : 

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
<audio autoplay="autoplay" id="auto" src=""></audio>
<input type="button" value="点击播放" onclick="playSound(&#39;http://data.huiyi8.com/2017/gha/03/17/1702.mp3&#39;)">
</body>
<script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
<script>
 $(function(){
 function playSound(src) {
 var auto = $("#auto");
 auto.attr("src",src);
 }
 })

</script>
</html>
</script>
</html>

Recommandations associées :

Résumé de la définition et de l'utilisation de la fonction d'alarme WeChat

Développement WeChat du dépannage des alarmes

Explication détaillée de la mise en œuvre de Zabbix d'alarme WeChat

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Explication détaillée du rappel getUserInfo de l'applet WeChatArticle suivant：Explication détaillée du rappel getUserInfo de l'applet WeChat

Articles Liés

Voir plus