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,一经查实,立即删除!

相关文章

元素的居中方式总结

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

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…

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…

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…

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

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

前端页面适配的rem换算

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

css清除浮动

css设计浮动属性的主要目的&#xff0c;是为了实现文本绕排图片的效果。 一.浮动 当浮动一张图片或者其他元素时&#xff0c;浏览器会将浮动元素往上方推&#xff0c;直到它碰到父元素的内边界。后面的元素不再认为浮动元素在文档流中位于它的前面了&#xff0c;因为它就会占…

gitlab搭建配置;ssh配置;

1.centos7上搭建gitlab&#xff0c;过程略&#xff1b; 命令&#xff1a;gitlab-ctl [start] [stop] [restart] [reconfigure] [tail] 查看gtilab日志 [status] 查看gitlab运行状态信息 2.修改默认ip端口&#xff1a; vim /etc/gitlab/gitlab.rb &#xff1b; external_url h…

家用计算机历史记录,教您如何查看电脑使用记录

很多朋友想查看自己之前使用过的文件或者文档来查询资料&#xff0c;或者是想看电脑是否被人使用过&#xff0c;但是&#xff0c;如何查看电脑使用记录呢&#xff1f;下面系统之家小编教大家查看电脑使用记录小技巧&#xff0c;不用担心找不到电脑使用记录。希望对大家有所帮助…

类的无参方法和Doc注释

一:Java Doc注释: 语法: /** *AccpSchool 类 *author JadeBird *version 1.0 2018/5/26 */ Java Doc是前Sun公司提供的一种技术,它能够从程序代码中抽取类,方法,成员等的注释,形成一个和源代码配套的API帮助文档(简答地说,就是介绍该类,类的方法和成员变量的文档). 因此只要在编…

Spring MVC,Ajax和JSON第3部分–客户端代码

如果您一直关注有关Spring&#xff0c;Ajax和JSON的简短博客系列&#xff0c;那么您会回想起我到目前为止已经创建了一个Spring MVC Web应用程序&#xff0c;该应用程序显示一个表单&#xff0c;该表单允许用户选择一堆项目并向服务器提交购买请求。 然后&#xff0c;服务器用一…

笔记36 Spring Web Flow——配置

Spring Web Flow是一个Web框架&#xff0c;它适用于元素按规定流程运行的程序。Spring Web Flow是Spring MVC的扩展&#xff0c;它支持开发基于流程的应用程 序。它将流程的定义与实现流程行为的类和视图分离开来。在介绍Spring Web Flow的时候&#xff0c;我们将暂时放下Spitt…

一些关于Viewport与device-width的东西~(转)

内容转自 http://www.cnblogs.com/koukouyifan/p/4066567.html 非常感谢 口口一凡 为我们提供的这篇文章&#xff0c;受益匪浅&#xff0c;特地转到自己的博客收藏起来。 以下是原文内容。 进行移动web开发已经有一年多的时间了&#xff0c;期间遇到了一些令人很困惑的东西。…

创建委托登录模块(用于JBoss EAP 6.1)

[如果只想查看代码&#xff0c;请向下滚动] 动机 在RHQ中&#xff0c;我们需要一个安全域&#xff0c;该域可用于通过容器管理的安全性来保护REST-api及其Web应用程序。 过去&#xff0c;我只是使用经典的DatabaseServerLoginModule对DatabaseServerLoginModule进行身份验证。 …

【C++】开源:FLTK图形界面库配置与使用

&#x1f60f;★,:.☆(&#xffe3;▽&#xffe3;)/$:.★ &#x1f60f; 这篇文章主要介绍FLTK图形界面库配置与使用。 无专精则不能成&#xff0c;无涉猎则不能通。——梁启超 欢迎来到我的博客&#xff0c;一起学习&#xff0c;共同进步。 喜欢的朋友可以关注一下&#xff0…

蜗牛学院:中国人,努力获得了荣誉却要压抑克制

上周&#xff0c;在取得双11三连冠的佳绩之后&#xff0c;百雀羚顺势推出了一支视频广告《你应该骄傲》。 广告内容感动了无数人&#xff0c;并在广告圈和自媒体引发了持续刷屏。&#xff08;视频见文末&#xff09; 从《一九三一》到《韩梅梅快跑》&#xff0c;百雀羚今年多次…