下面是一个利用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添加网页音效相关推荐

  1. HTML5添加网页背景音乐

    HTML5添加网页背景音乐 方式一: 这种方式会显示播放器. 方式二: 这个方式主要是支持的播放器多.一定程度上解决了浏览器兼容的问题. 方式三: 这个不显示播放器. 方式四: 方式五:

  2. html5 微网页 点餐_使用HTML5和微数据向网页添加电话号码

    html5 微网页 点餐 Traditionally, phone numbers have been placed on web pages as a simple string of digits ...

  3. html5给网页添加视频背景

    html5给网页添加视频背景 1. 先插入如下代码: <video src="../video/2b.mp4" loop="loop" autoplay= ...

  4. html5编写网页代码_freeCodeCamp.org的未来-从向世界传授语言到编写代码的5年经验...

    html5编写网页代码 freeCodeCamp went live in October 2014. In the five years since, we've done quite a bit. ...

  5. html的详情页面设计,HTML5+CSS3网页设计与制作实用教程 单元7 网页特效与制作商品详情页面(105页)-原创力文档...

    单元7网页特效与制作商品详情页面HTML5+CSS3网页设计与制作实用教程本章导读The chapter's introduction 将JavaScript 程序嵌入HTML 代码中,对网页元素进行 ...

  6. 【HTML】HTML5给网页音频带来的变化

    [HTML]HTML5给网页音频带来的变化 引言 内容速递:看了本文您能了解到的知识! 音乐播放,相信大家都很熟悉,但是早在之前的音乐播放之前,你的浏览器会问你,是否下载flash插件.然而现在,估计 ...

  7. 《HTML5+CSS3网页布局和样式精粹》.(张亚飞).[PDF]ckook

    图书作者: 张亚飞 图书编号: 9787302261834 图书格式: PDF 出 版 社: 清华大学出版社 出版年份: 2011 图书页数: 500-600 [内容简介] 对于初入门的网页设计者和开 ...

  8. 基于HTML5的棋盘游戏开发,基于HTML5的网页围棋游戏的开发

    0引言从2008年1月22日,第一份HTML5草案公布后,HTML5作为一种下一代web标准的趋势,受到人们的广泛关注,各大浏览器厂商开始纷纷支持HTML5,目前,大多数的浏览器,如chrome.fi ...

  9. html5添加背景音乐

    0.补充demo 把代码分离出来做了demo,大家需要的可以自行下载,下载地址:下载地址点这里 1.需求说明 html5添加背景音乐 2.问题解决 直接上代码吧 首先添加音乐控件的div <di ...

  10. HTML5添加背景音乐 3种方法个人推荐audio

    这里推荐两种方法,就是两个标签 <embed> 或者<audio > 常用 <audio > +css布局 隐藏播放器 做网站比较实用! <!DOCTYPE ...

最新文章

  1. java中事务的介绍
  2. libevent在windows下使用步骤详解
  3. Discuz!NT发帖回复后没有积分动画的去除和修复方法
  4. 屌丝。。。配角。。。
  5. WebHttpBinding的流传输模式让我头大了
  6. 多线程与高并发(一):单机高并发应该掌握的线程基础:线程状态,异常与锁等
  7. 【CodeForces - 545 ABCDE套题训练题解】贪心, 构造,模拟,dp,最短路树(Dijkstra+变形)
  8. 荔枝糖FPGA开发板相关博客
  9. 对recv函数的一些理解
  10. 机器视觉:高动态范围图像
  11. alert(isPresented: Binding<Bool>, content: () -> Alert) (SwiftUI 中文文档手册 教程含源码)
  12. android回传数据实验报告,传热综合实验实验报告.doc
  13. 制作一份高质量的APP运营推广方案
  14. 使用APICloud AVM框架开发人事档案管理助手APP
  15. 请问这个验证码是怎么做的?
  16. python压缩pdf_【转】PDF 用python 压缩
  17. 南京邮电大学操作系统实验五:Windows平台多进程共享内存通信
  18. 数据分析师兴起并繁荣背后的原因
  19. 计算机技术对身体有益,对眼睛有益的7种食物,常看电脑和手机的你一定要多吃!...
  20. GitLab CI/CD .gitlab-ci.yaml 关键词(十二):条件限定,only ,except,触发规则rules,工作流workflow

热门文章

  1. 图像算法工程师面试题
  2. 某大厂算法工程师面试题详解,问题+答案
  3. 【采用】社交网络分析与金融反欺诈应用(知识图谱?)
  4. mac下用ImageOptim压缩png图片
  5. 如何用CSDN-markdown编辑器写博客
  6. CSDN Markdown编辑器 图片对齐方式(居中/左对齐/右对齐)及图片大小
  7. Quartz定时任务不定时执行
  8. 【学习笔记】统计学入门(5/7)——二项分布
  9. ArcCatalog 连接远程SDE 连接字符
  10. 何通过ArcCatalog本地发布地图服务