{{APIRef("'Web Audio API'")}}
+ +Web Audio API의 AnalyserNode() 생성자는 새로운 {{domxref("AnalyserNode")}} 객체 인스턴스를 생성합니다.
var analyserNode = new AnalyserNode(context, ?options);+ +
{{domxref("AudioNodeOptions")}} dictionary로부터 매개변수를 상속받습니다.
+ +새로운 {{domxref("AnalyserNode")}} 객체 인스턴스.
+ +{{Compat}}
+ +{{domxref("AnalyserNode")}} 인터페이스의 fftSize 속성은 unsigned long 값이고 주파수 영역 데이터를 얻기 위해 고속 푸리에 변환(FFT)을 수행할 때 사용될 샘플에서의 window 사이즈를 나타냅니다.
var curValue = analyserNode.fftSize; +analyserNode.fftSize = newValue; ++ +
FFT의 window 사이즈를 나타내는 샘플의 수로 주어지는 unsigned 정수입니다. 값이 높을수록 주파수 영역의 자세함이 커지는 결과를 낳으나 시간 영역에서의 자세함은 떨어집니다.
+ +반드시 와 사이의 2의 제곱이여야만 합니다. 즉 다음 중 하나여야 합니다: 32, 64, 128, 256, 512, 1024, 2048, 4096, 8192, 16384, 그리고 32768. 기본값은 2048입니다.
참고: 만약 값이 2의 제곱이 아니거나 이 명시된 범위의 바깥에 있다면, IndexSizeError라는 이름의 {{domxref("DOMException")}}이 발생합니다.
다음의 예제는 AnalyserNode를 생성하기 위한 {{domxref("AudioContext")}}와 그리고 나서 반복적으로 시간 영역의 데이터를 수집하고 현재 오디오 입력의 "오실로스코프 스타일의" 출력을 그리기 위한 {{domxref("window.requestAnimationFrame()","requestAnimationFrame")}}과 {{htmlelement("canvas")}}의 기본 사용을 보여줍니다. 더 완벽한 응용 예제/정보를 보려면 Voice-change-O-matic 데모를 확인하세요 (관련된 코드를 보려면 app.js 라인 128–205를 참고하세요).
var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
+var analyser = audioCtx.createAnalyser();
+
+ ...
+
+analyser.fftSize = 2048;
+var bufferLength = analyser.frequencyBinCount ;
+var dataArray = new Uint8Array(bufferLength);
+analyser.getByteTimeDomainData(dataArray);
+
+// 현재 오디오 소스의 오실로스코프를 그립니다
+
+function draw() {
+
+ drawVisual = requestAnimationFrame(draw);
+
+ analyser.getByteTimeDomainData(dataArray);
+
+ canvasCtx.fillStyle = 'rgb(200, 200, 200)';
+ canvasCtx.fillRect(0, 0, WIDTH, HEIGHT);
+
+ canvasCtx.lineWidth = 2;
+ canvasCtx.strokeStyle = 'rgb(0, 0, 0)';
+
+ canvasCtx.beginPath();
+
+ var sliceWidth = WIDTH * 1.0 / bufferLength;
+ var x = 0;
+
+ for(var i = 0; i < bufferLength; i++) {
+
+ var v = dataArray[i] / 128.0;
+ var y = v * HEIGHT/2;
+
+ if(i === 0) {
+ canvasCtx.moveTo(x, y);
+ } else {
+ canvasCtx.lineTo(x, y);
+ }
+
+ x += sliceWidth;
+ }
+
+ canvasCtx.lineTo(canvas.width, canvas.height/2);
+ canvasCtx.stroke();
+ };
+
+ draw();
+
+{{Compat}}
+ +{{domxref("AnalyserNode")}} 인터페이스의 frequencyBinCount 읽기 전용 속성은 {{domxref("AnalyserNode.fftSize")}} 값의 절반인 unsigned 정수입니다. 이것은 일반적으로 시각화를 위해 사용할 데이터 값의 수와 동일시됩니다.
var arrayLength = analyserNode.frequencyBinCount; ++ +
{{domxref("AnalyserNode.getByteFrequencyData()")}}와 {{domxref("AnalyserNode.getFloatFrequencyData()")}}가 제공된 TypedArray내로 복사하는 값의 수와 동일한 unsigned 정수.
고속 푸리에 변환이 정의된 방법에 관계된 기술적인 이유로, 이것은 언제나 {{domxref("AnalyserNode.fftSize")}} 값의 절반입니다. 그러므로, 이것은 다음 중 하나입니다: 16, 32, 64, 128, 256, 512, 1024, 2048, 4096, 8192, 그리고 16384.
다음의 예제는 AnalyserNode를 생성하기 위한 {{domxref("AudioContext")}}와 그리고 나서 반복적으로 주파수 데이터를 수집하고 현재 오디오 입력의 "winamp 막대그래프 스타일의" 출력을 그리기 위한 {{domxref("window.requestAnimationFrame()","requestAnimationFrame")}}과 {{htmlelement("canvas")}}의 기본 사용을 보여줍니다. 더 완벽한 응용 예제/정보를 보려면 Voice-change-O-matic 데모를 확인하세요 (관련된 코드를 보려면 app.js 라인 128–205를 참고하세요).
var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
+var analyser = audioCtx.createAnalyser();
+analyser.minDecibels = -90;
+analyser.maxDecibels = -10;
+
+ ...
+
+analyser.fftSize = 256;
+var bufferLength = analyser.frequencyBinCount;
+console.log(bufferLength);
+var dataArray = new Uint8Array(bufferLength);
+
+canvasCtx.clearRect(0, 0, WIDTH, HEIGHT);
+
+function draw() {
+ drawVisual = requestAnimationFrame(draw);
+
+ analyser.getByteFrequencyData(dataArray);
+
+ canvasCtx.fillStyle = 'rgb(0, 0, 0)';
+ canvasCtx.fillRect(0, 0, WIDTH, HEIGHT);
+
+ var barWidth = (WIDTH / bufferLength) * 2.5 - 1;
+ var barHeight;
+ var x = 0;
+
+ for(var i = 0; i < bufferLength; i++) {
+ barHeight = dataArray[i];
+
+ canvasCtx.fillStyle = 'rgb(' + (barHeight+100) + ',50,50)';
+ canvasCtx.fillRect(x,HEIGHT-barHeight/2,barWidth,barHeight/2);
+
+ x += barWidth;
+ }
+};
+
+draw();
+
+{{Compat}}
+ +{{ APIRef("Web Audio API") }}
+ +{{ domxref("AnalyserNode") }} 인터페이스의 getByteFrequencyData() 메서드는 전달된 {{domxref("Uint8Array")}} (unsigned byte array) 내로 현재 주파수 데이터를 복사합니다.
주파수 데이터는 0에서 255 스케일의 정수로 구성되어 있습니다.
+ +배열 내의 각 원소는 특정한 주파수에 대한 데시벨 값을 나타냅니다. 주파수들은 0에서 샘플 레이트의 1/2까지 선형적으로 퍼져 있습니다. 예를 들자면, 48000 샘플 레이트에 대해서, 배열의 마지막 원소는 24000 Hz에 대한 데시벨 값을 나타냅니다.
만약 배열이 {{domxref("AnalyserNode.frequencyBinCount")}}보다 더 적은 요소를 가지고 있다면, 초과한 요소는 탈락됩니다. 만약 이것이 필요한 것보다 더 많은 요소를 가지고 있다면, 초과한 요소는 무시됩니다.
+ +var audioCtx = new AudioContext(); +var analyser = audioCtx.createAnalyser(); +var dataArray = new Uint8Array(analyser.frequencyBinCount); // Uint8Array는 frequencyBinCount와 같은 길이여야만 합니다 + +void analyser.getByteFrequencyData(dataArray); // getByteFrequencyData()로부터 반환된 데이터로 Uint8Array를 채웁니다 ++ +
array-Infinity입니다.없음.
+ +다음의 예제는 AnalyserNode를 생성하기 위한 {{domxref("AudioContext")}}와 그리고 나서 반복적으로 주파수 데이터를 수집하고 현재 오디오 입력의 "winamp 막대그래프 스타일의" 출력을 그리기 위한 {{domxref("window.requestAnimationFrame()","requestAnimationFrame")}}과 {{htmlelement("canvas")}}의 기본 사용을 보여줍니다. 더 완벽한 응용 예제/정보를 보려면 Voice-change-O-matic 데모를 확인하세요 (관련된 코드를 보려면 app.js 라인 128–205를 참고하세요).
var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
+var analyser = audioCtx.createAnalyser();
+
+ ...
+
+analyser.fftSize = 256;
+var bufferLength = analyser.frequencyBinCount;
+console.log(bufferLength);
+var dataArray = new Uint8Array(bufferLength);
+
+canvasCtx.clearRect(0, 0, WIDTH, HEIGHT);
+
+function draw() {
+ drawVisual = requestAnimationFrame(draw);
+
+ analyser.getByteFrequencyData(dataArray);
+
+ canvasCtx.fillStyle = 'rgb(0, 0, 0)';
+ canvasCtx.fillRect(0, 0, WIDTH, HEIGHT);
+
+ var barWidth = (WIDTH / bufferLength) * 2.5;
+ var barHeight;
+ var x = 0;
+
+ for(var i = 0; i < bufferLength; i++) {
+ barHeight = dataArray[i];
+
+ canvasCtx.fillStyle = 'rgb(' + (barHeight+100) + ',50,50)';
+ canvasCtx.fillRect(x,HEIGHT-barHeight/2,barWidth,barHeight/2);
+
+ x += barWidth + 1;
+ }
+};
+
+draw();
+
+{{Compat}}
+ +{{ APIRef("Mountain View APIRef Project") }}
+ +{{ domxref("AnalyserNode") }} 인터페이스의 getByteTimeDomainData() 메서드는 전달된 {{domxref("Uint8Array")}} (unsigned byte array) 내로 현재 파형, 즉 시간 영역 데이터를 복사합니다.
만약 배열이 {{domxref("AnalyserNode.fftSize")}}보다 더 적은 요소를 가지고 있다면, 초과한 요소는 탈락됩니다. 만약 이것이 필요한 것보다 더 많은 요소를 가지고 있다면, 초과한 요소는 무시됩니다.
+ +const audioCtx = new AudioContext(); +const analyser = audioCtx.createAnalyser(); +const dataArray = new Uint8Array(analyser.fftSize); // Uint8Array는 fftSize와 같은 길이여야만 합니다 +analyser.getByteTimeDomainData(dataArray); // getByteTimeDomainData()로부터 반환된 데이터로 Uint8Array를 채웁니다 ++ +
arrayvoid | 없음
다음의 예제는 AnalyserNode를 생성하기 위한 {{domxref("AudioContext")}}와 그리고 나서 반복적으로 시간 영역 데이터를 수집하고 현재 오디오 입력의 "오실로스코프 스타일의" 출력을 그리기 위한 {{domxref("window.requestAnimationFrame()","requestAnimationFrame")}}과 {{htmlelement("canvas")}}의 기본 사용을 보여줍니다. 더 완벽한 응용 예제/정보를 보려면 Voice-change-O-matic 데모를 확인하세요 (관련된 코드를 보려면 app.js 라인 128–205를 참고하세요).
const audioCtx = new (window.AudioContext || window.webkitAudioContext)();
+const analyser = audioCtx.createAnalyser();
+
+ ...
+
+analyser.fftSize = 2048;
+const bufferLength = analyser.fftSize;
+const dataArray = new Uint8Array(bufferLength);
+analyser.getByteTimeDomainData(dataArray);
+
+// 현재 오디오 소스의 오실로스코프를 그립니다
+function draw() {
+ drawVisual = requestAnimationFrame(draw);
+ analyser.getByteTimeDomainData(dataArray);
+
+ canvasCtx.fillStyle = 'rgb(200, 200, 200)';
+ canvasCtx.fillRect(0, 0, WIDTH, HEIGHT);
+
+ canvasCtx.lineWidth = 2;
+ canvasCtx.strokeStyle = 'rgb(0, 0, 0)';
+
+ const sliceWidth = WIDTH * 1.0 / bufferLength;
+ let x = 0;
+
+ canvasCtx.beginPath();
+ for(var i = 0; i < bufferLength; i++) {
+ const v = dataArray[i]/128.0;
+ const y = v * HEIGHT/2;
+
+ if(i === 0)
+ canvasCtx.moveTo(x, y);
+ else
+ canvasCtx.lineTo(x, y);
+
+ x += sliceWidth;
+ }
+
+ canvasCtx.lineTo(WIDTH, HEIGHT/2);
+ canvasCtx.stroke();
+};
+
+draw();
+
+
+{{Compat}}
+ +{{ APIRef("Web Audio API") }}
+ +{{domxref("AnalyserNode")}} 인터페이스의 getFloatFrequencyData() 메서드는 전달된 {{domxref("Float32Array")}} 배열 내로 현재 주파수 데이터를 복사합니다.
배열 내의 각 원소는 특정한 주파수에 대한 데시벨 값을 나타냅니다. 주파수들은 0에서 샘플 레이트의 1/2까지 선형적으로 퍼져 있습니다. 예를 들자면, 48000 Hz 샘플 레이트에 대해서, 배열의 마지막 원소는 24000 Hz에 대한 데시벨 값을 나타냅니다.
만약 여러분이 더 높은 성능을 원하고 정밀성에 대해서는 상관하지 않는다면, {{domxref("AnalyserNode.getByteFrequencyData()")}}을 대신 사용할 수 있는데, 이는 {{domxref("Uint8Array")}}에서 동작합니다.
+ +var audioCtx = new AudioContext(); +var analyser = audioCtx.createAnalyser(); +var dataArray = new Float32Array(analyser.frequencyBinCount); // Float32Array는 frequencyBinCount와 같은 길이여야만 합니다 + +void analyser.getFloatFrequencyData(dataArray); // getFloatFrequencyData()로부터 반환된 데이터로 Float32Array를 채웁니다 ++ +
array-Infinity입니다.없음.
+ +const audioCtx = new AudioContext(); +const analyser = audioCtx.createAnalyser(); +// Float32Array는 frequencyBinCount와 같은 길이여야만 합니다 +const myDataArray = new Float32Array(analyser.frequencyBinCount); +// getFloatFrequencyData()로부터 반환된 데이터로 Float32Array를 채웁니다 +analyser.getFloatFrequencyData(myDataArray); ++ +
다음의 예제는 {{domxref("MediaElementAudioSourceNode")}}를 AnalyserNode에 연결하기 위한 {{domxref("AudioContext")}}의 기본 사용을 보여줍니다. 오디오가 재생되는 동안, 우리는 {{domxref("window.requestAnimationFrame()","requestAnimationFrame()")}}로 주파수 데이터를 반복적으로 수집하고 "winamp 막대그래프 스타일"을 {{htmlelement("canvas")}} 요소에 그립니다.
더 완벽한 응용 예제/정보를 보려면 Voice-change-O-matic-float-data 데모를 확인하세요 (소스 코드도 보세요).
+ +<!doctype html>
+<body>
+<script>
+const audioCtx = new AudioContext();
+
+//오디오 소스를 생성합니다
+//여기서, 우리는 오디오 파일을 사용하나, 이것은 또한 예를 들자면 마이크 입력도 될 수 있습니다
+const audioEle = new Audio();
+audioEle.src = 'my-audio.mp3';//파일명을 여기 삽입하세요
+audioEle.autoplay = true;
+audioEle.preload = 'auto';
+const audioSourceNode = audioCtx.createMediaElementSource(audioEle);
+
+//analyser 노드를 생성합니다
+const analyserNode = audioCtx.createAnalyser();
+analyserNode.fftSize = 256;
+const bufferLength = analyserNode.frequencyBinCount;
+const dataArray = new Float32Array(bufferLength);
+
+//오디오 노드 네트워크를 설정합니다
+audioSourceNode.connect(analyserNode);
+analyserNode.connect(audioCtx.destination);
+
+//2D canvas를 생성합니다
+const canvas = document.createElement('canvas');
+canvas.style.position = 'absolute';
+canvas.style.top = 0;
+canvas.style.left = 0;
+canvas.width = window.innerWidth;
+canvas.height = window.innerHeight;
+document.body.appendChild(canvas);
+const canvasCtx = canvas.getContext('2d');
+canvasCtx.clearRect(0, 0, canvas.width, canvas.height);
+
+function draw() {
+ //다음 draw를 예정시킵니다
+ requestAnimationFrame(draw);
+
+ //스펙트럼 데이터를 얻습니다
+ analyserNode.getFloatFrequencyData(dataArray);
+
+ //검은색 배경을 그립니다
+ canvasCtx.fillStyle = 'rgb(0, 0, 0)';
+ canvasCtx.fillRect(0, 0, canvas.width, canvas.height);
+
+ //스펙트럼을 그립니다
+ const barWidth = (canvas.width / bufferLength) * 2.5;
+ let posX = 0;
+ for (let i = 0; i < bufferLength; i++) {
+ const barHeight = (dataArray[i] + 140) * 2;
+ canvasCtx.fillStyle = 'rgb(' + Math.floor(barHeight + 100) + ', 50, 50)';
+ canvasCtx.fillRect(posX, canvas.height - barHeight / 2, barWidth, barHeight / 2);
+ posX += barWidth + 1;
+ }
+};
+
+draw();
+</script>
+</body>
+
+{{Compat}}
+ +{{ APIRef("Web Audio API") }}
+ +{{ domxref("AnalyserNode") }} 인터페이스의 getFloatTimeDomainData() 메서드는 전달된 {{domxref("Float32Array")}} 배열 내로 현재 파형, 즉 시간 영역 데이터를 복사합니다.
var audioCtx = new AudioContext(); +var analyser = audioCtx.createAnalyser(); +var dataArray = new Float32Array(analyser.fftSize); // Float32Array는 fftSize와 같은 길이일 필요가 있습니다 +analyser.getFloatTimeDomainData(dataArray); // getFloatTimeDomainData()로부터 반환된 데이터로 Float32Array를 채웁니다 ++ + +
array없음.
+ +다음의 예제는 AnalyserNode를 생성하기 위한 {{domxref("AudioContext")}}와 그리고 나서 반복적으로 시간 영역 데이터를 수집하고 현재 오디오 입력의 "오실로스코프 스타일의" 출력을 그리기 위한 {{domxref("window.requestAnimationFrame()","requestAnimationFrame")}}과 {{htmlelement("canvas")}}의 기본 사용을 보여줍니다. 더 완벽한 응용 예제/정보를 보려면 Voice-change-O-matic-float-data 데모를 확인하세요 (소스 코드도 보세요).
var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
+var analyser = audioCtx.createAnalyser();
+
+ ...
+
+analyser.fftSize = 1024;
+var bufferLength = analyser.fftSize;
+console.log(bufferLength);
+var dataArray = new Float32Array(bufferLength);
+
+canvasCtx.clearRect(0, 0, WIDTH, HEIGHT);
+
+function draw() {
+ drawVisual = requestAnimationFrame(draw);
+ analyser.getFloatTimeDomainData(dataArray);
+
+ canvasCtx.fillStyle = 'rgb(200, 200, 200)';
+ canvasCtx.fillRect(0, 0, WIDTH, HEIGHT);
+ canvasCtx.lineWidth = 2;
+ canvasCtx.strokeStyle = 'rgb(0, 0, 0)';
+ canvasCtx.beginPath();
+
+ var sliceWidth = WIDTH * 1.0 / bufferLength;
+ var x = 0;
+
+ for(var i = 0; i < bufferLength; i++) {
+ var v = dataArray[i] * 200.0;
+ var y = HEIGHT/2 + v;
+
+ if(i === 0) {
+ canvasCtx.moveTo(x, y);
+ } else {
+ canvasCtx.lineTo(x, y);
+ }
+ x += sliceWidth;
+ }
+
+ canvasCtx.lineTo(canvas.width, canvas.height/2);
+ canvasCtx.stroke();
+};
+
+draw();
+
+
+{{Compat}}
+ +{{APIRef("Web Audio API")}}
-AnalyserNode 는 시간대 별로 실시간 주파수의 정보를 표현합니다. {{domxref("AudioNode")}} 를 통해 오디오 스트림정보가 그대로 입력되어 출력이 되지만 이를 통해 당신은 새로운 형태의 데이터를 생성하거나, 가공하고 오디오를 시각화 시키는 작업을 할 수 있습니다.
AnalyserNode 인터페이스는 실시간 주파수와 시간 영역 분석 정보를 제공 가능한 노드를 표현합니다. 이것은 변경되지 않은 오디오 스트림을 입력에서 출력으로 전달하지만, 여러분은 생성된 데이터를 얻고, 그것을 처리하고, 오디오 시각화를 생성할 수 있습니다.
AnalyzerNode 는 하나의 입력에 하나의 출력을 가집니다. 그리고 이 노드는 출력이 명시되지 않더라도 동작을 합니다.
AnalyserNode는 정확히 하나의 입력과 하나의 출력을 가집니다. 이 노드는 출력이 연결되지 않았더라도 작동합니다.
| Number of inputs | +입력의 수 | 1 |
|
|---|---|---|---|
| Number of outputs | -1 (but may be left unconnected) |
+ 출력의 수 | +1 (그러나 연결되지 않은 채로 남아있을지도 모릅니다) |
| Channel count mode | -"explicit" |
+ "max" |
|
| Channel count | -1 |
+ 2 |
|
| Channel interpretation | @@ -40,125 +42,129 @@ translation_of: Web/API/AnalyserNode
Note: See the guide Visualizations with Web Audio API for more information on creating audio visualizations.
-이 인터페이스는 다음의 부모 인터페이스들로부터 상속받습니다:
-{{InheritanceDiagram}}
-{{domxref("AudioNode")}} 를 부모로 가지는 프로퍼티.
+AnalyserNode 객체의 새로운 인스턴스를 생성합니다.부모인 {{domxref("AudioNode")}}로부터 속성을 상속받습니다.
+ +getByteFrequencyData()를 사용하여 얻은 결과값이다.getByteFrequencyData()를 사용할 때 결과의 범위에 대한 최소 값을 명시합니다.getByteFrequencyData()를 사용하여 얻은 결과값이다.getByteFrequencyData()를 사용할 때 결과의 범위에 대한 최대 값을 명시합니다.{{domxref("AudioNode")}} 을 상속하는 메서드.
+부모인 {{domxref("AudioNode")}}로부터 메서드를 상속받습니다.
이 예제는 {{domxref("AudioContext")}} 를 사용해 AnalyserNode를 생성하여 사용하는 방법을 보여주고, {{domxref("window.requestAnimationFrame()","requestAnimationFrame")}} and {{htmlelement("canvas")}} 를 통해 반복적으로 시간기반(time-domain) 의 정보를 반복적으로 수집 및 "oscilloscope style" 를 통해 입력된 오디오 정보를 시각화하여 보여주는 예제입니다. 더 많은 정보와 예제는 Voice-change-O-matic demo (see app.js lines 128–205 for relevant code)를 확인 하세요.
+참고: 오디오 시각화 생성하기에 대한 더 많은 정보를 보려면 Web Audio API 시각화 가이드를 참고하세요.
+다음의 예제는 AnalyserNode를 생성하기 위한 {{domxref("AudioContext")}}와 그리고 나서 반복적으로 시간 영역의 데이터를 수집하고 현재 오디오 입력의 "오실로스코프 스타일의" 출력을 그리기 위한 {{domxref("window.requestAnimationFrame()","requestAnimationFrame")}}과 {{htmlelement("canvas")}}의 기본 사용을 보여줍니다. 더 완벽한 응용 예제/정보를 보려면 Voice-change-O-matic 데모를 확인하세요 (관련된 코드를 보려면 app.js 라인 128–205를 참고하세요).
var audioCtx = new(window.AudioContext || window.webkitAudioContext)();
+
+// ...
-var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
var analyser = audioCtx.createAnalyser();
-// 새로운 AnalyserNode를 생성한다.
- ...
+analyser.fftSize = 2048;
+
+var bufferLength = analyser.frequencyBinCount;
+var dataArray = new Uint8Array(bufferLength);
+analyser.getByteTimeDomainData(dataArray);
+
+// 분석될 소스에 연결합니다
+source.connect(analyser);
-analyser.fftSize = 2048; // FFT의 크기를 2048로 한다.
-var bufferLength = analyser.frequencyBinCount; // 시각화를 하기 위한 데이터의 갯수
-var dataArray = new Uint8Array(bufferLength); // 데이터를 담을 bufferLength 크기의 Unit8Array의 배열을 생성
-analyser.getByteTimeDomainData(dataArray); // 시간기반의 데이터를 Unit8Array배열로 전달
+// ID "oscilloscope"로 정의된 canvas를 얻습니다
+var canvas = document.getElementById("oscilloscope");
+var canvasCtx = canvas.getContext("2d");
-// 얻어진 데이터를 기반으로 시각화 작업을 한다. 캔버스를 이용한다.
+// 현재 오디오 소스의 오실로스코프를 그립니다
function draw() {
- drawVisual = requestAnimationFrame(draw);
+ requestAnimationFrame(draw);
- analyser.getByteTimeDomainData(dataArray);
+ analyser.getByteTimeDomainData(dataArray);
- canvasCtx.fillStyle = 'rgb(200, 200, 200)';
- canvasCtx.fillRect(0, 0, WIDTH, HEIGHT);
+ canvasCtx.fillStyle = "rgb(200, 200, 200)";
+ canvasCtx.fillRect(0, 0, canvas.width, canvas.height);
- canvasCtx.lineWidth = 2;
- canvasCtx.strokeStyle = 'rgb(0, 0, 0)';
+ canvasCtx.lineWidth = 2;
+ canvasCtx.strokeStyle = "rgb(0, 0, 0)";
- canvasCtx.beginPath();
+ canvasCtx.beginPath();
- var sliceWidth = WIDTH * 1.0 / bufferLength;
- var x = 0;
+ var sliceWidth = canvas.width * 1.0 / bufferLength;
+ var x = 0;
- for(var i = 0; i < bufferLength; i++) {
+ for (var i = 0; i < bufferLength; i++) {
- var v = dataArray[i] / 128.0;
- var y = v * HEIGHT/2;
+ var v = dataArray[i] / 128.0;
+ var y = v * canvas.height / 2;
- if(i === 0) {
- canvasCtx.moveTo(x, y);
- } else {
- canvasCtx.lineTo(x, y);
- }
+ if (i === 0) {
+ canvasCtx.moveTo(x, y);
+ } else {
+ canvasCtx.lineTo(x, y);
+ }
- x += sliceWidth;
- }
+ x += sliceWidth;
+ }
- canvasCtx.lineTo(canvas.width, canvas.height/2);
- canvasCtx.stroke();
- };
+ canvasCtx.lineTo(canvas.width, canvas.height / 2);
+ canvasCtx.stroke();
+}
- draw();
+draw();
+
-| Specification | -Status | -Comment | -
|---|---|---|
| {{SpecName('Web Audio API', '#the-analysernode-interface', 'AnalyserNode')}} | -{{Spec2('Web Audio API')}} | -- |
{{Compat("api.AnalyserNode")}}
+{{Compat}}
-{{domxref("AnalyserNode")}} 인터페이스의 maxDecibels 속성은 unsigned byte 값으로의 전환에 대해서, FFT 분석 데이터의 스케일링 범위에서의 최대 power 값을 나타내는 double 값입니다 — 기본적으로, 이것은 getByteFrequencyData()를 사용할 때 결과의 범위에 대한 최대 값을 명시합니다.
var curValue = analyserNode.maxDecibels; +analyserNode.maxDecibels = newValue; ++ +
FFT 분석 데이터를 스케일링하는 것에 대한 최대 데시벨 값을 나타내는 double인데, 0 dB는 가능한 가장 큰 소리를 나타내고, -10 dB는 그것의 10번째, 등등입니다. 기본 값은 -30 dB입니다.
getByteFrequencyData()로부터 데이터를 얻을 때, maxDecibels 또는 더 높은 진폭을 가진 모든 주파수는 255로 반환됩니다.
참고: 만약 AnalyserNode.minDecibels보다 더 작거나 같은 값이 설정된다면, IndexSizeError 예외가 발생합니다.
다음의 예제는 AnalyserNode를 생성하기 위한 {{domxref("AudioContext")}}와 그리고 나서 반복적으로 주파수 데이터를 수집하고 현재 오디오 입력의 "winamp 막대그래프 스타일의" 출력을 그리기 위한 {{domxref("window.requestAnimationFrame()","requestAnimationFrame")}}과 {{htmlelement("canvas")}}의 기본 사용을 보여줍니다. 더 완벽한 응용 예제/정보를 보려면 Voice-change-O-matic 데모를 확인하세요 (관련된 코드를 보려면 app.js 라인 128–205를 참고하세요).
var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
+var analyser = audioCtx.createAnalyser();
+analyser.minDecibels = -90;
+analyser.maxDecibels = -10;
+
+ ...
+
+analyser.fftSize = 256;
+var bufferLength = analyser.frequencyBinCount;
+console.log(bufferLength);
+var dataArray = new Uint8Array(bufferLength);
+
+canvasCtx.clearRect(0, 0, WIDTH, HEIGHT);
+
+function draw() {
+ drawVisual = requestAnimationFrame(draw);
+
+ analyser.getByteFrequencyData(dataArray);
+
+ canvasCtx.fillStyle = 'rgb(0, 0, 0)';
+ canvasCtx.fillRect(0, 0, WIDTH, HEIGHT);
+
+ var barWidth = (WIDTH / bufferLength) * 2.5;
+ var barHeight;
+ var x = 0;
+
+ for(var i = 0; i < bufferLength; i++) {
+ barHeight = dataArray[i];
+
+ canvasCtx.fillStyle = 'rgb(' + (barHeight+100) + ',50,50)';
+ canvasCtx.fillRect(x,HEIGHT-barHeight/2,barWidth,barHeight/2);
+
+ x += barWidth + 1;
+ }
+};
+
+draw();
+
+{{Compat}}
+ +{{ APIRef("Web Audio API") }}
+ +{{ domxref("AnalyserNode") }} 인터페이스의 minDecibels 속성은 unsigned byte 값으로의 전환에 대해서, FFT 분석 데이터의 스케일링 범위에서의 최소 power 값을 나타내는 double 값입니다 — 기본적으로, 이것은 getByteFrequencyData()를 사용할 때 결과의 범위에 대한 최소 값을 명시합니다.
var curValue = analyserNode.minDecibels; +analyserNode.minDecibels = newValue; ++ +
FFT 분석 데이터를 스케일링하는 것에 대한 최소 데시벨 값을 나타내는 double인데, 0 dB는 가능한 가장 큰 소리를 나타내고, -10 dB는 그것의 10번째, 등등입니다. 기본 값은 -100 dB입니다.
getByteFrequencyData()로부터 데이터를 얻을 때, minDecibels 또는 더 낮은 진폭을 가진 모든 주파수는 0으로 반환됩니다.
참고: 만약 AnalyserNode.maxDecibels보다 더 큰 값이 설정된다면, INDEX_SIZE_ERR 예외가 발생합니다.
다음의 예제는 AnalyserNode를 생성하기 위한 {{domxref("AudioContext")}}와 그리고 나서 반복적으로 주파수 데이터를 수집하고 현재 오디오 입력의 "winamp 막대그래프 스타일의" 출력을 그리기 위한 {{domxref("window.requestAnimationFrame()","requestAnimationFrame")}}과 {{htmlelement("canvas")}}의 기본 사용을 보여줍니다. 더 완벽한 응용 예제/정보를 보려면 Voice-change-O-matic 데모를 확인하세요 (관련된 코드를 보려면 app.js 라인 128–205를 참고하세요).
var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
+var analyser = audioCtx.createAnalyser();
+analyser.minDecibels = -90;
+analyser.maxDecibels = -10;
+
+ ...
+
+analyser.fftSize = 256;
+var bufferLength = analyser.frequencyBinCount;
+console.log(bufferLength);
+var dataArray = new Uint8Array(bufferLength);
+
+canvasCtx.clearRect(0, 0, WIDTH, HEIGHT);
+
+function draw() {
+ drawVisual = requestAnimationFrame(draw);
+
+ analyser.getByteFrequencyData(dataArray);
+
+ canvasCtx.fillStyle = 'rgb(0, 0, 0)';
+ canvasCtx.fillRect(0, 0, WIDTH, HEIGHT);
+
+ var barWidth = (WIDTH / bufferLength) * 2.5;
+ var barHeight;
+ var x = 0;
+
+ for(var i = 0; i < bufferLength; i++) {
+ barHeight = dataArray[i];
+
+ canvasCtx.fillStyle = 'rgb(' + (barHeight+100) + ',50,50)';
+ canvasCtx.fillRect(x,HEIGHT-barHeight/2,barWidth,barHeight/2);
+
+ x += barWidth + 1;
+ }
+};
+
+draw();
+
+{{Compat}}
+ +{{ APIRef("Web Audio API") }}
+ +{{ domxref("AnalyserNode") }} 인터페이스의 smoothingTimeConstant 속성은 마지막 분석 프레임의 에버리징(averaging) 상수를 나타내는 double 값입니다. 이것은 기본적으로 현재 버퍼와 AnalyserNode가 처리한 마지막 버퍼 사이의 평균이고, 더욱 매끄러운 시간에 대한 값 변화의 집합을 결과로 낳습니다.
var smoothValue = analyserNode.smoothingTimeConstant; +analyserNode.smoothingTimeConstant = newValue; ++ +
0에서 1까지의 범위 내의 double (0은 시간 에버리징이 없음을 의미). 기본값은 0.8입니다.
만약 0이 설정된다면, 완료된 에버리징이 없는 것이지만, 1의 값은 "값을 계산하는 동안 이전과 현재 버퍼를 많이 겹치기"를 의미하는데, 이는 근본적으로 {{domxref("AnalyserNode.getFloatFrequencyData")}}/{{domxref("AnalyserNode.getByteFrequencyData")}} 호출에 걸쳐 변화들을 매끄럽게 합니다.
+ +기술적인 측면에서, 우리는 Blackman window를 적용했고 값들을 시간에 대해 매끄럽게 합니다. 기본값은 대부분의 경우에 적합합니다.
+ +참고: 만약 범위 0-1 바깥의 값이 설정된다면, INDEX_SIZE_ERR 예외가 발생합니다.
다음의 예제는 AnalyserNode를 생성하기 위한 {{domxref("AudioContext")}}와 그리고 나서 반복적으로 주파수 데이터를 수집하고 현재 오디오 입력의 "winamp 막대그래프 스타일의" 출력을 그리기 위한 {{domxref("window.requestAnimationFrame()","requestAnimationFrame")}}과 {{htmlelement("canvas")}}의 기본 사용을 보여줍니다. 더 완벽한 응용 예제/정보를 보려면 Voice-change-O-matic 데모를 확인하세요 (관련된 코드를 보려면 app.js 라인 128–205를 참고하세요).
만약 여러분이 smoothingTimeConstant()이 가진 영향에 대해 궁금하다면, 위의 예제를 복사해서 analyser.smoothingTimeConstant = 0;을 대신 설정해 보세요. 값 변화가 더욱 삐걱거리는 것을 인지하실 것입니다.
var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
+var analyser = audioCtx.createAnalyser();
+analyser.minDecibels = -90;
+analyser.maxDecibels = -10;
+analyser.smoothingTimeConstant = 0.85;
+
+ ...
+
+analyser.fftSize = 256;
+var bufferLength = analyser.frequencyBinCount;
+console.log(bufferLength);
+var dataArray = new Uint8Array(bufferLength);
+
+canvasCtx.clearRect(0, 0, WIDTH, HEIGHT);
+
+function draw() {
+ drawVisual = requestAnimationFrame(draw);
+
+ analyser.getByteFrequencyData(dataArray);
+
+ canvasCtx.fillStyle = 'rgb(0, 0, 0)';
+ canvasCtx.fillRect(0, 0, WIDTH, HEIGHT);
+
+ var barWidth = (WIDTH / bufferLength) * 2.5;
+ var barHeight;
+ var x = 0;
+
+ for(var i = 0; i < bufferLength; i++) {
+ barHeight = dataArray[i];
+
+ canvasCtx.fillStyle = 'rgb(' + (barHeight+100) + ',50,50)';
+ canvasCtx.fillRect(x,HEIGHT-barHeight/2,barWidth,barHeight/2);
+
+ x += barWidth + 1;
+ }
+};
+
+draw();
+
+{{Compat}}
+ +