最近项目中需要做一个监控，有这样的需求：每次监听到新的数据需要播放一个声音出来给予提示，以增强用户的体验。
但问题随之而来了，因为浏览器兼容的问题我们需要不同的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文件夹