jQuery+HTML5声音提示

WEB应用中,有时需要播放特定的声音,比如有新消息或者在线聊天消息声音提示,以前我们通过flash实现,今天我们将使用jQuery和HTML5结合示例来实现如何把声音提示带入WEB应用中。

在本例中,我们基于一个简易的WEB在线聊天应用为背景,当输入完信息点“发送”按钮后,信息将出现在聊天框中,并发出提示声音。本例依赖jQuery,以及支持HTML5的audio技术,所以什么IE6,7,8可以洗洗先睡了。

HTML

页面主体是一个聊天框#chatBox,由上部分聊天内容区#chat和下部分内容输入操作区组成,聊天内容以列表的形式展示在#chatMessages中。

 1 <div id="chatBox">
 2   <div id="chat">
 3     <ul id="chatMessages">
 4       <li>
 5         <img src="user.gif"/><span>Hello Friends</span>
 6       </li>
 7       <li>
 8         <img src="user.gif"/><span>你好,朋友!Helloweba.com欢迎你.</span>
 9       </li>
10     </ul>
11   </div>
12   <input type="text" id="chatData" placeholder="Message" />
13   <input type="button" value=" 发送 " id="trig" />
14 </div>

CSS

我们用简单的CSS来美化HTML。

1 #chatBox{width:400px;border:1px solid #d3d3d3;margin:50px auto;}
2 #chat {max-height:220px;overflow-y:auto;max-width:400px;}
3 #chat > ul > li{padding:3px;clear:both;padding:4px;margin:10px 0px 5px 0px;overflow:auto}
4 #chatMessages{list-style:none}
5 #chatMessages > li > img{width:35px;float:left}
6 #chatMessages > li > span{width:300px;float:left;margin-left:5px}
7 #chatData{padding:5px;margin:5px;border-radius:5px;border:1px solid #999;width:300px}
8 #trig {border: 1px solid #390; color:#fff; background: #360;-webkit-border-radius: 3px;
9 -moz-border-radius:3px;padding:5px 8px; cursor:pointer}

jQuery

首先需要载入声音文件,我们使用HTML5标签<audio>,通过source预加载声音文件到页面中。关于audio的相关知识,大家可以参照本站文章: 使用HTML5的Audio标签打造WEB音频播放器

当用户在输入框中输入完信息,点击发送按钮,信息将插入到聊天内容区,并调整聊天区滚动条高度,同时播放声音,请看代码及注释。

 1 $(function(){
 2   $("#chatData").focus();//输入框获得焦点
 3   $(‘<audio id="chatAudio"><source src="notify.ogg" type="audio/ogg">
 4     <source src="notify.mp3" type="audio/mpeg"><source src="notify.wav" type="audio/wav">
 5     </audio>‘).appendTo(‘body‘);//载入声音文件
 6
 7   $("#trig").click(function(){
 8     var a = $("#chatData").val().trim();//获取输入的内容
 9     if(a.length > 0){
10       $("#chatData").val(‘‘); //清空输入框
11       $("#chatData").focus(); //获得焦点
12       $("<li></li>").html(‘<img src="qq.gif"/><span>‘+a+‘</span>‘)
13             .appendTo("#chatMessages");//将输入的内容追加的聊天区
14       $("#chat").animate({"scrollTop": $(‘#chat‘)[0].scrollHeight}, "slow");//调整滚动条
15       $(‘#chatAudio‘)[0].play(); //播放声音
16     }
17   });
18 });

最后提醒下,不要忘了在html中先载入jQuery库文件,这是很多同学问到的问题,再次提醒如果下载本站的文件后在本地运行看不到效果的,请先检查下jQuery库文件是否已经加载。helloweba.com感谢您的关注。

时间: 2024-10-02 03:36:12

jQuery+HTML5声音提示的相关文章

jQuery+HTML5声音提示—[转载]

WEB应用中,有时需要播放特定的声音,比如有新消息或者在线聊天消息声音提示,以前我们通过flash实现,今天我们将使用jQuery和HTML5结合示例来实现如何把声音提示带入WEB应用中. 在本例中,我们基于一个简易的WEB在线聊天应用为背景,当输入完信息点"发送"按钮后,信息将出现在聊天框中,并发出提示声音.本例依赖jQuery,以及支持HTML5的audio技术,所以什么IE6,7,8可以洗洗先睡了. 查看演示DEMO下载源码 HTML 页面主体是一个聊天框#chatBox,由上部

支持实现HTML5音频:嵌入简单的声音提示技巧

了解如何使用HTML音频元素嵌入在网页中的声音容易.在本教程中都包含大量的代码示例. 截至目前,在Web浏览器中的音频播放一直是位一个黑色的艺术.传统上,有几种方法可以嵌入在网页中的声音 -一些比别人更好的工作,和许多人只工作,如果你碰巧使用正确的浏览器,用正确的插件. 无处不在的Flash插件已经在很大程度上帮助,因为Flash可以很容易地嵌入音频的方式,与大多数浏览器.然而,这并不能帮助iPhone和iPad不支持Flash的浏览器,如Safari. 总之,这是一个有点乱. 幸运的是,HTM

基于jQuery Tooltips悬停提示效果

基于jQuery Tooltips悬停提示效果.这是一款基于jquery.tooltipster插件实现的jQuery Tooltips Hover effect特效.效果图如下: 在线预览   源码下载 实现的代码. html代码: <section id="facebook" style=" width:700px; margin:auto;"> <ul> <a href="http://www.w2bc.com/&quo

jquery html5 file 上传图片显示图片

最近做了一个小例子,在上传用户图像时,如何在上传图片时显示图片.在网上找了很多资料也未能如愿,如是,就用jquery ,html5,实现了,由于开发是在linux 所以未能在ie下测试,在forefox,chrom下是可以的. 一.html下的代码是: <div class=' input_box' > <span class='spac' >头</span>相:<input class="input_style" id="'head

jQuery打造智能提示插件二(可编辑下拉框)

在上一篇 jQuery打造智能提示插件 上改进,增加下拉按钮,修复点击下拉区域外不隐藏BUG 效果 下拉按钮素材: js封装,注意红色部分为BUG修复,然后传入boxwidth不带px: /* /// <reference path="jquery-autocomplete2.0.js" /> zhangs 20140516 */ (function($) { $.fn.combox = function(options) { var KEY = { UP: 38, DOW

jQuery手机号码输入提示

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title>jQuery手机号码输入提示</title

非常华丽的jQuery/HTML5应用推荐

jQuery确实是一个非常优秀的JavaScript框架,尤其是结合HTML5,更可以让网页变得生动有趣.今天向大家推荐一些非常华丽的jQuery/HTML5应用,废话不多说,直接看吧. 1.jQuery 360度图片旋转插件dopelessRotate dopelessRotate是一款基于jQuery的图片旋转插件,这款图片旋转插件功能非常强大,它不仅可以在加载的时候显示进度条,而且点击右侧的放大镜按钮可以查看原始大图,并且可以滑动鼠标来漫游大图的每一个细节.是一款非常不错的jQuery图片

Eclipse 支持 HTML&amp;JSExtJS&amp;jQuery 代码智能提示

Eclipse支持HTML&JSExtJS&jQuery代码智能提示 安装HTML插件GEF和EclipseHTMLEditor 一. GEF下载安装 进到网页http://www.eclipse.org/gef/downloads/ 点6.2M的那个.会进入下载页面http://www.eclipse.org/downloads/download.php?file=/tools/gef/downloads/drops/3.7.2/R201201171043/GEF-ALL-3.7.2.z

超炫酷的jQuery/HTML5应用效果及源码

jQuery非常强大,我们之前也用jQuery分享过很多实用的插件.HTML5可以让网页变得更加绚丽多彩,将HTML5和jQuery结合使用那将发挥更棒的效果. 今天向大家收集了一些关于HTML5和jQuery的应用及其源码,一起来看看. HTML5动感的火焰燃烧动画特效 这又是一款基于HTML5的超炫动画特效,是一款动感的火焰燃烧动画效果.这款HTML5动画火焰燃烧非常逼真. 核心jQuery代码: $( document ).ready(function() { // Set canvas