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()实现动画效果。