大话Web-Audio-Api
大话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的更多相关文章
- 【HTML5】Web Audio API打造超炫的音乐可视化效果
HTML5真是太多炫酷的东西了,其中Web Audio API算一个,琢磨着弄了个音乐可视化的demo,先上效果图: 项目演示:别说话,点我! 源码已经挂到github上了,有兴趣的同学也可以去st ...
- 关于HTML5音频——audio标签和Web Audio API各平台浏览器的支持情况
对比audio标签 和 Web Audio API 各平台浏览器的支持情况: audio element Web Audio API desktop browsers Chrome 14 Yes ...
- [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 ...
- 关于Web Audio API的入门
Web Audio API提供了一个简单强大的机制来实现控制web应用程序的音频内容.它允许你开发复杂的混音,音效,平移以及更多. 可以先看一下MDN的这篇文章<Web Audio API的运用 ...
- 使用Web Audio API绘制音波图
摘要:Web Audio API是对<audio> 标签功能上的补充,我们可以用它完成混音.音效.平移等各种复杂的音频处理,本文简单的使用其完成音波图的绘制. PS:本例子使用ES6编程, ...
- H5的Web Audio Api
概述 研究Web Audio Api的主要原因是:工作中需要在ios中实现声音的淡出效果,主要是通过setInterval来改audio标签的volume属性实现的,但是ios上面volume属性是只 ...
- Web Audio API之手把手教你用web api处理声音信号:可视化音乐demo
1.Web Audio API 介绍 Web Audio API 提供了在Web上控制音频的一个非常有效通用的系统 ,这些通用系统通俗的讲就是我们可以利用Web Audio API提供的各种方法操作各 ...
- HTML5 ——web audio API 音乐可视化(二)
上一篇 web audio API 音乐可视化(一)介绍了一些基本的API,以及如何简单的播放一个音频,本篇介绍一下怎么对获取到的音频进行分析,并将分析后的数据绘制成图像. 最终效果请戳这里; 完整版 ...
- HTML5 ——web audio API 音乐可视化(一)
使用Web Audio API可以对音频进行分析和操作,最终实现一个音频可视化程序. 最终效果请戳这里; 完整版代码请戳这里,如果还看得过眼,请给一个start⭐ 一.API AudioContext ...
- 【Web Audio API】 — 那些年的 web audio
转 TAT.Jdo:[Web Audio API] - 那些年的 web audio 这主题主要是早期对 web audio api的一些尝试,这里整理一下以便以后翻阅,如有错误,诚请指正. 在这之前 ...
随机推荐
- SpringBoot使用Gradle构建war包
Spring Boot默认将应用打包成可执行的jar包.有时候需要打包成war包部署在tomcat等容器.下面简单介绍下打包的步骤. 一.修改gradle.build文件 1.1 添加如下配置 app ...
- 对js原型简单的理解和图解
对js原型简单的理解和图解 最近在努力的学习js中,今天就抽了个空把自己理解的原型,记下一下在笔记中,以后自己查看,有空在会把原型链记录一下. 1.prototype prototype:是一个函数的 ...
- SqlServer_游标循环
--从游标取的值 ) ) --获取待返现数据,并循环处理 DECLARE TestCursor CURSOR FOR SELECT ID,UserName FROM dbo.UserInfo Open ...
- 使用weinre调试手机页面
阅读目录 介绍Weinre 安装Weinre 通过Weinre调试页面 启动target 介绍Weinre Weinre(Web Inspector Remote),是一种远程调试工具.功能与Fire ...
- java数据库编程——读写LOB、可滚动和可更新的结果集、元数据
java 数据库编程 1. 读写LOB 除了数字.字符串和日期之外,许多数据库还可以存储大对象,例如图片或其它数据.在SQL中,二进制大对象称为BLOB,字符型大对象称为CLOB. 要读取LOB,需要 ...
- WCF和Socket
WCF的全称是:Windows Communication Foundation.它是建立在Web Service架构上的一个全新的通信平台.它使用相同的基础结构和 API 来创建应用程序,这些应用程 ...
- Linux的进程间通信-文件和文件锁
前言 使用文件进行进程间通信应该是最先学会的一种IPC方式.任何编程语言中,文件IO都是很重要的知识,所以使用文件进行进程间通信就成了很自然被学会的一种手段.考虑到系统对文件本身存在缓存机制,使用文件 ...
- Linux驱动虚拟地址和物理地址的映射
一般情况下,Linux系统中,进程的4GB内存空间被划分成为两个部分------用户空间和内核空间,大小分别为0~3G,3~4G. 用户进程通常情况下,只能访问用户空间的虚拟地址,不能访问到内核空间. ...
- 视差映射 parrallax mapping
算个新的uv在heightmap https://learnopengl.com/Advanced-Lighting/Parallax-Mapping https://blog.csdn.net/so ...
- Hadoop 伪分布式上安装 HBase
hbase下载:点此链接 (P.S.下载带bin的) 下载文件放入虚拟机文件夹,打开,放在自己指定的文件夹 -src.tar.gz -C /home/software/ 修改环境配置 gedit / ...