D3临摹作业(西安交大国家艺术基金数据可视化培训第25天)
第九章 音乐可视化
第一节 音乐可视化API
1 HTML5音频控件
规定了一种通过 audio 元素来包含音频的标准方法。audio 元素能够播放声音文件或者音频流。
<audio src="song.ogg" controls="controls">
</audio>
audio 元素允许多个 source 元素。source 元素可以链接不同的音频文件。浏览器将使用第一个可识别的格式:
(代码来源:www.w3school.com.cn)
<audio controls="controls">
<source src="song.ogg" type="audio/ogg">
<source src="song.mp3" type="audio/mpeg">
Your browser does not support the audio tag.
</audio>
2 Web Audio API 介绍
Web Audio API使用户可以在音频上下文(AudioContext)中进行音频操作,具有模块化路由的特点。在音频节点上操作进行基础的音频, 它们连接在一起构成音频路由图。
一个简单而典型的web audio流程如下:创建音频上下文-->在音频上下文里创建源 — 例如 <audio>, 振荡器, 流-->创建效果节点,例如混响、双二阶滤波器、平移、压缩-->为音频选择一个目的地,例如你的系统扬声器-->连接源到效果器,对目的地进行效果输出
使用这个API,时间可以被非常精确地控制,几乎没有延迟,这样开发人员可以准确地响应事件,并且可以针对采样数据进行编程,甚至是较高的采样率。这样,鼓点和节拍是准确无误的。Web Audio API 也使我们能够控制音频的空间化。web audio实现了跟音频的通信,会耗硬件资源。
接口含义,特征 | 代码 | ||
通用音频图定义 |
AudioContext | 接口代表由音频模块构成的音频处理图。音频上下文控制其所包含节点的创建和音频处理、解码。使用其它接口前你必需创建一个音频上下文,一切操作都在这个环境里进行。 |
var context; window.addEventListener('load', init, false); function init() { try { context = new webkitAudioContext(); } catch(e) { alert('您当前的浏览器不支持Web Audio API '); } } |
AudioNode | 音频节点 接口是一个音频处理模块, 例如<audio>或<video>,音频输出、中间处理模块(例如: BiquadFilterNode 或者 GainNode)。 | ||
AudioParam | 接口代表音频相关的参数,比如一个 AudioNode的参数。它可以设置为特定值或值的变化,并且可以在指定的时间之后以指定模式变更。 | ||
ended结束事件 | 当媒体播放停止时,会触发ended事件。 | ||
定义音频源 | OscillatorNode | 接口代表一种随时间变化的波形,比如正弦波形或三角波形。类型是AudioNode,功能是音频处理模块,可以产生指定频率的波形。 | |
AudioBuffer | 代表内存中的一段音频数据,可以通过AudioContext.decodeAudioData()方法从音频文件创建,也可以通过AudioContext.createBuffer()方法从原始数据创建。当音频数据被解码成这种格式之后,就可以被放入一个AudioBufferSourceNode中使用。 | ||
AudioBufferSourceNode | 表示由内存音频数据组成的音频源,音频数据存储在AudioBuffer中。这是一个作为音频源的AudioNode。 | ||
MediaElementAudioSourceNode | 接口表示由HTML5 <audio>或<video>元素生成的音频源。这是一个作为音频源的AudioNode。 | ||
MediaStreamAudioSourceNode | 接口表示由 WebRTC MediaStream(如网络摄像头或麦克风)生成的音频源。这是一个作为音频源的AudioNode。 | ||
定义音效 | BiquadFilterNode | 接口表示一个简单的低频滤波器。它是一个AudioNode,可以表示不同种类的滤波器、调音器或图形均衡器。BiquadFilterNode 总是只有一个输入和一个输出。 | 案例[Boris] |
ConvolverNode | 接口是一个AudioNode,对给定的 AudioBuffer 执行线性卷积,通常用于实现混响效果。 | ||
DelayNode | 表示延迟线;是AudioNode 类型的音频处理模块,使输入的数据延时输出。 | ||
DynamicsCompressorNode | 提供了一个压缩效果,当多个音频在同时播放并且混合的时候,可以通过它降低音量最大的部分的音量来帮助避免发生削波和失真。 | ||
GainNode | 接口用于音量变化。它是一个 AudioNode 类型的音频处理模块,输入后应用增益 效果,然后输出。 | // 创建一个gain node var gainNode = context.createGainNode(); // 将实例与gain node相连 source.connect(gainNode); // 将gain node与播放设备连接 gainNode.connect(context.destination); 一旦设定完成之后,你就可以通过改变值之后来控制音量了。 //减少音量 gainNode.gain.value = 0.5; |
|
StereoPannerNode | 接口表示一个简单立体声控制节点,用来左右移动音频流。 | ||
WaveShaperNode | 接口表示一个非线性的扭曲。它是AudioNode类型,可以利用曲线来对信号进行扭曲。除了一些效果明显的扭曲,还常被用来给声音添加温暖的感觉。 | ||
PeriodicWave | 用来定义周期性的波形,可被用来重塑 OscillatorNode的输出. | ||
定义音频目的地 | AudioDestinationNode | 定义了最后音频要输出到哪里,通常是输出到你的扬声器。 | |
MediaStreamAudioDestinationNode | 定义了使用 WebRTC 的MediaStream (只包含单个AudioMediaStreamTrack)应该连接的目的地,AudioMediaStreamTrack的使用方式和从getUserMedia()中得到MediaStream相似。这个接口是AudioNode类型的音频目的地。 | ||
数据分析和可视化 | AnalyserNode | 表示一个可以提供实时频率分析与时域分析的切点,这些分析数据可以用做数据分析和可视化。 | |
分离、合并声道 | ChannelSplitterNode | 可以把输入流的每个声道输出到一个独立的输出流。 | |
ChannelMergerNode | 用于把一组输入流合成到一个输出流。输出流的每一个声道对应一个输入流。 | ||
声音空间效果 | AudioListener | 代表场景中正在听声音的人的位置和朝向。 | |
PannerNode | 用于表示场景是声音的空间行为。它是AudioNode类型的音频处理模块,这个节点用于表示右手笛卡尔坐标系里声源的位置信息,运动信息(通过一个速度向量表示),方向信息(通过一个方向圆锥表示)。 | ||
使用 JavaScript 处理音频 | ScriptProcessorNode | 2014年8月9日版本中已经标记为不推荐的 | |
audioprocess (event) | 2014年8月9日版本中已经标记为不推荐的 | ||
AudioProcessingEvent | 2014年8月9日版本中已经标记为不推荐的 | ||
离线(后台)音频处理 | OfflineAudioContext | 离线音频上下文也是音频上下文AudioContext,也表示把AudioNode连接到一起的一个音频处理图。但是,与一个标准的音频上下文相比,离线上下文不能把音频渲染到扬声器,仅仅是把音频渲染到一个缓冲区。 | |
Complete | 当离线音频上下文被终止时产生。 | ||
OfflineAudioCompletionEvent | 表示上下文被终止时的事件。 | ||
音频工作者 | AudioWorkerNode | ||
AudioWorkerGlobalScope | |||
AudioProcessEvent |
案例:一个典型的音频处理案例 [源码]
第二节 JSP音乐节点可视化直方图
源码:源码
创建 Audio Context,将其音频源设置为上面定义的< audio>。再创建一个音频分析
器 Analysernode,与音频上下文 Audio Context连接。 Analyser再连接 Audiocontext,否
则数据只进不出就会导致没有声音。
//取音乐的频率
var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
var audioElement = document.getElementById('audioElement');
console.log(audioElement[0]);
var audioSrc = audioCtx.createMediaElementSource(audioElement);
var analyser = audioCtx.createAnalyser();
audioSrc.connect(analyser);
audioSrc.connect(audioCtx.destination);
var myhist = document.getElementsByTagName("rect");
var frequencyData = new Uint8Array(100);
//音频数据与SVG图形关联
function everyViz(){
analyser.getByteFrequencyData(frequencyData);
for(var idx in myhist) {
if (myhist[idx].getAttribute && frequencyData[idx])
{
myhist[idx].setAttribute("y", y-frequencyData[idx]);
myhist[idx].setAttribute("height", frequencyData[idx]);
}
}
}
window.setInterval(everyViz, 20); //设置定时器动态更新
第三节 D3音乐可视化
案例:D3音乐可视化南丁格尔图 [源码]
创建音频上下文并创建一个频谱分析器,取得音频的频谱数据,把动态的音频映射到弧形 arcPath的外径上。通过更新页面产生动画,D3提供了请求动画帧的函数requestAnimationFrame()实现动画效果。
上一篇: Echarts,Highcharts,canvas
下一篇: ECharts 前端数据可视化