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     },