HTML5音视频API

网站建设

建站基本步骤
网站备案流程
本机IIS服务器的创建
Win7下配置本机IIS服务器
建网站需要学习的内容
使用表格布局网页
定义网页头文件元素
制作弹出网页
制作网页宣传窗
Div+CSS布局网页
CSS的常见选择器
CSS设置文本样式
CSS设置背景颜色与图像
CSS设置表格样式
HTML中使用CSS的方法
CSS3新增的部分属性1
CSS3新增的部分属性2
CSS3动画与渐变
网页显示MySQL数据库中汉字的乱码问题
HTML5的新特性
HTML5的API
HTML5音视频API
HTML5表单
HTML5表单API
HTML5画布canvas
HTML5拖放API
HTML5地理位置API
HTML5离线应用API
HTML5 Workers多线程
HTML5跨源通信
HTML5 WebSocket通信
HTML5的Web存储API
HTML5本地数据库
HTML5其他一些API
Node.js功能和使用
常用Web前端工具
WebGL编程
GLSL ES语言
使用ThreeJs库3D编程
XML可扩展标记语言

首页 > 专业技术 > 网站建设 > HTML5音视频API

上一主题

下一主题

HTML5音视频API

HTML5增加了一个元素，以便在HTML文档中插入和播放视频。<video>元素使用开始和结束标签，通过设置少量参数就能实现视频播放，只有src属性是必填的。示例：
<section id="player">
<video src="http://www.dwenzhao.cn/content/trailer.mp4" controls>不兼容提示</video>
</section>
如果使用的浏览器不支持HTML5的video元素，其中的不兼容提示就会显示出来。
事先，一般要至少提供两种视频格式文件，OGG和MP4，WebM也兴起。一些浏览器支持一组解码器，而其他浏览器未必支持，而且MP4格式所使用的解码器采用商业授权方式。
OGG包含Theora视频和OggVorbis音频；MP4则采用H.264作为视频编码解码器，采用AAC作为音频编码解码器；WebM采用VP8视频和OggVorbis音频。Ogg和WebM采用的音视频编解码技术都是Berkeley Software授权，开源免版税，视频无成本制作、分发和观看。目前，OGG得到Firefox、Google Chome和Opera的支持，而MP4得到Safari、Internet Explorer和Google Chrome的支持，WebM得到Firefox、Chrome和Opera的支持。另，MP3音频得到IE、Safari和Chrome的支持，Wav音频得到Firefox、Safari和Opera的支持。

1.<video>元素：

<video>元素只有几个属性，width和height用于声明元素或窗口播放器的尺寸，视频尺寸会自动适应这些尺寸，但不会拉伸视频；属性src用于指定视频的源文件；controls属性用于显示浏览器所提供的视频控件按钮。
src属性可以替换为<source>元素及其sec属性，用于声明多种格式的视频源。示例：
<section id="player">
  <video id="media" width="720" height="400" controls>
    <source src="http://www.dwenzhao.cn/content/trailer.mp4" type="video/mp4">
    <source src="http://www.dwenzhao.cn/content/trailer.ogg" type="video/ogg codes='theora, vorbis'">
  </video>
</section>
每一个浏览器都有特殊界面，使用户可以控制视频的播放、暂停或快进等功能。这些属性有：
·autoplay：当设置这个属性时，浏览器会在加载视频后自动播放视频。
·controls：这个属性表示音视频自带的播放控制条。
·loop：当设置这个属性时，浏览器会反复播放该视频。
·poster：这个属性可以指定一个UTL，在视频等待播放时显示图像。
·preload：这个属性可以设置三个值，none、metadata或auto。None表示预加载视频；metadata表示浏览器只抓取一些资源信息，如尺寸、时长和第一帧；auto是默认值，要求浏览器尽可能快地下载视频。
·poster：替代内容属性，用于指定一幅替代图片的URL地址，当视频不可用时显示。
·src：用于指定媒体文件的URL地址。
·width和height：指定视频的宽度和高度，单位是像素。
示例：
<section id="player">
  <video id="media" width="720" height="400" preload controls loop poster="http://www.dwenzhao.cn/content/poster.jpg">
    <source src="http://www.dwenzhao.cn/content/trailer.mp4">
    <source src="http://www.dwenzhao.cn/content/trailer.ogg">
  </video>
</section>
可以使用脚本判断浏览器是否支持video元素。示例：
var support=!!document.creatElement("video").canPlayType;
这段脚本动态创建video元素，并检查canPlayType()函数是否存在，通过执行两次逻辑非运算，将其转化为布尔值，就可以确定视频对象是否创建成功。音频也可以这样检查。

2.编程实现视频播放器：

由于各个浏览器的显示效果不同，有一些属性默认是启用或禁用，有一些属性是不支持的。为了完全控制<video>元素及所播放的媒体，必须使用JavaScript编写视频播放程序。
①视频播放器的HTML模板：
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Video Player </title>
  <link rel="stylesheet" href="player.css">
  <script src="player.js"></script>
</head>
<body>
<section id="player">
  <video id="media" width="720" height="400" controls>
   <source src="http://www.dwenzhao.cn/content/trailer.mp4">
   <source src="http://www.dwenzhao.cn/content/trailer.ogg">
  </video>
  <nav>
<div id="buttons">
  <button type="button" id="play">Play</button>
</div>
<div id="bar">
  <div id="progress"></div>
</div>
<div style="clear: both"></div>
  </nav>
</section>
</body>
<html>
②这个模板还包括两个外部代码文件，其中一个是如下的CSS样式文件：
    body {
      text-align: center;
}
    header, section, footer, aside, nav, artical, figure, figcaption, hgroup {
      display: block;
    }
    #player {
      width: 720px;
      margin: 20px auto;
      padding: 5px;
      text-align: center;
      border: 1px solid #666666;
      background: #999999;
      -moz-border-radius: 5px;
      -webkit-border-radius: 5px;
      border-radius: 5px;
    }
    #nav {
      margin: 5px 0px;
    }
    #buttons {
      float: left;
      width: 85px;
      height: 20px;
    }
    #bar {
      position: relative;
      float: left;
      width: 600px;
      height: 16px;
      padding: 2px;
      border: 1px solid #CCCCCC;
      background: #EEEEEE;
    }
    #progress {
      position: absolute;
      width: 0px;
      height: 16px;
      background: rgba(0, 0, 150, .2);
    }
代码中使用传统框模型，创建一个框，其中包含播放器的所有组件，这个框将居中显示在使用该模型的窗口中。模板中，<nav>元素最后添加了<div>，设置了内联样式，用于恢复文档的常规流。
③事件：
HTML5在视频音频处理中加入了新的事件API，在使用video和audio元素读取或播放媒体文件时会触发这些事件，包含一些通知媒体状态的事件，如下载速度、视频是否结束、视频是否暂停或播放终止等，可以使用JavaScript来捕获这些事件并进行相应的处理。捕获事件有两种方法，添加事件句柄和监听：
<video id="myPlayer" src="resources/video.mp4" width="600" onplay="video_playing()"> </video>
然后在video_playing()函数中添加需要的代码。而监听方式：
Var videoEl=document.getElementById("myPlayer");
videoEl.addEventListener("play",video_playing);
媒体元素的事件有：
·pause：当重播暂停时触发。
·play：当媒体开始播放时触发。
·playing：正在播放时触发。
·waiting：在等待加载下一帧时触发。
·ended：当媒体到达末尾时触发。
·timeupdate：当播放位置改变时触发，可能是自然改变或人为改变。
·ratechange：在当前播放速率改变时触发。
·volumechange：在音量改变时触发。
·durationchange：当播放时长改变时触发。
·loadstart：当浏览器在网上寻找数据时触发。
·stalled：浏览器尝试获取媒体数据失败时触发。
·loadedmetadata：在加载完媒体元数据时触发。
·loadeddata：在加载完当前位置的媒体播放数据时触发。
·seeking：浏览器正在请求数据时触发。
·seeked：浏览器停止请求数据时触发。
·progress：当浏览器正在获取媒体文件时触发。这个事件会周期性地触发，用于更新媒体的下载进度，这个信息可以通过buffered属性访问。
·suspend：当浏览器暂停获取媒体文件，且文件获取并没有正常结束时触发。
·abort：当中止获取媒体数据时触发。这种中止不是由错误引起的。
·canplaythrough：当整个媒体可以顺利播放时就会触发这个事件。这个状态的确定基于当前的下载速度，并且假定后面的下载速度不变
·canplay：与canplaythrough作用相同，但它不考虑整体状态，只要视频下载了一定时间的可播放帧就会触发这个事件。
·emptied：当所在网络变为初始化状态时触发。
·error：会在出现错误时触发，会传递到发生错误的媒体源相关的<source>元素上。
创建播放器时将只监听常用的click和load事件。示例：
function initiate() {
  maxim=600;
  mmedia=document.getElementById('media');
  play=document.getElementById('play');
  bar=document.getElementById('bar');
  progress=document.getElementById('progress');
  play.addEventListener('click', push, false);
  bar.addEventListener('click', move, false);
}
上述代码在窗口加载后马上执行，因为是执行的第一个函数，需要配置一些播放器的全局变量。通过使用选择器document.getElementById()能够引用播放器的所有元素，然后在后面的代码中使用这些元素。变量maxim设置进度条的最大宽度。
代码添加了两个事件监听器，第一个添加到元素play上的click事件监听器，这个监听器会在单击元素时执行push()函数；其他监听器都注册到bar上，当用户单击进度条时执行move()函数。
④方法：
Push()函数是第一个执行的函数，会根据情况执行pause()和play()方法：
function push() {
  if (!mmedia.paused && !mmedia.ended) {
   mmedia.pause();
   play.innerHTML='Play';
   window.clearInterval(loop);
  } else {
   mmedia.play();
   play.innerHTML='Pause';
   loop=setInterval(status, 1000);
  }
}
方法play()和pause()属于HTML5增加的媒体处理方法。下面是最常用的方法：
·load()：加载媒体文件，为播放做准备，通常用于播放前的预加载，也可用于重新加载。
·play()：播放媒体文件，如果没有加载，则加载并播放；如果是暂停，则变为播放，并把paused属性变为true。
·pause()：这个方法会暂停播放，自动把paused属性变为true。
·canPlayType(type)：通过这个方法，就能够确定浏览器是否支持这种文件格式，type使用媒体文件的MIME类型，比如video/mp4。该属性还可以通过参数codes指定编码格式。返回值为空字符串表示浏览器不支持指定的媒体类型，返回maybe表示浏览器可能支持，probably表示浏览器确定支持指定的媒体类型。
⑤属性：
Push()还使用一些属性检索媒体信息。最常用的属性：
·paused：如果媒体目前处于暂停状态，或者未开始播放，属性会返回true。只读属性。
·ended：如果媒体已经结束播放，那么这个属性会返回true。只读属性。
·duration：这个属性会返回以秒为单位的媒体时长。只读属性。
·currentTime：获取/设置当前媒体播放位置的时间点，单位s。
·currentSrc：获取当前正在播放或已加载的媒体文件的URL地址。只读属性。
·videoWidth：获取视频原始的宽度。只读属性。
·videoHeight：获取视频原始的高度。只读属性。
·startTime：获取当前媒体播放的开始时间，通常为0。只读属性。
·volume：获取/设置媒体文件播放时的音量，取值范围0.0到0.1之间。
·muted：获取/设置媒体文件播放时是否静音，true表示静音，false表示消除静音。
·playbackRate：获取/设置媒体当前的播放速率。
·defaultPlaybackRate：获取/设置媒体默认的播放速率。
·seeking：获取浏览器是否正在请求媒体数据，true表示正在请求，false表示请求停止。只读属性。
·seekable：获取资源已请求的TimesRanges对象，包括已请求部分的开始时间和结束时间。只读属性。
·played：获取已播放媒体的TimesRanges对象，内容包括已播放部分的开始和结束时间。只读属性。
·error：这个属性会在媒体发生错误时返回MediaError对象code，有4个错误状态。

CODE	值	含义	说明
MEDIA_ERR_ABORTED	1	中止	下载过程中因用户操作而被中止
MEDIA_ERR_NETWORK	2	网络中断	下载过程中出现网络错误而中止
MEDIA_ERR_DECODE	3	解码错误	解码发生了错误
MEDIA_ERR_SRC_NOT_SUPPORTED	4	不支持格式	媒体格式不被支持

无错误时code为null。
·networkState：获取媒体资源的加载状态，只读属性，有4个值。

CODE	值	说明
NETWORK_EMPTY	0	加载的初始状态
NETWORK_IDLE	1	已确定编码格式，当尚未建立网络连接
NETWORK_LOADING	2	媒体文件加载中
NETWORK_NO_SOURCE	3	没有支持的编码格式，不加载

·readyState：获取当前媒体播放的就绪状态，只读属性，有5个值。

CODE	值	说明
HAVE_NOTHING	0	还没有获取到媒体文件的任何信息
HAVE_METADATA	1	已获取到媒体文件的元数据
HAVE_CURRENT_DATA	2	已获取到当前播放位置的数据，但没有下一帧的数据
HAVE_FUTURE_DATA	3	已获取到当前播放位置的数据，且包含下一帧的数据
HAVE_ENOUGH_DATA	4	已获取足够的媒体数据，可正常播放

·buffered：这个属性表示目前加载到缓冲区的文件大小，可用于创建一个表示下载进度的指示器，只读属性。这个属性通常是在progress事件触发时读取的。因为用户可能要求浏览器下载不同时间线位置的媒体内容，那么buffered返回的信息就是一个数组，其中包括所下载媒体的各个部分，而非只有从开始位置开始的一个部分。数组的元素可以通过参数end()和start()进行访问，例如buffered.end(0)会返回以秒为单位的时长值，表示在缓冲区第一部分的媒体内容。
示例：
function Forward() {
   var el=document.getElementById("myPlayer");
   var time=el.currentTime;
   el.currentTime=time+600;
}
上述代码，先通过脚本获取video对象的currentTime，加上600s（10分钟）再赋值给currentTime，即可实现每次快进10分钟。
⑥其他函数：
Status()使用if条件检查视频状态，如果属性ended为false，会计算进度条长度，然后设置表示进度条<div>的尺寸；如果属性为true，会将进度条尺寸重新设置为0，将按钮文件修改为播放，并且使用clearInterval取消循环。代码为：
function status() {
  if (!mmedia.ended) {
   var size=parseInt(mmedia.currentTime*maxim/mmedia.duration);
   progress.style.width=size+'px';
  } else {
   progress.style.width='0px';
   play.innerHTML='Play';
   window.clearInterval(loop);
  }
}
代码中，使用属性currentTime获得当前播放时间，使用属性duration获得视频时长值，通过maxim获得进度条的最大尺寸，然后就能计算进度条的宽度，用于表示已经播放的秒数。
向bar元素添加了click事件监听器，用于检查用户设置的视频播放新位置。这个监听器使用move()函数处理所触发的事件。代码为：
function move(e) {
  if (!mmedia.paused && !mmedia.ended) {
   var mouseX=e.pageX-bar.offsetLeft;
   var newTime=mouseX*mmedia.duration/maxim;
   mmedia.currentTime=newTime;
   progress.style.width=mouseX+'px';
  }
}
在注册事件处理程序的过程中，一定要使用事件的引用，这个变量会作为参数传递给处理函数。传统上，使用变量e保存这个值。代码中，函数就使用这个变量的pageX属性获取鼠标在该事件发生时的确切位置，pageX返回的值是相对于页面的位置，而非进度条或窗口位置。为了确定进度条开始位置与鼠标单击位置的距离，必须将相对于页面左边的距离减去进度条的开始位置，这个距离可以使用offsetLeft获取。得到这个值后，必须转换为秒，表示鼠标单击位置所对应的时间线。
属性currentTime会返回视频已播放的时间，如果将它设置为新的值，就可以将视频播放位置调整到新的时间。最后还要修改progress元素的尺寸，使之反映在屏幕上显示的新位置。
最后一行代码是另一个必须监听的事件：
window.addEventListener('load', initiate, false);
可以使用旧版本的window.onload方法来注册事件处理程序，这也是兼容旧版本浏览器的最佳选择。
上述所有JavaScript代码要加入player.js文件中。

3.视频格式：

目前，在Web中没有标准的视频和音频格式，现在有几种容器和解码器，但没有一种得到广泛应用，也不会在短时间内进行统一。
最常用的容器是OGG、MP4、FLV和WEBM（Google提出的新容器），这些容器通常使用Theora、H.264、VP6和VP8等编解码器的视频。
·OGG：Theora视频解码器和Vorbis音频解码器
·MP4：H.264视频解码器和AAC音频解码器
·FLV：VP6视频解码器和AAC音频解码器
·WEBM：VP8视频解码器和Vorbis音频解码器
OGG和WEBM使用免费的解码器，而MP4和FLV则使用由专利保护的解码器。目前Safari和Internet Explorer不支持免费的解码器。
·Firefox：Theora视频解码器和Vorbis音频解码器
·Google Chome：Theora视频解码器和Vorbis音频解码器，还支持H.264视频解码器和AAC音频解码器
·Opera：Theora视频解码器和Vorbis音频解码器
·Safari：H.264视频解码器和Vorbis音频解码器
·Internet Explorer：H.264视频解码器和AAC音频解码器

4.音频：

HTML5提供了新的HTML文档音频播放元素<audio>。示例：
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Audio Player </title>
</head>
<body>
<section id="player">
  <audio src="http://www.dwenzhao.cn/content/beach.mp3" controls> </audio>
</section>
</body>
<html>
元素<audio>的工作方式和属性与<video>元素相同：
·src：用于指定所播放文件的URL，也可以用<source>元素替换这个属性
·controls：这个参数可以激活各个浏览器提供的默认界面
·autoplay：当设置这个属性时，浏览器会在加载音频后自动播放音频
·loop：当设置这个属性时，浏览器会反复播放该音频
·preload：这个属性可以设置三个值，none、metadata或auto。第一个值表示不缓存音频；第二个值推荐浏览器抓取一些资源信息，如尺寸；第三个值是默认，要求浏览器尽可能快地下载音频。
音频也涉及解码器的授权问题。MP3采用商业授权，因此Firefox和Opera等浏览器不支持这种格式，这些浏览器支持Vorbis，但Safari和Internet Explorer不支持。所以，必须使用<source>元素为浏览器提供至少两种格式。示例：
<section id="player">
  <audio id="media" controls>
   <source src="http://www.dwenzhao.cn/content/beach.mp3">
   <source src="http://www.dwenzhao.cn/content/beach.ogg">
  </audio>
免费音频解码器（如vorbis）的支持越来越广泛，但演变为一种标准还需要时间。
实现音频播放器的模板：
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Audio Player </title>
  <link rel="stylesheet" href="player.css">
  <script src="player.js"></script>
</head>
<body>
<section id="player">
  <audio id="media">
<source src="http://www.dwenzhao.cn/content/beach.mp3">
<source src="http://www.dwenzhao.cn/content/beach.ogg">
  </audio>
  <nav>
<div id="buttons">
  <button type="button" id="play">Play</button>
</div>
<div id="bar">
  <div id="progress"></div>
</div>
<div style="clear: both"></div>
  </nav>
</section>
</body>
<html>

5. Web Audio API：

Web Audio API是W3C规范中提供的能够处理音频数据的底层接口，支持混合多个音频，提供音频淡入、淡出、滤波等效果，灵活合并与分割多个通道中的数据，与WebRTC集成可处理远端audio，提供场景音效，实时进行时间域及频域分析。

1）Audio上下文：
AudioContext是一个能够处理声音对象的环境上下文，其提供的模块化路由机制能够把来自不同的音源信号通过任意数量的AudioNode对象处理后进行输出。AudioNode分为很多种类的node，通常情况下包含一个输入和一个输出，但源节点Source和目标节点Destination除外，源节点表示输入节点，表示没有经过任何处理的信号，只有输出；目标节点表示最终处理完的信号，只有输入。
可以使用如下方法来检测浏览器是否支持Web Audio API：
function init(){
  try{
    var aCtx=new AudioContext();
  }catch(e){
    alert("不支持音频API");
  }
}
一般情况下可以直接使用ew AudioContext()获取AudioContext，对于使用webkit内核的浏览器需要加上webkit前缀。
AudioContext对象的常见属性有：

属性	说明
destination	该属性是一个AudioDestinationNode对象，所有其他节点处理完成后最终会通过该节点输出，可以看作是最终的音频处理硬件
sampleRate	采样率（采样数/秒）
currentTime	当前播放音频
listener	AudioListener对象，用于3D环境音效
activeSourceCount	正在播放的音源数量

2）加载和播放音频：
获取Audio环境上下文后就可以加载及播放音频文件。要加载音频文件，需要借助XMLHttpRequest对象异步获取音源，然后使用decodeAudioData方法把获取后的音频文件数据进行异步解码，解码后的数据才能被AudioNode进行处理。
decodeAudioData方法原型为：
void decodeAudioData(ArrayBuffer audioData, DecodeSuccessCallback successCallback, optional DecodeErrorCallback errorCallback);
其中，
·ArrayBuffer：二进制音频数据，比如通过XMLHttpRequest加载后的数据
·DecodeSuccessCallback：解码成功回调函数，该函数包含一个参数表示解码后的PCM格式的音频数据
·DecodeErrorCallback：解码失败回调函数
示例代码：加载并解码音乐数据
function loadSound(url) {
  var request = new XMLHttpRequest();
  request.open('GET', url, true);
  request.responseType = 'arraybuffer';
  request.onload = function() {
    context.decodeAudioData(request.response, function(buffer) {
      audioBuffer = buffer;
    }, function(e) {
      alert("Error decoding file"+e);
    });
  }
  request.send();
}
通过decodeAudioData解码后，可以通过成功回调函数的参数获取原始音频数据，得到这个数据后就可以通过AudioNode节点处理。可以通过Audio Context的createBufferSource对象创建一个AudioBufferSourceNode对象，通过该对象播放音频。
示例：播放音频
function playSound(context,buffer) {
  var sourceNode = context.createBufferSource();
  sourceNode.buffer = buffer;
  sourceNode.connect(context.destination);
  sourceNode.start(0);
}
通过AudioContext的createBufferSource创建了一个AudioBufferSourceNode对象，在得到AudioBufferSourceNode节点后，就可以设置该节点的缓冲区对象，然后通过connect方法连接到destination节点，播放。
AudioBufferSourceNode是最常见的一种AudioNode节点，该对象表示的是一个音频源，常见的属性如下：

属性	说明
playbackState	回放状态
buffer	播放的缓冲区
playbackRate	回放率，默认1.0
loop	是否循环播放，默认为false
loopStart	循环播放开始位置，以秒为单位
loopEnd	循环播放结束位置，以秒为单位

常见的方法如下：

方法	参数	说明
start	when（开始时间，以秒为单位）	开始回放
stop	when（结束时间，以秒为单位）	停止回放

3）调节音频增益：
如果需要对音量进行调整，可以使用GainNode进行处理。GainNode是用于处理音频增益的节点对象，它只有一个增益属性，属性值value可以描述音频增益大小，是一个浮点值，范围从0~1变化。示例：
function play(ctx,fUrl){
  load(ctx, fUrl, function(buf){
    srcNode.buffer=buf;
    srcNode.connect(gainNode);
    gainNode.connect(ctx.destination);
    srcNode.start(0);
  });
}
还可以使用一个增益调节按钮：
$("#gain").change(function(){gainNode.gain.value=this.value*0.01;});

4）混合多个音频：
需要创建两个Source节点和两个GainNode节点，分别处理，最后连接到Destination节点。
function Aud(ctx, url){
  this.ctx=ctx;
  this.url=url;
  this.src=ctx.createBufferSource();
  this.pNode=[];
}
Aud.prototype={
  output:function(){
    for(var i=0;i<this.pNode.length;i++){
      var tNode=this.src;
      for(var j=0;j<this.pNode[i].length;j++){
        tNode.connect(this.pNode[i][j]);
        tNode=this.pNode[i][j];
      }
      tNode.connect(this.ctx.destination);
    }
  },
  play:function(loop){
    this.src.loop=loop||false;
    this.output();
    this.src.start(0);
  },
  stop:function(){
    this.src.stop():
  },
  addName:function(node, groupIdx){
    groupIdx=groupIdx||0;
    this.pNode[groupIdx]=this.pNode[groupIdx]||[];
    this.pNode[groupIdx].push(node);
  }
}
Aud.NODETYPE={
  GNODE:0
}
Aud对象表示一个音频对象，里面包含常见的处理音频方法，比如播放、停止及增加新的处理节点等，根据需要可以扩充。
AudManager音频管理类中扩展createNode方法：
createNode:function(nodeType,param){
  var node=null;
  switch(nodeType){
  case 1:
    node=this.ctx.createPanner();
    break;
  case 2:
    node=this.ctx.createJavaScriptNode(param[0],param[1],param[2]);
    break;
  default:
    node=this.ctx.createGainNode();
  }
  return node;
}
在页面加载时使用的方法为：
$(document).ready(function(){
  AudManager.urls={"cat.mp3","frog.mp3"};
  AudManager.init();
  AudManager.load(function(){
    var pNod1=AudManager.createNode();
    var pNod2=AudManager.createNode();
    var sound1=AudManager.items[0];
    var sound2=AudManager.items[1];
    sound1.addNode(pNod1);
    sound2.addNode(pNod2);
    sound1.play(true);
    sound2.play(true);
    $("#rge").change(function(){
      AudManager.items[0].pNode[0][0].gain.value=1-this.value*0.1;
      AudManager.items[1].pNode[0][0].gain.value=this.value*0.1;
    });
  });
});

5）3D音效：
使用Audio API可以实现立体环绕音效。要实现声音的3D效果，要使用PannerNode节点进行处理，常用的方法有：

方法	参数	说明
setPosition	x,y,z	设置音源位置坐标，默认为(0,0,0)
setOrientation	x,y,z	设置音源方向坐标，默认为(0,0,0)
setVelocity	x,y,z	设置音源速率，默认为(0,0,0)

有了PannerNode节点，在canvas中显示一个蜜蜂，实现蜜蜂绕中心旋转，同时使用PannerNode的setPosition方法设置音源坐标。示例：
function timeHandle(){
  window.setInterval(function(){
    ctx.clearRect(0,0,320,200);
    var rad=Math.PI*deg/180;
    var sx=90*Math.cos(rad),
    sy=90*Math.sin(rad);
    cX=160+sx,cY=100+sy;
    AudManager.items[0].pNode[0][0].setPosition(sx*0.1,-sy*0.1,0);
    renderCenter();
    renderCat();
    deg++;
  },30);
}

6）显示声音波形：
Audio API可以直接使用JS脚本对音频数据进行获取和处理，所以可以获取音频数据后把音乐的波形显示出来，这需要使用ScriptProcessorNode节点。
createScriptProcessor方法的原型为：
ScriptProcessorNode createScriptProcessor(unsigned long bufferSize, optional unsigned long numberOfInputChannels=2, optional unsigned long numberOfOutputChannels=2);
其中，
·bufferSize：处理缓冲区的大小，值必须为256、512、1024、2048、4096、8192、16384，表示在触发audioprocess事件中需要处理的采样次数。该值设置的太大会导致采样延迟，太小则数据不太准确，要根据需要设置适当的值。
·numberOfInputChannels：输入音源通道数量。
·numberOfOutputChannels：输出音源通道数量。
创建了ScriptProcessorNode节点后，可以在该节点的onaudioprocess事件处理函数中处理获取的采样数据。onaudioprocess的事件原型为：
attribute EventHandler onaudioprocess;
可以采用如下方法处理数据：
scriptNode.onaudioprocess=function(e){
var buf=e.inputBuffer;
}
onaudioprocess的处理函数包含一个参数，该参数是一个AudioProcessingEvent对象，包含以下常用的只读属性：

属性	说明
playbackTime	当前音频回放时间
inputBuffer	音频输入源缓冲区，是一个AudioBuffer对象
outputBuffer	音频输出源缓冲区，是一个AudioBuffer对象

在onaudioprocess事件中获取了输入音频数据缓冲区的对象AudioBuffer。AudioBuffer常用属性为：

属性	说明
sampleRate	PCM数据的采样率
length	PCM数据的长度，等同于AudioBuffer数据区的长度
duration	PCM数据的持续时间
numberOfChannels	通道数量

方法原型为：
Float32Array getChannelData(unsigned long channel);
获取指定通道的缓冲数据，返回一个Float32Array类型数组，数组中的数据为0~1的浮点数。然后就可以使用AudioBuffer的getChannelData方法获取数据，然后在canvas中进行绘图。
示例：
function renderWave(e){
  ctx.clearRect(0,0,400,300);
  var bufData=e.inputBuffer.getChannelData(0);
  ctx.beginPath();
  ctx.moveTo(0,150);
  for(var i=0,len-bufData.length,mix=Math.min(400,len);i<mix;i++){
    ctx.lineTo(i,bufData[i]*150+150);
  }
  ctx.stroke():
  ctx.closePath();
}

赵工的个人空间

（专业技术部分）（转网页计算）（转业余爱好部分）