为英特尔® 架构 Android* 设备上的 HTML5 游戏添加声音

最新推荐文章于 2021-05-26 07:02:42 发布

英特尔-x86安卓开发

最新推荐文章于 2021-05-26 07:02:42 发布

阅读量4.4w

点赞数

分类专栏： android IntelAndroid 文章标签： IntelAndroid android Intel

本文链接：https://blog.csdn.net/x86android/article/details/19337091

版权

IntelAndroid 同时被 2 个专栏收录

71 篇文章 1 订阅

订阅专栏

android

11 篇文章 0 订阅

订阅专栏

作者：Tao Wang (Intel)

介绍

声音是构建交互式游戏最为重要的组件之一。一个完美的游戏不仅需要高清图形和故事情节，声音效果也要给玩家惊喜。为游戏/应用添加音效不仅能够提高娱乐价值，还可提高游戏/应用的整体质量。

音频标记

HTML5 的惊喜特性之一是声音和视频标记。长期来看，它有望取代今天的主流视频技术。为了使用 HTML5 音频或视频，首先创建<音频>元素，为音频指明源 URL，包括控制属性。

    
    
     
     
      
      
       
       1 <audio controls>
      
      
      
      
       
       2  <source src="horse.ogg" type="audio/ogg">
      
      
      
      
       
       3  <source src="horse.mp3" type="audio/mpeg"> 
      
      
      
      
       
       4 Your browser does not support the audio element. 
      
      
      
      
       
       5 </audio>

控制特性包括声音控制，例如，播放，停止，和音量。 <音频>组件包括不同的<源>组件。 <源>组件可连接至多个<音频>记录。 MIME 类型(亦称互联网媒体类型)是标记文件格式的方法之一，以便您的框架进行管理。除了源，我们还指定类型属性。该属性在下载之前告诉程序 MIME 类型以及配套媒体的编码解码器。如果不提供属性，浏览器将尝试使用经验方法识别媒体类型。浏览器将使用最初识别的配置，如果无法识别格式，就采用默认格式。

canPlayType 方法

幸运的是，声音 API 为我们提供了一个识别移动浏览器支持的格式的方法。我们可通过在 HTML 中标记元素来识别<音频>元素，方法如下：

    
    
     
     
      
      
       
       1 var audio = document.getElementById('myaudio');

另外，我们还可在 JavaScript* 中生成元素:

    
    
     
     
      
      
       
       1 var audio = new Audio();

一旦有了声音组件，其后就是方法和属性了。为了测试格式支持，我们利用 canplaytype 技术；该技术采用 MIME 类型作为参数:

    
    
     
     
      
      
       
       1 audio.canPlayType('audio/mpeg’);

canPlayType 生成三个值：

有可能
不确定
“” (空串)

返回类型为奇数是因为编码解码器的异常。移动浏览器无需试播就可识别编码解码器是否能够播放。

面向音频格式的 MIME 类型

特性

HTML 标记包含一个或多个属性/特性。属性回加至标记以便为浏览器提供关于标记如何显示或表现的数据。特性包含一个名称和一个值，用等号(=)区分，值加双引号。这里是一个示例：风格“颜色：蓝色”；

以下章节介绍关于<音频>标记/元素的属性。

src: 指明音频文件的位置。其值必须是音频文件的 URL。预加载：播放大型文件时，最好缓存记录。因此，使用预加载属性。该属性可帮助我们提示浏览器：我们计划在播放之前缓存记录，并提升客户端体验。可能的值有：

无
元数据
自动

自动播放:

指明对象加载以后是否开始播放音频。

这是一个布尔属性。因此，该属性相当于真值。我们还可指明对场景不敏感的值以匹配属性的规范名称，前后均无空格(也就是自动播放或 autoplay=“autoplay”)。

可能的值有：

[空串]
自动播放

媒体组:

该属性用来同步音频文件(或媒体元素)的播放。它帮助我们指明链接在一起的媒体元素。该值是文本串，例如： mediagroup=album. 与该值相同的音频文件/媒体元素都在被用户代理/浏览器自动链接在一起。

可使用媒体组属性的一个示例是：从一个视频向另一个视频叠加符号语言转换器轨道。

循环:

该属性表明音频播放结束后是否重复播放。

该属性是布尔属性。因此，该属性相当于真值。我们还可指明对场景不敏感的值以匹配属性的规范名称，前后均无空格(也就是循环或 loop=“loop”)。

可能的值有：

[空串]
循环

控制：

自动播放音频不可取，您最好让浏览器提供一些控制，例如，音量和播放/暂停。这可通过向标签添加控制属性即可实现。

该属性是布尔属性。因此，该属性相当于真值。我们还可指明对场景不敏感的值以匹配属性的规范名称，前后均无空格(也就是控制或 controls=“controls”)。

可能的值有：

[空串]
控制

控制媒体回放

一旦我们使用新组件在 HTML 文档中插入媒体，我们就能够从 JavaScript 代码自动控制它们。例如，开始(或重新)回放的代码是：

    
    
     
     
      
      
       
       1 var v = document.getElementsByTagName(“myaudio”); 
      
      
      
      
       
       2 v.play();

第一行获取存档中的首个音频组件，第二个调用组件的播放策略，用于激活媒体组件。使用 JavaScript 代码控制 HTML5 音频播放器的播放、停止、音量增减十分简单：

    
    
     
     
      
      
       
       1 document.getElementById('demo').play() //Play the Audio 
      
      
      
      
       
       2 document.getElementById('demo').pause() //Pause the Audio 
      
      
      
      
       
       3 document.getElementById('demo').volume+=0.1 // Increase Volume document.getElementById('demo').volume-=0.1 // Decrease Volume

媒体搜索

媒体组件支持将当前播放位置移至媒体库中的特定位置。为此，可设置组件中的 currenttime 属性的值。基本上是将时间设置为您希望播放执行的秒数。

我们可利用组件的搜索属性获取媒体播放的起止时间。这返回 TimeRanges 对象，列出您希望搜索的时间范围。

    
    
     
     
      
      
       
       1 var audioElement = document.getElementById(“myaudio”); 
      
      
      
      
       
       2 audioElement.seekable.start(); // Returns the starting time (in seconds) 
      
      
      
      
       
       3 audioElement.seekable.end(); // Returns the ending time (in seconds) 
      
      
      
      
       
       4 audioElement.currentTime = 122; // Seek to 122 seconds 
      
      
      
      
       
       5 audioElement.played.end(); // Returns the number of seconds the browser has played

简单游戏库

简单游戏库(simpleGame)可方便地添加声音对象而构建新声音。简单游戏库中的声音对象是基于 HTML5 <声音>标记。

    
    
     
     
      
      
       
       1 <script type="text/javascript"
      
      
      
      
       
       2   src = "simpleGame.js"></script> 
      
      
      
      
       
       3  <script type="text/javascript">

使用简单游戏库您可轻松管理音效：

创建音效。最佳格式是 mp3 和 ogg。
为您的音效创建参数。务必在函数之外定义变量。
简单游戏库有声音对象。为声音构建创建实例。声音对象需要参数。您可在 init 函数中设置参数。
声音可使用声音对象的 play()method 播放。

AppMobi 的直接画布

为了增强 HTML5 的功能，开发人员希望利用 AppMobi 的开发工具与环境构建强大应用。借助 AppMobi 提供的应用游戏界面(AGI)技术，混合型 HTML5 应用可提升其画面标记命令。 AGI 技术由 AppMobi 开发(http://www.appmobi.com/),该公司是一家 HTML5 服务公司，之前称为 directCanvas。

为了使用 AGI，我们首先了解其结构。 AGI 加速的画布命令需要堆栈为与 HTML 框架相同的“视角”，然后在更高级别转换，以更快速度执行。另外，这分为两个视图而且不支持访问完全存档对象模式(DOM)，标准 Web 视图和加速视图之间的信息传递需要付费。

加速“视角”的代码显示在 HTML5 Web 视图中，它表明 AGI API 规定的 HTML 文档或其它文档中的任何图形组件的渲染都高于加速图形。

使用 AGI 声音特性

应用游戏界面(AGI)技术通过多音效升级弥补了 HTML5 的声音弱点。 HTML5 的最初设计目标不是以低延迟播放各种非传统声音，而这正是游戏和各种应用所需要的。 AGI 多音效创新可支持游戏中的每个元素按照应有的效果播放声音，不受同步声音的限制。 AppMobi API 均可通过 Appmobi.context 对象访问，可增强执行和易用性。

独立背景声音可通过三种策略实现：

开启背景声音：

该方法可开启在后台不断播放的声音。

独立背景声音可由加速画布应用游戏界面提供支持。使用该方法可开启背景声音或音乐。该命令结合音频对象可增强性能和易用性。

句法

    
    
     
     
      
      
       
       1 AppMobi.context.startBackgroundSound("sounds/music_main.mp3",true)

第一个参数是需要播放的背景声音的路径和文件名，第二个参数是可选的布尔值，它表示背景声音是否间歇性回放。

切换背景声音

使用该命令可切换背景声音的开启或关闭状态。独立背景声音可由加速画布应用游戏界面提供支持。使用该方法可切换背景声音或音乐。该命令结合音频对象可增强性能和易用性。

句法

    
    
     
     
      
      
       
       1 AppMobi.context.toggleBackgroundSound();

停止背景声音

使用该命令可停止背景声音。独立背景声音可由加速画布应用游戏界面提供支持。使用该方法可停止背景声音或音乐。该命令结合音频对象可增强性能和易用性。

句法

    
    
     
     
      
      
       
       1 AppMobi.context.stopBackgroundSound()

结论

尽管浏览器存在不可预测的行为，HTML5 绝对是令人振奋、开发新型强大应用的技术。本文讨论了如何将声音集成至带 HTML5 音频组件的应用中，以及 AppMobi 提供的 AGI 技术为什么是开发精彩应用的得力助手。结合使用 JavaScript、phonegap 和 appmobi 等技术/工具，HTML5 有望开发原本需要原生代码的应用。