消息提示音
最近工作中需要实现网页消息提示声音的功能,所以自己就研究了下,参考了网络很多同僚的做法,各有千秋,不过都比较复杂,对初学者来说还是比较难以采用。
这里结合相关知识自己简单的记录下来:
- 第一步:当然我们要准备好jquery.js库文件了(http://download.csdn.net/detail/qq_33624284/9867133)
- 实际编码:
//jq实现
<script type="text/javascript">
$(function(){
$('<audio id="chatAudio"><source src="music/123.mp3" type="audio/mpeg"></audio>').appendTo('body');//audio 表示音频,把这个内容添加到页面body中
$("#trig").click(function(){
$('#chatAudio')[0].play();//'#chatAudio'在这个区域里的第一个资源文件
});
});
</script>
body中:
<input type="button" value=" 发送 " id="trig" />
触发按钮即可实现声音了,下面拓展内容:
我们如果想实现循环播放呢?
$(function(){
$('<audio id="chatAudio"><source src="music/lieren.mp3" type="audio/mpeg"></audio>').appendTo('body');
var circulation;
//计时器
$("#circulation").click(function(){
circulation = setInterval("$('#chatAudio')[0].play()", 1000);
return true;
});
//清除计时器
$("#clear").click(function(){
clearInterval(circulation);
});
});
下面把简单的完整代码贴出来:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>提示音</title>
<script type="text/javascript" src="js/jquery.min.js"></script>
</head>
<script type="text/javascript">
//点击播放
// $(function(){
// $('<audio id="chatAudio"><source src="music/123.mp3" type="audio/mpeg"></audio>').appendTo('body');
// $("#trig").click(function(){
// $('#chatAudio')[0].play();
// });
// });
//循环播放
$(function(){
$('<audio id="chatAudio"><source src="music/lieren.mp3" type="audio/mpeg"></audio>').appendTo('body');
var circulation;
//计时器
$("#circulation").click(function(){
circulation = setInterval("$('#chatAudio')[0].play()", 1000);
return true;
});
//清除计时器
$("#clear").click(function(){
clearInterval(circulation);
});
});
</script>
</head>
<body>
<center>
<input type="button" value=" 点击 " id="trig" /><br /><br />
<input type="button" value=" 循环 " id="circulation" /><br /><br />
<input type="button" value=" 停止 " id="clear" /><br /><br />
</center>
</body>
</html>