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

天行健君子以自强不息。

相关阅读:
第十四周学习进度
 第十三周学习进度
 第十二周学习进度条
 从用户体验角度评价所使用的输入法。
个人博客十
 数组测试 --Junit
看了build to win之后的感想
 思考题
 数组中最大子数组之和
 使用Espresso进行UI测试
原文地址：https://www.cnblogs.com/mrye/p/3080637.html

html 和ExtJs 搭建背景音乐 开发

html 和ExtJs 搭建背景音乐开发