WEB音频API
很偶然的，在一个微信公众号里面，看到了这样的一篇文章。
WEB音频API。作者分享技术的优良品质值得我们学习。
原文讲述的大致是这样的，使用JavaScript来动态的加载音频资源，这样来起到一个不错的交互效果。尤其是对于网页游戏开发而言，这一点也是很重要的。
于是，我就翻译了一下，并写了个小例子。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>WEB音频API测试</title>
<script>
function play(){
alert('即将播放音频！');
//创建音乐播放的上下文实例,适配手机和PC
var audioContext = new (window.AudioContext||window.webkitAudioContext)();
//为即将到来的音频文件创建一个缓冲区
var source = audioContext.createBufferSource();
//创建Ajax请求对象，用于向服务器请求音频资源
var request = new XMLHttpRequest();
// 使用非异步请求方式，来请求音频资源
request.open('GET','./TheMountain.mp3',true);
// 设置服务器即将返回的类型，便于浏览器解码
request.responseType = 'arraybuffer';
request.onload = function(){
//一旦请求内容完整返回就开始解码
audioContext.decodeAudioData(request.response,function(buffer){
source.buffer = buffer;
//连接音频资源，正式播放
source.connect(audioContext.destination);
//设置为循环播放模式
source.loop = true;
// 等待零秒后播放
source.start(0);
},function(e){
alert('Audio Error!',e);
})
}
// 开启ajax请求
request.send();
}
//window.onload = function(){
// play();
//}
</script>
</head>
<body>
<input id="button" type="button" name="test" onclick="play()" value="播放">
</body>
</html>注意，音频资源存放在服务器上的位置很重要，路径可不能写错咯。然后就是注意ajax的不能跨域请求的原则即可。
希望能让更多有此需求的人看得到，造福更多的人。
WEB音频API的更多相关文章
- Waud.js – 使用HTML5降级处理的Web音频库
Waud.js 是一个Web音频库,有一个HTML5音频降级处理方案. 它允许您利用Web音频API为你的Web应用程序控制音频功能.在不支持Web音频API的非现代浏览器使用HTML5音频降级方案. ...
- 关于HTML5音频——audio标签和Web Audio API各平台浏览器的支持情况
对比audio标签 和 Web Audio API 各平台浏览器的支持情况: audio element Web Audio API desktop browsers Chrome 14 Yes ...
- 【HTML5】Web Audio API打造超炫的音乐可视化效果
HTML5真是太多炫酷的东西了,其中Web Audio API算一个,琢磨着弄了个音乐可视化的demo,先上效果图: 项目演示:别说话,点我! 源码已经挂到github上了,有兴趣的同学也可以去st ...
- 关于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 ...
随机推荐
- Java 内部类的意义及应用
众所周知,我们的 C++ 程序语言是多继承制的,而多继承明显的好处就是,相对而言只需要写较少的代码即可完成一个类的定义,因为我们可以通过继承其它类来获取别人的实现. 但是,它也有一个致命性的缺陷,容易 ...
- C++11的value category（值类别）以及move semantics（移动语义）
转载请保留以下声明 作者:赵宗晟 出处:http://www.cnblogs.com/zhao-zongsheng/p/value_categories_and_move_semantics.html ...
- rmdir&rm
rmdir删除空目录,非文件 rmdir [选项] 目录名 rmdir -p 路径 删除路径里子文件夹后父文件夹若为空也一并删除 rmdir -v 目录名 显示删除信息 rm删除文件,非目 ...
- 实验吧_天下武功唯快不破&让我进去(哈希长度拓展攻击)
天下武功唯快不破 第一反应就去抓包,看到返回包的header中有FLAG的值,base64解码后得到下图所示 这就要求我们在请求头中post相应key的值,我直接在burp中尝试了多次都没有用,想起来 ...
- [USACO 12JAN]Mountain Climbing
Description Farmer John has discovered that his cows produce higher quality milk when they are subje ...
- [Codeforces Round #431]简要题解
来自FallDream的博客,未经允许, 请勿转载,谢谢. 好久没写cf题解了zzz 代码比较丑不贴了,cf上都可以看 Div2A. 给你一个长度为n(n<=100)的序列 判断是否可以分成奇数 ...
- SpringBoot学习之集成dubbo
一.摘自官网的一段描述 1.背景 随着互联网的发展,网站应用的规模不断扩大,常规的垂直应用架构已无法应对,分布式服务架构以及流动计算架构势在必行,亟需一个治理系统确保架构有条不紊的演进. 单一应用架构 ...
- IDEA 整合 SSM 框架学习
认识 Spring 框架 更多详情请点击这里:这里 Spring 框架是 Java 应用最广的框架,它的成功来源于理念,而不是技术本身,它的理念包括 IoC (Inversion of Control ...
- 遗传算法：N皇后
N皇后问题描述 N皇后问题是一个经典的问题,在一个N*N的棋盘上放置N个皇后,每行一个并使其不能互相攻击(同一行.同一列.同一斜线上的皇后都会自动攻击). 遗传算法 遗传算法是局部束搜索的变形: 与自 ...
- C语言程序设计作业
一.阅读邹欣老师的博客--师生关系,针对文中的几种师生关系谈谈你的看法,你期望的师生关系是什么样的? 我期望老师与学生之间的关系是和睦相处的,学生有问题可以找老师,当然是再老师有空的条件下.老师和学生 ...