HTML5 WebAudioAPI简介(一)

一、常用对象

1.AudioContext对象

AudioContext是一个专门用于音频处理的接口,并且原理是讲AudioContext创建出来的各种节点(AudioNode)相互连接,音频数据流经这些节点并作出相应处理。

创建AudioContent对象

//普通写法
var audioContext=new window.AudioContext();
//为了兼容,也可以这样写
window.AudioContext = window.AudioContext || window.webkitAudioContext ||   window.mozAudioContext || window.msAudioContext;
//也可以使用错误处理
try {
    var audioContext = new window.AudioContext();
} catch (e) {
    Console.log(‘!Your browser does not support AudioContext‘);
}

解码音频文件

audioContext.decodeAudioData(binary, function(buffer) { ... });

读取到的音频文件时2进制文件(可以使用Ajax远程加载,可以使用FileAPI读取本地文件),

我们需要让AudioContext先对其解码,然后再进行后续擦做。

返回结果的buffer为AudioBuffer类型数据。

2.AudioBuffer对象

length:文件大小

duration:音频长度

3.创建音频处理节点

AudioBufferSourceNode对象

//创建AudioBufferSourceNode对象
var source = ctx.createBufferSource();

链接节点:

                    //创建AudioBufferSourceNode对象
                    var source = ctx.createBufferSource();
                    source.buffer = buffer;
                    source.connect(ctx.destination);

AnalyserNode对象(分析器)

创建链接点:

//创建分析器
var analyser = ctx.createAnalyser();
source = ctx.createBufferSource();
//将source与分析器链接
source.connect(analyser);
//将分析器与destination链接,这样才能形成到达扬声器的通路
analyser.connect(ctx.destination);
//将解码后的buffer数据复制给source
source.buffer = buffer;

播放/暂停

audioBufferSourceNode.buffer = buffer; //回调函数传入的参数 audioBufferSourceNode.start(0); //指定位置开始播放
audioBufferSourceNode.stop();

更多参考:https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API

时间: 2024-08-27 04:31:53

HTML5 WebAudioAPI简介(一)的相关文章

HTML5 WebAudioAPI(四)--绘制频谱图2

绘制分析器数组所有数据.本文内容,承接上文 1.800宽度绘制 var url='../content/audio/海阔天空.mp3'; if (!window.AudioContext) { alert('您的浏览器不支持AudioContext'); } else { //创建上下文 var atx = new AudioContext(); var source = null; //使用Ajax获取音频文件 var request = new XMLHttpRequest(); reque

HTML5 WebAudioAPI(三)--绘制频谱图

HTML <style> #canvas { background: black; } </style> <div class="container"> <button class="btn btn-primary" id="playBtn"> <i class="glyphicon glyphicon-pause"></i> </button>

HTML5:简介和文档基本结构

HTML(Hypertext Markup Language,超文本标记语言)诞生于20世纪90年代初,用于指定构建网页的元素,这些元素中的大多数都用于描述网页内容,如标题.段落.列表.指向其他网页的链接等.HTML5是HTML的最新版本,它的大部分内容都可以兼容新旧浏览器,并新增了大量新的功能.HTML5还引入了原生的音频和视频播放功能.通过下面的网址可以查看HTML的最新规范: 1)HTML5:http://www.w3.org/TR/html5/ 2)HTML5.1:http://www.

HTML5标准简介

最近前端的群都蛮热闹的,但我发现多数讨论的是javascript和css相关的问题,仿佛大家在努力创建各种交互.样式的时候,忘却了这一切的基础 – HTML. 其实我很喜欢HTML,觉得这个语言远比XML来得有趣,其灵活.轻便远非极端规范的XML可以比拟.同时又因为HTML的作用范围极小,规定的标签有限等说不上优点还是缺点的特色,使得HTML有着自己的确定性. 本系列的前面很大一部分会以非常短小的篇幅,介绍HTML5中的一些基本概念,并且: 只关心HTML这个语言,其他的javascript或者

HTML5实验室简介之Canvas图像处理(一)

作为一个前端,想必对HTML5都不陌生,特别是移动端,如今已经比较火了,捞金量远胜于PC端,与其说HTML5是一项Web新时代革命性的技术,不如说其是现代化Web应用的新理念:一方面结合JavaScript,前端的羽翼更加丰满:另一方面,跨终端将Web应用推向了一个新的高度:你看到的视觉将更加高端.大气.炫酷:你浏览时的交互体验将更加人性化:你的设备消耗大大降低,运行更流畅:总之,你会惊叹,同时你会很舒服!而这一切都是基于HTML5的! 作为一个小前端,才疏学浅,个人小站(花满楼:http://

HTML5的简介

HTML5是新一代的标准,其工作原理主要包括3部分: 1.不破坏web 在web中使用HTML5的标准不应该让已经存在的网页无法工作. 2.修补牛蹄子路 HTML5将使用频率很高,但是不是官方的技术作为一个目标,在某种程度上确实是最             实际解决问题的途径. 3.实用至上 1.1文档声明 虽然即使不加<html><head><body>  浏览器依旧能够识别html的标签元素,但是如果不加<!doctype  html> 文档说明,浏览器

2.1 HTML5元素简介及使用方法

1.元素 元素指的是从开始标签到结束标签的所有内容(由开始标签.元素内容.结束标签组成)<br/>空元素,起换行作用 2.HTML元素语法 元素的内容是开始标签与结束标签之间的内容 空元素在开始标签中进行结束 大多数HTML元素可拥有属性 3.嵌套的HTML元素大多数的HTML元素都是可以嵌套的

HTML5 WebAudioAPI-实例(二)

简单播放实例1: var url='../content/audio/海阔天空.mp3'; if (!window.AudioContext) { alert('您的浏览器不支持AudioContext'); } else { //创建上下文 var ctx = new AudioContext(); //使用Ajax获取音频文件 var request = new XMLHttpRequest(); request.open('GET', url, true); request.respons

简介 jCanvas:当 jQuery遇上HTML5 Canvas

HTML5 可以直接在你的网页中使用 <canvas> 元素及其相关的 JavaScript API绘制的图形. 在这篇文章中,我将向你介绍 jCanvas,一个基于 jQuery的免费且开源的 HTML5的Canvas API. 如果你使用 jQuery 进行开发,jCanvas能够使用 jQuery更简单,更快速的完成一些非常炫酷的 canvas画布及交互效果. 什么是 jCanvas ? jCanvas 官网是这样解释的: "jCanvas is a JavaScript li