html 消息通知声音,ajax实现web页面的消息实时提醒时播放提示音

在应用系统的开发过程中,经常要使用到新消息的提醒功能,比如说后台有一个告警消息,web页面就会实时的收到这个告警的消息,且发出提示音。

这其实就是涉及到两个方面的知识,一个是http实时消息的推送,在这儿我就不做升入的探讨,我的下一篇文章将进行升入的探讨,这儿我就主要就主要探讨的是实时播放提示音,这儿我用到的是HTML5中的

标签的属性

属性

描述

autoplay

autoplay

如果出现该属性,则音频在就绪后马上播放

controls

controls

如果出现该属性,则向用户显示控件,比如播放按钮。

loop

loop

如果出现该属性,则每当音频结束时重新开始播放。

preload

preload

如果出现该属性,则音频在页面加载时进行加载,并预备播放

如果使用 "autoplay",则忽略该属性。。

src

url

要播放的音频的 URL。

由于我们的播放声音要用js控制,我们查阅w3school可以看到以下的内容,

0818b9ca8b590ca3270a3433284dd417.png

关于audio的详细网址如下:

http://www.w3school.com.cn/tags/html_ref_audio_video_dom.asp

1.第一个尝试的方法

可以看到我们只要调用play()函数就可以播放音频文件了,所以代码如下:

HTML>

function autoPlay(){

var myAuto = document.getElementById('myaudio');

myAuto.play();

}

看似只要点击就会播放声音,但是有个bug,只要点击按钮就会播放声音,但是有个问题是一首歌没播放完,你就点击,他是没有反应,不会再从头播放,只到把这个播放完了才又开始。

而且在这而没有问题,加到项目中在谷歌浏览器下,要刷新两次,才能实现每次点击,播放音乐。

2.改进

后来根据其属性进行了改进,因为有一个autoplay属性,这样每次点击的时候,我们让其src指向我们的音乐文件,这样就可以实现每次点击就从头播放音乐文件了,代码如下:

HTML>

function autoPlay(){

var myAuto = document.getElementById('myaudio');

myAuto.src="abc.mp3"; //注意这儿是所指向的src,然后下面有一个autoplay属性,只要准备就绪,就播放,所以每次从头开始,因为每次从服务器下载过来就播放

}

最后贴一下我的ajax实现的web页面的消息实时提醒提示音的综合代码如下:

ajax实现的长轮询

function longPolling()

{

$.ajax({

type:"POST",

url:"/nms/push",

timeout:30000,  //超时时间30秒,30秒内没有完成请求,则取消请求然后error回调函数会被调用

success:function(data,textStatus){  //返回的回调函数

if(textStatus=="success")//状态码为200,完全成功才响起提示音

{

playsound();

}

//也有状态码为204,也是success回调函数,但是textStatus==nocontent

longPolling();     //再发起一个连接请求

},

error:function(XMLHttpRequest, textStatus, errorThrow){

if(textStatus=="timeout")  //请求超时

{

longPolling();

}

else      // 其他错误,如网络错误等

{

longPolling();

}

}

});

}

//响起提示音

function playsound()

{

var myAuto = document.getElementById('myaudio');

myAuto.src="/sound/abc.mp3";

}

下一篇文章将会总结http推送技术前端的探讨。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/368664.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

元素的居中方式总结

最近有点空闲时间,所以想好好看看几个一直没机会看的问题。把它写下来,是促进自己更好地理解,同时也是一个备忘吧! 先说元素居中,元素居中,从最开始接触前端就一直挥之不去的一个问题,也许是太…

Man方法

Main方法相当一个主线程,JVM会自动寻找class文件中的main方法并执行(请思考tomcat加载java web项目启动的线程数和每次tomcat服务器接收到请求,是不是要发起一个线程去处理) 以下的例子展现了Main主线程中启动了两个分支线程(mTh1和mTh2) pac…

八、网络服务集群

概述 neutron-server 接收和路由API请求到合适的OpenStack网络插件,以达到预想的目的。 5.1、控制节点安装 5.1.1、先决条件 在你配置OpenStack网络(neutron)服务之前,你必须为其创建一个数据库,服务凭证和API端点。 1…

JArchitect对Java开源贡献者免费

JArchitect是用于Java代码库的静态分析工具,它提供交互式GUI和HTML报告,用于查找代码中过于复杂或有问题的区域,执行分析以重构并比较随时间的变化。 在版本3中,添加了类似LINQ的查询语言,该工具使该工具成为功能极其强…

android让一个控件跟上面控件对其,学个明白--Android控件架构

Android控件架构1.什么是View?View是Android中所有控件的基类。View是界面层的控件的一种抽象,它代表了一个控件。在Android中每个控件都会在界面中占得一块矩形的区域。在Android中控件被分为两类:View和ViewGroup。ViewGroup控件作为父控件…

分享一个自制的计算子网划分的小工具

使用 javascirpt 写的&#xff0c;因此可以使用浏览器浏览即可 code: <meta charset"utf-8">输入划分网段的数量&#xff1a; <input id"inp_netCount" /> <input type"button" οnclick"createElem()" value"sta…

每个Java开发人员应拥有的持久断点

当开发人员使用Java进行工作时&#xff0c;即使您尝试调试其他内容&#xff0c;也总是会遇到一些失败的情况。 这是应该在每个IDE中启用的持久断点的列表。 &#xff08;恕我直言&#xff09; 是的&#xff0c;从理论上讲&#xff0c;您应该能够从良好的日志记录实现中获得此信…

tmux颜色高亮跟vim不一致的情况

安装完tmux之后&#xff0c;按照网上大神的配置&#xff0c;稍微配置了下~/.tmux.conf&#xff1a; # 改变快捷键前缀 unbind C-b set -g prefix C-a # 绑定配置加载按键 bind r source-file ~/.tmux.conf \; display-message "Config reloaded.."# 设置终端类型为2…

html5表白页面3d,七夕节表白3d相册制作(html5+css3)

七夕节表白3d相册制作涉及知识点定位阴影3d转换动画主要思路&#xff1a;通过定位将所有照片叠在一起&#xff0c;在设置默认的样式以及照片的布局&#xff0c;最后通过设置盒子以及照片的旋转动画来达到效果。代码如下&#xff1a;3d相册/* 使用单位将所有照片叠在一起 */img{…

(1)pandas 基础教程

步骤1、环境准备 右击桌面上选择【Open in Terminal】 打开终端。在弹出的终端中输入【ipython】进入Python的解释器中&#xff0c;如图1所示。 图1 ipython解释器步骤2、导入所需要的包 导入实验常用的python包。如图2所示。【import pandas as pd】pandas用来做数据处理。【i…

使用Java WebSockets,JSR 356和JSON映射到POJO的

因此&#xff0c;我一直在研究Tyrus &#xff08;JSR 356 WebSocket for Java规范的参考实现&#xff09;。 因为我一直在寻找测试工具&#xff0c;所以我对在Java中同时运行客户端和服务器端感兴趣。 因此&#xff0c;恐怕此博客文章中没有HTML5。 在此示例中&#xff0c;我们…

CSS3效果:波浪效果

实现效果 如图所示&#xff1a; 首先得准备三张图&#xff0c;一张是浅黄色的背景图loading_bg.png&#xff0c;一张是深红色的图loading.png&#xff0c;最后一张为bolang.png。 css代码 body{background:#ffe894;}.loading_bg{width:113px; height:111px;background:url(lo…

集合、深浅拷贝、文件操作(读、写、追加)函数初识(参数)

小数据池#int比较数值is 比较内存地址id 测试内存地址#str不能含有特俗字符单个元素*数字&#xff0c;不能超过21i1 ‘a’*20i ‘a’*20id一样i1 ‘a’*21i ‘a’*21id不一样编码ascii 英文的数字&#xff0c;字母&#xff0c;特殊字符字节8位表示一个字节字符内容的最小…

html创建文件域的代码,word如何插入域代码

在word里怎么进行域代码的设置&#xff1f;如果知道要插入的域的域代码&#xff0c;可以将其直接键入在文档中。首先按 CtrlF9&#xff0c;然后在括号中键入代码就可以了。【Word插入域方法】1、Word2007中&#xff0c;在要插入域的位置单击。2、在“插入”选项卡上的“文字”组…

大学屌丝男

哈哈&#xff0c;来晚了呀转载于:https://www.cnblogs.com/wainiwann/p/7909765.html

前端页面适配的rem换算

为什么要使用rem 之前有些适配做法&#xff0c;是通过js动态计算viewport的缩放值&#xff08;initial-scale&#xff09;。 例如以屏幕320像素为基准&#xff0c;设置1&#xff0c;那屏幕375像素就是375/3201.18以此类推。 但直接这样强制页面缩放过于粗暴&#xff0c;会导致页…

lt form gt 在html,HTML lt;formgt; 标签的 accept

HTML <form> 标签的 accept2018-11-20在跨业务、跨网站发送数据或者业务升级的时候&#xff0c;我们有的时候需要指定发送数据的编码方式&#xff0c;比如页面表单的编码是UTF-8的&#xff0c;而提交到目标页面的编码是GBK编码时&#xff0c;会用到表单的accept-charset属…

使用Java ThreadLocals的意外递归保护

对于那些使用第三方工具来尝试扩展它们而又不完全了解它们的人来说&#xff0c;这是一个小技巧。 假定以下情况&#xff1a; 您想扩展一个公开分层数据模型的库&#xff08;假设您要扩展Apache Jackrabbit &#xff09; 该库在访问内容存储库的任何节点之前会内部检查访问权限…

今日头条竞价接口转发

一、代码 ①类名 public class TouTiao{public class model{public string site_id { get; set; }public string ad_id { get; set; }public List<Data> data { get; set; }}public class Data{public string label { get; set; }public string lable { get; set; }publi…

art-template辅助函数和子模板

art-template 前端使用 用途&#xff1a;主要用来处理数据和优化性能&#xff0c;与其他的一些模块化处理数据的插件相比&#xff0c;art-template处理性能好 不废话&#xff0c;上代码 1.art-template基本语法使用 <script src"template.js"></script&…