html 消息通知声音,ajax实现web页面的消息实时提醒时播放提示音
在应用系统的开发过程中,经常要使用到新消息的提醒功能,比如说后台有一个告警消息,web页面就会实时的收到这个告警的消息,且发出提示音。
这其实就是涉及到两个方面的知识,一个是http实时消息的推送,在这儿我就不做升入的探讨,我的下一篇文章将进行升入的探讨,这儿我就主要就主要探讨的是实时播放提示音,这儿我用到的是HTML5中的
标签的属性
属性
值
描述
autoplay
autoplay
如果出现该属性,则音频在就绪后马上播放
controls
controls
如果出现该属性,则向用户显示控件,比如播放按钮。
loop
loop
如果出现该属性,则每当音频结束时重新开始播放。
preload
preload
如果出现该属性,则音频在页面加载时进行加载,并预备播放
如果使用 "autoplay",则忽略该属性。。
src
url
要播放的音频的 URL。
由于我们的播放声音要用js控制,我们查阅w3school可以看到以下的内容,
关于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推送技术前端的探讨。
html 消息通知声音,ajax实现web页面的消息实时提醒时播放提示音相关推荐
- php播放一个提示音,ajax实现web页面的消息实时提醒时播放提示音
在应用系统的开发过程中,经常要使用到新消息的提醒功能,比如说后台有一个告警消息,web页面就会实时的收到这个告警的消息,且发出提示音. 这其实就是涉及到两个方面的知识,一个是http实时消息的推送,在 ...
- 如何在html自动播放提示音,ajax实现web页面的消息实时提醒时播放提示音
在应用系统的开发过程中,经常要使用到新消息的提醒功能,比如说后台有一个告警消息,web页面就会实时的收到这个告警的消息,且发出提示音. 这其实就是涉及到两个方面的知识,一个是http实时消息的推送,在 ...
- web页面 新消息提示音
web页面 新消息提示音 链接:https://blog.csdn.net/fmyzc/article/details/83750141
- web页面 新消息提示音
1.首先需要一个jq插件,将插件引入页面 下载地址 密码:ikkq 2.代码 html: <if condition="$tip eq true"><di ...
- SqlDependency 与 SignalR 实现Web页面的数据实时刷新
1. 创建一个MVC项目 SignalRDemo 2. 使用"管理NuGet程序包"添加Signalr相关的引用. Microsoft.AspNet.SignalR 安装相关 ...
- Android仿QQ锁屏状态下消息提醒(震动+提示音)
导读: 最近在开发一个定时提醒业务,类似于闹钟,然后遇到了一个问题,当APP应用在后台运行时,用户关闭了手机屏幕(手机进入灭屏休眠状态),这个时候使用系统震动和闹钟没有起到作用.why? 同样是灭屏休 ...
- 播放提示音+页面右下角提示框
<script> window.onload = function() {suportNotify() } // 判断浏览器是否支持Web Notifications API functi ...
- 如何去除ctrl f没找到时的提示音【声音难听】 windows
[默认响声]那个 声音设为无即可 //有好几个声音都和这个一样,可以自己选择性关闭
- html页面点击提示语音,html播放提示音
有两种分别用和标签,当用插入背景音乐时可以设置宽度和高度为0,隐藏播放器. ■ : 是用来插入背景音乐,但只适用于 ie,其参数设定不多.如下 src="your.mid" 设定 ...
最新文章
- 【网站汇总】安装教程系列
- python3.3中print换行
- 如何进行产品规划?一次实战演练给出具体步骤
- 一个Repeater排序用的控件
- python图片保存pdf_python将图像保存为pdf及图片
- 安国主控,U盘量产,起死回生
- 如何关闭谷歌的安全搜索?
- omron欧姆龙NJ/NX程序 全自动锂电池二封机,主站NJ501-1400+威纶通触摸屏。 整机采用EtherCAT总线网络节点控制,松下A6总线控制
- java中的打印_java中使用打印的方法
- [Accessibility] ****************** Loading GAX Client Bundle ****************
- java包装类string_Java学习之String类与包装类
- 10以太坊Token详解
- Geek ? 什么是 Geek ? 谁是 Geek ?
- 什么是字节对齐,为什么需要字节对齐
- vb.net如何打包exe安装文件
- vim使用gf(go file)跳转文件
- 区块链+社交:如何解决行业痛点?改变社交媒体?
- 信号的产生——线性调频函数chirp
- 一文读懂 IoT 物联网场景 5G 专网技术
- AP计算机 全方位解读
热门文章
- linq 清除一条数据中的某个字段值_B端通用批量数据导入方案设计
- matlab按某一列排序
- body curl 设置post_curl 命令详解
- html 适配 android,Android 版本适配 6~11
- linux下spi添加设备,Linux Kernl添加spidev的设备节点
- php 弹出变量,php取变量出现Notice: Undefined variable 的解决方法
- 两个向量之间的夹角公式_关于平面向量夹角求参数取值范围的两种基本解法介绍...
- 从零开始学习前端开发 — 15、CSS3过渡、动画
- JS如何禁止别人查看网站源码
- 学习关于display :flex 布局问题!