H5的Audio API音频
h5出现之前,要进行Web音频的展示,往往需要在浏览器加载flash等插件,h5中新增的<audio>标签允许用户进行一些基本的音频流操作,但是对于一些复杂的音频处理应用,其功能远远不能满足需求,而h5中提供的Audio API就派上了用场。H5的Web Audio API很强大,我们可以利用它去创建各种音频,甚至可以创建一段完整的音乐。在进行一些网站建设时,我们前端攻城狮可以摆脱网上搜索背景音乐或特定音频的束缚,完全可以自己创作一段满足网站需求的音频(比如游戏背景音乐,按键点击音乐等)。本文简单介绍一下音频处理流程以及Audio 的应用。
模块化音频节点
音频节点接口是一个个音频处理模块,包括音频源、音频输出、中间处理模块。音频节点模块化允许在两个音频节点之间进行任意连接,每个中间节点有输入和输出。源节点没有输入,只有一个输出;目的节点只有一个输入源没有输出,其他的节点,能够设置在源节点和目的节点之间。
在最简单的例子中,一个音频源可以直接输出,所有的音频路由在一个音频上下文(AudioContext)中进行:
如果要对源进行一些处理,就可以插入中间处理模块:
在这里,我们没有输入音频源,而是通过Oscillator创建了一个输入源。
创建音频步骤
- AudioContext
AudioContext是一个音频上下文,所有的音频节点处理在音频上下文中进行,类似于canvas中的context,进行音频操作前,需要获取音频上下文。
var AudioContext = new(window.AudioContext || window.webkitAudioContext)();
考虑IE的兼容性问题,如果是IE浏览器,则报错:
try {var AudioContext = new(window.AudioContext || window.webkitAudioContext)();
} catch (e) {Console.log('浏览器不支持 ');
}
var audioCtx = new AudioContext();
该上下文对象包含很多属性和方法,用于创建各种音频元和音频处理模块。
2.创建音频振荡器OscillatorNode
var oscillator = audioCtx.createOscillator(); //创建振荡器oscillator.type = 'triangle'; //设置波形,可选值:'square','triangle','sawtooth','sine'oscillator.frequency.value = 198; //设置频率
声音的本质其实是震动,通过定义震动的频率,振幅,波形可以发出不同的声音,这也是我们创建声音的本质。因此波形不一样,最终的声音也就不一样,波还受频率影响,最终表现为不一样的音调高低。
createOscillator()是AudioContext对象的一个方法,该方法创建一个音频振荡器节点。振荡器是一个重复的波形。它有一个频率和振幅。一个振荡器最重要的特征,除了频率和振幅,是它波形的形状。四种的振荡器波形分别是正弦、三角、方形、锯齿:
利用振荡器输出一个音调。不同的波形决定了音调的不同。
3.创建音量节点GainNode
var gainNode = audioCtx.createGain(); //创建音量控制节点gainNode.gain.setValueAtTime(0, audioCtx.currentTime);
gainNode.gain.linearRampToValueAtTime(volume, audioCtx.currentTime + 0.01);
我们可以通过创建一个音量控制节点GainNode来调节音量大小。GainNode的gain返回一个AduioParam对象,这里调用AudioParam.setValueAtTime()方法,该方法支持两个参数,一个是音量(范围0-1),另一个参数是时间。这里调用setValueAtTime(0, audioCtx.currentTime)
表示当下就把音量设为0
,也就是没声音。
linearRampToValueAtTime()
方法表示音量在某时间线性变化到某值,这里linearRampToValueAtTime(1, audioCtx.currentTime + 0.01)
实际上表示的是在0.01
秒的时间内,声音音量线性从0
到1
。
4.关联中间模块
关联振荡器和音量控制器:
oscillator.connect(gainNode);
音量控制器关联目的输出节点:
gainNode.connect(audioCtx.destination);
5.播放音频
出现声音:
oscillator.start(audioCtx.currentTime);
6.音频音量变化,淡入淡出
gainNode.gain.exponentialRampToValueAtTime(0.001, audioCtx.currentTime + 1);
exponentialRampToValueAtTime()
方法表示音量在某时间指数变化到某值,这里的exponentialRampToValueAtTime(0.001, audioCtx.currentTime + 1)
实际上表示的是在1.00
秒的时间内,音量由之前的1
以指数曲线的速度降到极低的0.001
音量。
7. 关闭音频
oscillator.stop(audioCtx.currentTime + 1)
1秒后,声音关闭。
通过以上步骤,实现了创建音频,控制音量到停止音频播放的应用。利用以上原理,可以制作一些小应用。戳这里,查看Audio钢琴小demo。效果图如下,点击不同的按键,会调整频率,达到发出不同音调声音的目的。github地址:https://github.com/jianfeng418/h5-pinao
H5的Audio API音频相关推荐
- Web Audio API与WebSocket播放实时音频
WebSocket客户端与Web Audio API示例 <!DOCTYPE html> <html><head><meta charset="ut ...
- HTML 利用 Web Audio API 进行音频可视化
利用Web Audio API 进行音乐可视化 1.什么是 Web Audio API: 官方:Web Audio API 提供了在Web上控制音频的一个非常有效通用的系统,允许开发者来自选音频源,对 ...
- 利用Web Audio API将振动数据转化为音频数据并播放
年初在公司做了一个需求:传感器采集到了机器的振动数据,要在网页中利用这个数据播放出振动的声音. 之前只了解过HTML中的<audio>元素可以通过src属性指定音频文件路径来播放音频,现在 ...
- Audio API 实现音频播放器
市面上实现音频播放器的库有很多,比如wavesurfer.js.howler.js等等,但是都不支持大音频文件处理,100多M的文件就有可能导致程序崩溃.总之和我目前的需求不太符合,所以打算自己实现一 ...
- h5 audio播放音频文件
h5 audio播放音频文件 注:下面html中样式及不相关的内容去掉了 第一个例子 播放没有防盗链的外网音频文件是可以的 <!doctype html> <html> < ...
- 基于Web Audio API实现音频可视化效果
网页音频接口最有趣的特性之一它就是可以获取频率.波形和其它来自声源的数据,这些数据可以被用作音频可视化.这篇文章将解释如何做到可视化,并提供了一些基础使用案例. 基本概念节 要从你的音频源获取数据,你 ...
- 用web audio api 在canvas上画出音频的音轨
上一篇讲了一下如何用web audio api实现播放,这一篇讲一下如何画音轨吧
- 利用HTML5 Web Audio API给网页JS交互增加声音
转自张鑫旭老师博客 原文地址 一.庞然的HTML5 Web Audio API 首先务必要弄清这一点,本文这里所说的HTML5 Web Audio API和HTML5 元素完全不是一个东西,其体量也完 ...
- 如何使用Web Audio API听到“ Yanny”和“ Laurel”的声音
by _haochuan 通过_haochuan 如何使用Web Audio API听到" Yanny"和" Laurel"的声音 (How you can h ...
最新文章
- R----plotly包介绍学习
- 220V黄金光的LED灯带测试与结构
- MLPClassifier 隐藏层不包括输入和输出
- Java机器学习库ML之十一线性SVM
- WCF 第六章 序列化和编码之DataContractJsonSerializer
- Hough Transform 的算法思想
- pythonexcel表格教程_python对excel表格的操作
- 神奇的sstream头文件(整型与字符串自由转换)
- Linux命令之hexdump - ”十六“进制查看器
- 递归-Hanoi塔问题
- window2003 httpdns
- 雷达信号处理读书笔记
- faststone capture 屏幕录像没有声音
- 美国零售数据不及预期,非美延续反弹
- 将日/分钟数据转为周线、月线或其他周期
- 中国计算机协会推荐学术会议、期刊(人工智能)收藏直连版
- 如何在R中画出高效美观的相关性分析图
- doc与docx批量互转宏代码
- 什么叫集群?如何实现集群?
- 商业模式创新与设计 -- 黄力泓
热门文章
- 正规的宝妈兼职平台有哪些(有什么正规的网络兼职平台)
- android service单独进程,Android 通过Service单独进程模仿离线推送 Server Push
- reportviewer控件mysql_reportviewer 控件动态绑定数据 报表灵活绑定数据
- html-day01笔记-01-前言WEB标准认识HTMLHTML常用标签
- 什么是OADM光分插复用器
- CE使用指南(入门教程)
- 如何清除页面的图片缓存
- html5 回到顶部按钮,“返回顶部”按钮效果
- centos7如何安装w3m
- Reno报文乱序与快速重传