html 和ExtJs 搭建背景音乐 开发

最近项目中需要做一个监控,有这样的需求:每次监听到新的数据需要播放一个声音出来给予提示,以增强用户的体验。

  但问题随之而来了,因为浏览器兼容的问题我们需要不同的HTML标签来满足要求。比如IE支持的<bgsound>而其他的浏览器不支持,也许有人说用<embed>、<object>标签,也许满足一般的页面没有问题,但是如果是extjs 渲染的页面 打开的话会对viewport产生一定的影响。

  下面是我最初的写法:

HTML代码:

复制代码
 1 <!DOCTYPE html>
 2 
 3 <!-- Auto Generated with Ext Designer -->
 4 <!-- Modifications to this file will be overwritten. -->
 5 <html>
 6 <head>
 7    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 8     <title>机器人监控</title>
 9     <link rel="stylesheet" type="text/css" href="../ext-4.0/resources/css/ext-all.css"/>
10     <script type="text/javascript" src="../ext-4.0/ext-all-debug.js"></script>
11     <script type="text/javascript" src="monitor.js"></script>
12 </head>
13 <body>
14     <bgsound id="song" src="" />
15     <div id='video'></div>
16     <div id='ext'></div>
17 </body>
18 </html>
复制代码


JS代码:

复制代码
 1 badRefresh:function(){
 2         var count = gridStore.getCount();
 3         gridStore.load();
 4         if(count>0){
 5             if(Ext.isIE){
 6                 //如果是IE
 7                 document.getElementById("song").src="newMessage.wav";
 8             }else {
 9                 //如果是其他浏览器
10                 document.getElementById('ext').innerHTML = "<object height='1' width='1' data='newMessage.wav' ></object>";
11             }
12         }
13     },
复制代码

出现的问题是ViewPort上部变形,底部沉了下去。

未播放音频前:

播放音频后:

解决方式:使用了第三方的js框架SoundManager2

HTML代码:

复制代码
 1 <!DOCTYPE html>
 2 
 3 <!-- Auto Generated with Ext Designer -->
 4 <!-- Modifications to this file will be overwritten. -->
 5 <html>
 6 <head>
 7    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 8     <title>监控</title>
 9     <link rel="stylesheet" type="text/css" href="../ext-4.0/resources/css/ext-all.css"/>
10     <script type="text/javascript" src="../ext-4.0/ext-all-debug.js"></script>
11     <script type="text/javascript" src="../sound/soundmanager2.js"></script>
12     <script type="text/javascript" src="monitor.js"></script>
13        <script type="text/javascript">
14           soundManager.setup({
15             url: '../swf', //swf文件夹的位置
16             onready: function() {
17               soundManager.createSound({
18                 id: 'newMessageSound',
19                 url: 'newMessage.wav' //wav文件的位置
20               });
21             }
22           });
23           
24     </script>
25 </head>
26 <body>
27     <bgsound id="song" src="" />
28 </body>
29 </html>
复制代码


JS代码:

复制代码
 1 badRefresh:function(){
 2         var count = gridStore.getCount();
 3         gridStore.load();
 4         if(count>0){
 5             if(Ext.isIE){
 6                 //如果是IE
 7                 document.getElementById("song").src="newMessage.wav";
 8             }else{
 9                 //如果是其他浏览器
10                 soundManager.play('newMessageSound');
11                 //document.getElementById('ext').innerHTML = "<object height='1' width='1' data='newMessage.wav' ></object>";
12             }
13         }
14     },
复制代码

遇到的问题:

1.需要部署到服务器上才能运行正常,但是使用官方包中的demo却可以播放本地文件,这还需要再做研究。

2.用的.wav文件在chrome中能正常播放,但在IE中不能播放,转成.mp3文件后就都可以正常播放了

注意问题: 必须导入soundmanager2.js 与swf文件夹。因为此框架使用的是flash在播放器,虽然现在也开始支持HTML5,不过为了兼容问题,最好是还导入swf文件夹

参考:http://www.schillmania.com/projects/soundmanager2

         使用JS播放声音——SoundManager 2

   Ext:在Ext中播放声音(mp3等)

 

天行健君子以自强不息。
转载地址:http://www.cnblogs.com/mrye/archive/2013/05/15/3080637.html
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值