Home > Article > Web Front-end > Detailed explanation of how to implement alarm sound effects using JavaScript

Detailed explanation of how to implement alarm sound effects using JavaScript

小云云Original: 2018-01-20 10:37:544651browse

This article mainly shares with you a piece of code based on JavaScript to implement the alarm sound effect. It is very good and has reference value. Friends who need it can refer to it. I hope it can help everyone.

Prototype diagram:

Project requirements:

After the server receives the alarm, it will push the message to the front desk (through the front end The effect of real-time message prompts - websocket long polling), after receiving the message, the front desk needs to issue an alarm sound to remind the user.

Principle:

It’s very simple. You can use the

Code snippet:

<%@ 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>

Related recommendations:

WeChat alarm function definition and usage summary

WeChat development Alarm troubleshooting

WeChat alarm Zabbix implementation detailed explanation

The above is the detailed content of Detailed explanation of how to implement alarm sound effects using JavaScript. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Detailed explanation of WeChat applet getUserInfo callbackNext article：Detailed explanation of WeChat applet getUserInfo callback

See more

Detailed explanation of how to implement alarm sound effects using JavaScript

Related articles