关于网页消息提示音问题解决与实现

消息提示音

最近工作中需要实现网页消息提示声音的功能,所以自己就研究了下,参考了网络很多同僚的做法,各有千秋,不过都比较复杂,对初学者来说还是比较难以采用。
这里结合相关知识自己简单的记录下来:

  1. 第一步:当然我们要准备好jquery.js库文件了(http://download.csdn.net/detail/qq_33624284/9867133
  2. 实际编码:
//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> 

猜你喜欢

转载自blog.csdn.net/qq_33624284/article/details/73028535
今日推荐