HTML5添加网页音效
下面是一个利用HTML5, Jquery,给页面添加音效的小组件(只是添加音效,并不是播放器)。
其实很简单,就是利用HTML5中的audio标签,播放声音。不过为了照顾IE 6-8,还是用上了bgsound。
兼容所有主流浏览器(非主流不在考虑之列了)
闲话少说,上代码:
<script>
/*Play sound component*/
/*
* profile: JSON, {src:'chimes.wav',altSrc:'',loop:false}
*
* setSrc: Function, set the source of sound
* play: Function, play sound
*/
if (!FUI){
var FUI = {};
}
FUI.soundComponent=function(profile){
this.profile={
src:'', //音频文件地址
altSrc:'', //备选音频文件地址 (不同浏览器支持的音频格式不同,可见附表)
loop:false //是否循环播放,这个参数现在没有用上
};
if(profile) {
$.extend(this.profile,profile);
}
this.soundObj=null;
this.isIE = !-[1,]; /*这个方法是前辈大牛发明的,利用ie跟非ie中JScript处理数组最后一个逗号“,”的差异, 不过对于IE 9,这个办法就无效了,但此处正合我用,因为IE 9支持audio*/
this.init();
};
FUI.soundComponent.prototype={
init:function(){
this._setSrc();
},
_setSrc:function(){
if(this.soundObj){
if(this.isIE){
this.soundObj[0].src=this.profile.src;
}else{
this.soundObj[0].innerHTML='<source src="'+this.profile.src+'" /><source src="'+this.profile.altSrc+'" />';
}
}else{
if(this.isIE){
this.soundObj=$('<bgsound volume="-10000" loop="1" src="'+this.profile.src+'">').appendTo('body'); //-10000是音量的最小值。先把音量关到最小,免得一加载就叮的一声,吓到人。
}else{
this.soundObj=$('<audio preload="auto" autobuffer><source src="'+this.profile.src+'" /><source src="'+this.profile.altSrc+'" /></audio>').appendTo('body');
}
}
},
setSrc:function(src,altSrc){
this.profile.src=src;
if(typeof altSrc!='undefined'){
this.profile.altSrc=altSrc;
}
this._setSrc();
},
play:function(){
if(this.soundObj){
if(this.isIE){
this.soundObj[0].volume = 1; //把音量打开。
this.soundObj[0].src = this.profile.src;
}else{
this.soundObj[0].play();
}
}
}
};
var sd=new FUI.soundComponent({src:'ding.wav',altSrc:'ding.mp3'});
$('.fui-btn').bind('click',function(e){
sd.play();
});
</script>
网上找了许久只有这篇文章靠谱,转自:http://www.warting.com/web/201110/34276.html
转载于:https://www.cnblogs.com/boonya/archive/2013/04/18/3027595.html
HTML5添加网页音效相关推荐
- HTML5添加网页背景音乐
HTML5添加网页背景音乐 方式一: 这种方式会显示播放器. 方式二: 这个方式主要是支持的播放器多.一定程度上解决了浏览器兼容的问题. 方式三: 这个不显示播放器. 方式四: 方式五:
- html5 微网页 点餐_使用HTML5和微数据向网页添加电话号码
html5 微网页 点餐 Traditionally, phone numbers have been placed on web pages as a simple string of digits ...
- html5给网页添加视频背景
html5给网页添加视频背景 1. 先插入如下代码: <video src="../video/2b.mp4" loop="loop" autoplay= ...
- html5编写网页代码_freeCodeCamp.org的未来-从向世界传授语言到编写代码的5年经验...
html5编写网页代码 freeCodeCamp went live in October 2014. In the five years since, we've done quite a bit. ...
- html的详情页面设计,HTML5+CSS3网页设计与制作实用教程 单元7 网页特效与制作商品详情页面(105页)-原创力文档...
单元7网页特效与制作商品详情页面HTML5+CSS3网页设计与制作实用教程本章导读The chapter's introduction 将JavaScript 程序嵌入HTML 代码中,对网页元素进行 ...
- 【HTML】HTML5给网页音频带来的变化
[HTML]HTML5给网页音频带来的变化 引言 内容速递:看了本文您能了解到的知识! 音乐播放,相信大家都很熟悉,但是早在之前的音乐播放之前,你的浏览器会问你,是否下载flash插件.然而现在,估计 ...
- 《HTML5+CSS3网页布局和样式精粹》.(张亚飞).[PDF]ckook
图书作者: 张亚飞 图书编号: 9787302261834 图书格式: PDF 出 版 社: 清华大学出版社 出版年份: 2011 图书页数: 500-600 [内容简介] 对于初入门的网页设计者和开 ...
- 基于HTML5的棋盘游戏开发,基于HTML5的网页围棋游戏的开发
0引言从2008年1月22日,第一份HTML5草案公布后,HTML5作为一种下一代web标准的趋势,受到人们的广泛关注,各大浏览器厂商开始纷纷支持HTML5,目前,大多数的浏览器,如chrome.fi ...
- html5添加背景音乐
0.补充demo 把代码分离出来做了demo,大家需要的可以自行下载,下载地址:下载地址点这里 1.需求说明 html5添加背景音乐 2.问题解决 直接上代码吧 首先添加音乐控件的div <di ...
- HTML5添加背景音乐 3种方法个人推荐audio
这里推荐两种方法,就是两个标签 <embed> 或者<audio > 常用 <audio > +css布局 隐藏播放器 做网站比较实用! <!DOCTYPE ...
最新文章
- java中事务的介绍
- libevent在windows下使用步骤详解
- Discuz!NT发帖回复后没有积分动画的去除和修复方法
- 屌丝。。。配角。。。
- WebHttpBinding的流传输模式让我头大了
- 多线程与高并发(一):单机高并发应该掌握的线程基础:线程状态,异常与锁等
- 【CodeForces - 545 ABCDE套题训练题解】贪心, 构造,模拟,dp,最短路树(Dijkstra+变形)
- 荔枝糖FPGA开发板相关博客
- 对recv函数的一些理解
- 机器视觉:高动态范围图像
- alert(isPresented: Binding<Bool>, content: () -> Alert) (SwiftUI 中文文档手册 教程含源码)
- android回传数据实验报告,传热综合实验实验报告.doc
- 制作一份高质量的APP运营推广方案
- 使用APICloud AVM框架开发人事档案管理助手APP
- 请问这个验证码是怎么做的?
- python压缩pdf_【转】PDF 用python 压缩
- 南京邮电大学操作系统实验五:Windows平台多进程共享内存通信
- 数据分析师兴起并繁荣背后的原因
- 计算机技术对身体有益,对眼睛有益的7种食物,常看电脑和手机的你一定要多吃!...
- GitLab CI/CD .gitlab-ci.yaml 关键词(十二):条件限定,only ,except,触发规则rules,工作流workflow