欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

D3临摹作业(西安交大国家艺术基金数据可视化培训第25天)

程序员文章站 2022-03-10 16:20:49
...

第九章 音乐可视化

第一节 音乐可视化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()实现动画效果。

相关标签: 数据可视化