大话Web-Audio-Api

转:https://www.jianshu.com/p/0079d1fe7496

简单的例子:

<script>

    var context;
var musicBuffer;
window.addEventListener('load',init,false);
function init()
{
try{
window.AudioContext = window.AudioContext || window.webkitAudioContext || window.mozAudioContext || window.msAudioContext;
context = new window.AudioContext();
loadSound("m.mp3");//获取音频
}
catch (e) {
alert(e);
}
} //获取音频数据
function loadSound(url){
var request = new XMLHttpRequest();
request.open('GET',url,true);
request.responseType= 'arraybuffer';
request.send(); //下面就是对音频文件的异步解析
request.onload = function(){
context.decodeAudioData(request.response,function(buffer){
musicBuffer = buffer;
console.log(context);
console.log(musicBuffer);
playSound(context, musicBuffer);//获取成功后播放
});
} } //播放音频数据
function playSound(audioContext, buffer) {
var audioBufferSouceNode = audioContext.createBufferSource(),
analyser = audioContext.createAnalyser();
//将source与分析器连接
audioBufferSouceNode.connect(analyser);
//将分析器与destination连接,这样才能形成到达扬声器的通路
analyser.connect(audioContext.destination);
//将上一步解码得到的buffer数据赋值给source
audioBufferSouceNode.buffer = buffer;
//播放
audioBufferSouceNode.start(0);
//音乐响起后,把analyser传递到另一个方法开始绘制频谱图了,因为绘图需要的信息要从analyser里面获取
//this._drawSpectrum(analyser);//可以绘制波形图
} </script>

上面例子也受同源跨域策略影响

大话Web-Audio-Api的更多相关文章

  1. 【HTML5】Web Audio API打造超炫的音乐可视化效果

    HTML5真是太多炫酷的东西了,其中Web Audio API算一个,琢磨着弄了个音乐可视化的demo,先上效果图: 项目演示:别说话,点我!  源码已经挂到github上了,有兴趣的同学也可以去st ...

  2. 关于HTML5音频——audio标签和Web Audio API各平台浏览器的支持情况

    对比audio标签 和 Web Audio API 各平台浏览器的支持情况:   audio element Web Audio API desktop browsers Chrome 14 Yes  ...

  3. [Javascript] Intro to the Web Audio API

    An introduction to the Web Audio API. In this lesson, we cover creating an audio context and an osci ...

  4. 关于Web Audio API的入门

    Web Audio API提供了一个简单强大的机制来实现控制web应用程序的音频内容.它允许你开发复杂的混音,音效,平移以及更多. 可以先看一下MDN的这篇文章<Web Audio API的运用 ...

  5. 使用Web Audio API绘制音波图

    摘要:Web Audio API是对<audio> 标签功能上的补充,我们可以用它完成混音.音效.平移等各种复杂的音频处理,本文简单的使用其完成音波图的绘制. PS:本例子使用ES6编程, ...

  6. H5的Web Audio Api

    概述 研究Web Audio Api的主要原因是:工作中需要在ios中实现声音的淡出效果,主要是通过setInterval来改audio标签的volume属性实现的,但是ios上面volume属性是只 ...

  7. Web Audio API之手把手教你用web api处理声音信号:可视化音乐demo

    1.Web Audio API 介绍 Web Audio API 提供了在Web上控制音频的一个非常有效通用的系统 ,这些通用系统通俗的讲就是我们可以利用Web Audio API提供的各种方法操作各 ...

  8. HTML5 ——web audio API 音乐可视化(二)

    上一篇 web audio API 音乐可视化(一)介绍了一些基本的API,以及如何简单的播放一个音频,本篇介绍一下怎么对获取到的音频进行分析,并将分析后的数据绘制成图像. 最终效果请戳这里; 完整版 ...

  9. HTML5 ——web audio API 音乐可视化(一)

    使用Web Audio API可以对音频进行分析和操作,最终实现一个音频可视化程序. 最终效果请戳这里; 完整版代码请戳这里,如果还看得过眼,请给一个start⭐ 一.API AudioContext ...

  10. 【Web Audio API】 — 那些年的 web audio

    转 TAT.Jdo:[Web Audio API] - 那些年的 web audio 这主题主要是早期对 web audio api的一些尝试,这里整理一下以便以后翻阅,如有错误,诚请指正. 在这之前 ...

随机推荐

  1. uva10392 Factoring Large Numbers

    uva10392 Factoring Large Numbers 本文涉及的知识点是,使用线性筛选法得到素数表. Table of Contents 1 题目 2 思路 3 参考 1 题目 ===== ...

  2. UVA 10163 - Storage Keepers(dp)

    本文出自   http://blog.csdn.net/shuangde800 题目链接: 点击打开链接 题意 有n个仓库,让m个人来看管.一个仓库只能由一个人来看管,一个人可以看管多个仓库. 每个人 ...

  3. 简单实现ToolStripMenuItem(菜单栏)的单选效果

    来源:http://www.97world.com/archives/2194 这几天在写又拍云的客户端,老实说确实学到了不少东西!接下来的几天我会把一些技巧或者原来没有接触过的一些东西发上来,算是复 ...

  4. 【maven】pom.xml文件没错,但是项目有小红叉,Problems中可以看到错误:“Dynamic Web Module 3.0 requires Java 1.6 or newer.”

    解决方法: 1.将 <plugin> <groupId>org.apache.maven.plugins</groupId> <artifactId>m ...

  5. PHP版本切换

    前言 php是为了快速构建一个web页面而迅速被大家广为接受的开源语言,通过不断发展已经有了很多的php开源系统,满足了目前大部分用户的站点需求.1995年初php诞生到现在已经存在多个版本,并且每个 ...

  6. DevExpress组件AspxCallBack之传递数值到客户端多个控件

    AspxCallBack从服务器传值到客户端单个控件可以用CallbackEventArgs的e.Result来传值,下面是传值多个控件的做法. ASPX页面代码: <dx:ASPxCallba ...

  7. xampp Apache Access forbidden! Error 403解决方法

    今天下载了最新的xampp,配置了一个虚拟主机,一直在报错,Access forbidden! Error 403 这很明显是服务器不允许访问文件,但是我的虚拟主机配置如下: DocumentRoot ...

  8. 一起talk GDB吧(第五回:GDB查看信息)

    各位看官们.大家好,上一回中我们说的是GDB的调用栈调试功能,而且说了怎样使用GDB进行查看调用 栈.这一回中,我们继续介绍GDB的调试功能:查看信息.当然了.我们也会介绍怎样使用GDB查看程序 执行 ...

  9. 手写Json转换

    在做项目的时候总是要手动将集合转换成json每次都很麻烦,于是就尝试着写了一个公用的方法,用于转换List to json: using System; using System.Collection ...

  10. ListView改变字体

    ListView中没有改变字体的属性和方法,所以需要用其他的方式.这里使用ArrayAdapter.   首先,创建一个TextView组件,用来作为Adapter的列表项组件.   在layout文 ...