需求背景
- 项目开发中有时需要加上一些音效，比如专场、登录成功、回答失败、以及各种按钮音效等
代码实现
<!DOCTYPE html>
<html lang="en">
<head>
<!-- 第一个meta指定编码,IDEA新建默认就有的，与Bootstarp无关-->
<meta charset="UTF-8">
<!-- BootCDN提供了很多如JQuery、Chart.js、ECarts.js等等，只需去复制来即可
BootCDN官网地址：http://www.bootcdn.cn/-->
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
/** 音效*/
$("#hintButton").click(function () {
showSound("../audio/IOS系统提示音.m4a");
});
});
/**
* 产生音效
* @param audioSrc ：音频路径
*/
function showSound(audioSrc) {
/**因为音效元素是追加的，所以每次生成之前，将原来的删除掉*/
$("#hint").remove();
/**创建audio标签的Jquery对象，然后追加到body进行播放即可*/
let audioJQ = $("<audio src='" + audioSrc + "' autoplay id='hint'/>");
audioJQ.appendTo("body");
}
</script>
</head>
<body>
<button id="hintButton">提示音</button>
</body>
</html>
