웹 오디 오 API 기반 오디 오 시각 화 효과 구현
기본 개념 절
오디 오 소스 에서 데 이 터 를 얻 으 려 면
AnalyserNode
노드 가 필요 합 니 다.AudioContext.createAnalyser()
방법 으로 만 들 수 있 습 니 다.예 를 들 어:
var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
var analyser = audioCtx.createAnalyser();
그리고 이 노드(node)
를 당신 의 음 원 에 연결 합 니 다.
source = audioCtx.createMediaStreamSource(stream);
source.connect(analyser);
analyser.connect(distortion);
// etc.메모:분석 기 노드
(Analyser Node)
가 반드시 다른 노드 로 출력 되 는 것 이 아니 라 출력 하지 않 을 때 도 정상적으로 사용 할 수 있 습 니 다.그러나 전 제 는 하나의 음 원 과 연결 되 어야 한 다 는 것 이다.분석 기 노드
(Analyser Node)
는 특정한 주파수 영역 에서 빠 른 푸 립 엽 변환(Fast Fourier Transform (FFT) )
을 사용 하여 오디 오 데 이 터 를 캡 처 할 것 입 니 다.이것 은 당신 이AnalyserNode.fftSize
속성 에 부여 한 값(할당 이 없 으 면 기본 값 은 2048)에 달 려 있 습 니 다.메모:FFT 데이터 크기 조정 범 위 를 최소 값 과 최대 값 으로 지정 할 수 있 습 니 다.
AnalyserNode.minDecibels AnalyserNode.maxDecibels
을 사용 하여 설정 할 수 있 습 니 다.데이터 의 평균 상수 에 따라 AnalyserNode.smoothingTimeConstant
를 사용 하 십시오.이 페이지 들 을 읽 어서 정 보 를 어떻게 사용 하 는 지 더 알 아 보 세 요.데 이 터 를 캡 처 하려 면
AnalyserNode.getFloatFrequencyData()
또는AnalyserNode.getByteFrequencyData()
방법 으로 주파수 데 이 터 를 얻 고AnalyserNode.getByteTimeDomainData() AnalyserNode.getFloatTimeDomainData()
으로 파형 데 이 터 를 가 져 와 야 합 니 다.이 방법 들 은 데 이 터 를 특정한 배열 에 복사 하기 때문에 호출 하기 전에 새 배열 을 만들어 야 합 니 다.첫 번 째 방법 은 32 비트 부동 소수점 배열 을 만 들 고,두 번 째 방법 과 세 번 째 방법 은 8 비트 기호 없 는 정형 배열 을 만 들 수 있 기 때문에 하나의 표준 자 바스 크 립 트 배열 은 사용 할 수 없습니다.-Float 32Array 나 Uint 8 Array 배열 을 사용 해 야 합 니 다.구체 적 으로 어떤 상황 에 따라 정 해 야 합 니까?
예 를 들 어 2048 사이즈 의 FFT 를 처리 하고 있 습 니 다.우 리 는
AnalyserNode.frequencyBinCount
을 되 돌려 주 었 다.그것 은 FFT 의 절반 이 고Uint8Array()
를 호출 하여frequencyBinCount
를 길이 의 매개 변수 로 삼 았 다.이것 은 우리 가 이 사이즈 의 FFT 에 대해 얼마나 많은 데 이 터 를 수집 할 것 인 지 를 나타 낸다.
analyser.fftSize = 2048;
var bufferLength = analyser.frequencyBinCount;
var dataArray = new Uint8Array(bufferLength);
데 이 터 를 정확하게 검색 하고 우리 의 배열 에 복사 하려 면 우리 가 원 하 는 데이터 수집 방법 을 호출 하여 배열 을 매개 변수 로 전달 해 야 한다.예 를 들 어:
analyser.getByteTimeDomainData(dataArray);
지금 우 리 는 그때 의 오디 오 데 이 터 를 얻 었 고 우리 의 배열 에 병존 되 었 으 며 그것 을 우리 가 좋아 하 는 시각 화 효과 로 만 들 수 있다.예 를 들 어 그것 을HTML5 <canvas>
캔버스 에 그 릴 수 있다.주파수 막대 그래프 를 만 듭 니 다.
또 다른 작은 시각 화 방법 은 주파수 막대 그래프 를 만 드 는 것 이다.
이제 그것 이 어떻게 실현 되 었 는 지 봅 시다.
우선,우 리 는 해상도 와 빈 배열 을 설정 한 후에
clearRect()
로 캔버스 를 비 웁 니 다.이전 과 의 유일한 차이 점 은 우리 가 이번에FFT
의 크기 를 크게 줄 였 다 는 것 이다.이렇게 하 는 이 유 는 모든 주파수 가'가 는 막대'가 아니 라'막대'처럼 보이 기 때문이다.
analyser.fftSize = 256;
var bufferLength = analyser.frequencyBinCount;
console.log(bufferLength);
var dataArray = new Uint8Array(bufferLength);
canvasCtx.clearRect(0, 0, WIDTH, HEIGHT);
그 다음 에 우 리 는 draw()함 수 를 쓰 고 다시requestAnimationFrame()
로 순환 을 설정 하면 표 시 된 데 이 터 를 갱신 할 수 있 고 프레임 마다 캔버스 를 비 울 수 있 습 니 다.
function draw() {
drawVisual = requestAnimationFrame(draw);
analyser.getByteFrequencyData(dataArray);
canvasCtx.fillStyle = 'rgb(0, 0, 0)';
canvasCtx.fillRect(0, 0, WIDTH, HEIGHT);
}
이제 모든 막대 너비 와 같은 barWidth 변 수 를 설정 합 니 다.이론 적 으로 꽃무늬 천 너비 로 줄 의 개 수 를 나 누 면 그것 을 얻 을 수 있 지만 여기 서 우 리 는 2.5 를 곱 해 야 한다.이것 은 되 돌아 오 는 주파수 구역 에서 소리 가 없 기 때문에 우리 가 매일 듣 는 대부분의 소리 도 아주 작은 주파수 구역 에 있 을 뿐이다.막대 그래프 에서 우 리 는 큰 공백 을 보고 싶 지 않 을 것 이다.그래서 우 리 는 정상적으로 표시 할 수 있 는 막대 기 를 넓 혀 서 이 공백 구역 을 채 울 것 이다.우 리 는 또 하나의 고도 변수
barHeight
를 설정 하고,또 하나의 x 변 수 를 설정 하여 현재 줄무늬 의 위 치 를 기록 해 야 한다.
var barWidth = (WIDTH / bufferLength) * 2.5;
var barHeight;
var x = 0;
이전 처럼 dataArray 배열 의 데 이 터 를 반복 적 으로 옮 겨 다 닙 니 다.매번 순환 과정 에서 우 리 는 스 트 라 이 프 의 높이barHeight
를 배열 의 수치 와 같 게 한 다음 에 높이 에 따라 스 트 라 이 프 의 충전 색(스 트 라 이 프 가 높 을 수록 충전 색 이 밝 아 짐)을 설정 한 다음 에 가로 좌표 x 에서 설 치 된 너비 와 높이 의 절반 에 따라 스 트 라 이 프 를 그리 기로 결정 했다.더 설명해 야 할 것 은 각 선형 수직 방향의 위치 입 니 다.우 리 는
HEIGHT-barHeight/2
의 위치 에 각각 하 나 를 그 렸 습 니 다.이것 은 모든 선형 을 아래쪽 에서 위로 뻗 게 하고 싶 기 때 문 입 니 다.위 에서 아래로(우리 가 수직 위 치 를 0 으로 설정 하면 이렇게 그 릴 것 입 니 다)그래서 우 리 는 수직 위 치 를 캔버스 높이 에서 선형 높이 의 절반 을 줄 이 는 것 으로 설정 하면 모든 선형 은 중간 에서 아래로 그 려 캔버스 의 맨 밑 까지 그 릴 것 이다.
for(var i = 0; i < bufferLength; i++) {
barHeight = dataArray[i]/2;
canvasCtx.fillStyle = 'rgb(' + (barHeight+100) + ',50,50)';
canvasCtx.fillRect(x,HEIGHT-barHeight/2,barWidth,barHeight);
x += barWidth + 1;
}
};
아까 와 마찬가지 로 우 리 는 마지막 에draw()
함 수 를 호출 하여 전체 시각 화 과정 을 엽 니 다.draw();
이 코드 들 은 다음 과 같은 효 과 를 가 져 올 것 입 니 다.
원본 코드:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<title> </title>
</head>
<body>
<input type="file" name="" value="" id="musicFile">
<p id="tip"></p>
<canvas id="casvased" width="500" height="500"></canvas>
</body>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
//
function randomRgbColor() { // RGB
var r = Math.floor(Math.random() * 256); // 256 r
var g = Math.floor(Math.random() * 256); // 256 g
var b = Math.floor(Math.random() * 256); // 256 b
return `rgb(${r},${g},${b})`; // rgb(r,g,b)
}
// 0-255
function sum (m,n){
var num = Math.floor(Math.random()*(m - n) + n);
}
console.log(sum(0,100));
console.log(sum(100,255));
//
var canvas = document.getElementById("casvased");
var canvasCtx = canvas.getContext("2d");
// AudioContext , ;audioContext , AudioContext (AudioNode) , 。
// AudioContext , new Date()
var AudioContext = window.AudioContext || window.webkitAudioContext || window.mozAudioContext;
if (!AudioContext) {
alert(" audio API, (chrome、firefox) , !")
}
var audioContext = new AudioContext();//
//
// 1 ( )
// 2 , ,
// 3
$('#musicFile').change(function(){
if (this.files.length == 0) return;
var file = $('#musicFile')[0].files[0];// input
var fileReader = new FileReader();// FileReader
fileReader.readAsArrayBuffer(file);//
fileReader.onload = function(e) {//
//e.target.result ( )
// ,
var count = 0;
$('#tip').text(' ')
var timer = setInterval(function(){
count++;
$('#tip').text(' , '+count+' ')
},1000)
// ,
audioContext.decodeAudioData(e.target.result, function(buffer) {
clearInterval(timer)
$('#tip').text(' , :'+count+' ')
// AudioBufferSourceNode buffer
var audioBufferSourceNode = audioContext.createBufferSource();
// AnalyserNode
var analyser = audioContext.createAnalyser();
//fftSize (Fast Fourier Transform) , 2048。 , , 。 , , 。
analyser.fftSize = 256;
// ,audioContext.destination ,
// 。
// audioContext.destination 。
audioBufferSourceNode.connect(analyser);
analyser.connect(audioContext.destination);
console.log(audioContext.destination)
//
audioBufferSourceNode.buffer = buffer; //
audioBufferSourceNode.start(); // noteOn() ,
//
// var dataArray = new Uint8Array(analyser.fftSize);
// analyser.getByteFrequencyData(dataArray)// ,
// console.log(analyser.getByteFrequencyData)
var bufferLength = analyser.frequencyBinCount;
console.log(bufferLength);
var dataArray = new Uint8Array(bufferLength);
console.log(dataArray)
canvasCtx.clearRect(0, 0, 500, 500);
function draw() {
drawVisual = requestAnimationFrame(draw);
analyser.getByteFrequencyData(dataArray);
canvasCtx.fillStyle = 'rgb(0, 0, 0)';
//canvasCtx.fillStyle = ;
canvasCtx.fillRect(0, 0, 500, 500);
var barWidth = (500 / bufferLength) * 2.5;
var barHeight;
var x = 0;
for(var i = 0; i < bufferLength; i++) {
barHeight = dataArray[i];
// 0-255 Math.floor(Math.random()*255)
// 10*Math.random()
canvasCtx.fillStyle = 'rgb(' + (barHeight+100) + ','+Math.floor(Math.random()*(20- 120) + 120)+','+Math.floor(Math.random()*(10 - 50) + 50)+')';
canvasCtx.fillRect(x,500-barHeight/2,barWidth,barHeight/2);
x += barWidth + 1;
}
};
draw();
});
}
})
</script>
</html>
주의:본 논문 의 사례 는 AnalyserNode.getByte Frequency Data()와 AnalyserNode.getByte Time DomainData()의 용법 을 보 여 주 었 다.AnalyserNode.getFloat Frequency Data()와 AnalyserNode.getFloat Time DomainData()의 용법 을 보 려 면 저희 의 Voice-change-O-matic-float-data 프레젠테이션(소스 코드 도 볼 수 있 음)을 참고 하 십시오.본 논문 에 나타 난 Voice-change-O-matic 기능 과 똑 같 습 니 다.유일한 차이 점 은 부동 소수점 을 데이터 로 사용 하 는 것 입 니 다.본문의 부호 없 는 정형 수가 아니다.
https://github.com/mdn/voice-change-o-matic 》
사례 1:https://mdn.github.io/voice-change-o-matic/ 》
사례 2:http://margox.github.io/vudio.js/ 》
총결산
웹 오디 오 API 를 기반 으로 오디 오 시각 화 효 과 를 실현 하 는 이 글 은 여기까지 소개 되 었 습 니 다.더 많은 관련 웹 오디 오 API 가 오디 오 시각 화 를 실현 하 는 내용 은 예전 의 글 을 검색 하거나 아래 의 관련 글 을 계속 찾 아 보 세 요.앞으로 많은 지원 바 랍 니 다!
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
Fortinet FortiWeb Web Application Firewall Policy BypassFrom: Geffrey Velasquez Date: Wed, 2 May 2012 20:33:23 -0500...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.