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等)

 

你可能感兴趣的:(ExtJs)