AudioContext는 오디오 시각화를 구현합니다.

오디오 시각화를 달성하고 멋진 효과를 얻으려면 Web Audio API에서 제공하는 AudioContext 몇 가지 메소드를 사용해야 합니다.

AudioContext 인터페이스는 서로 연결된 오디오 모듈로 구축된 오디오 처리 그래프를 나타내며, 각 모듈은 AudioNode 로 표시됩니다. 오디오 컨텍스트는 포함된 노드 생성과 오디오 처리 또는 디코딩 실행을 제어합니다. 모든 작업은 컨텍스트 내에서 발생하므로 다른 작업을 수행하기 전에 AudioContext 개체를 만들어야 합니다. 매번 새로운 AudioContext 객체를 초기화하는 것보다 AudioContext 객체를 생성하여 재사용하고 동시에 여러 다른 오디오 소스 및 파이프에 대해 하나의 AudioContext 객체를 사용하는 것이 좋습니다.

1. 오디오 및 캔버스 태그 준비

 <audio class="audio" ref='audio' :src='tune' @ended='ended'></audio>

<캔버스 ref='캔버스' 폭='300px' 높이='300px'></canvas>

2. 새로운 AudioContext 객체를 생성하고 반환합니다.

 const ctx = 새로운 AudioContext();

3. 새로운 MediaElementAudioSourceNode 객체 생성

AudioContext 인터페이스의 createMediaElementSource() 메소드를 사용하여 새로운 MediaElementAudioSourceNode 객체를 생성하고, 기존 HTML<audio>or<video>` 요소를 입력하여 해당 오디오를 재생하거나 수정할 수 있습니다.

 const audioSrc = ctx.createMediaElementSource(this.audioElement);

4. AnalyserNode 객체 생성

AudioContext 의 createAnalyser() 메서드는 오디오 시간 및 주파수 데이터를 얻고 데이터 시각화를 구현하는 데 사용할 수 있는 AnalyserNode 를 생성할 수 있습니다.

 const 분석기 = ctx.createAnalyser();

5. fftSize 속성을 설정합니다.

AnalyserNode 인터페이스의 fftSize 속성 값은 (신호) 샘플의 창 크기를 나타내는 부호 없는 긴 정수 값입니다. 이러한 (신호) 샘플은 FFT(고속 푸리에 변환)를 수행할 때 주파수 영역 데이터를 얻는 데 사용됩니다. fftSize 속성의 값은 32에서 32768 사이의 0이 아닌 2의 거듭제곱이어야 합니다. 기본값은 2048입니다.

 analyzer.fftSize = 512;

6. audioSrc와 분석기 연결

AudioNode 인터페이스의 connect() 메소드를 사용하면 노드의 출력을 지정된 대상에 연결할 수 있습니다. 이 지정된 대상은 다른 AudioNode(따라서 오디오 데이터를 다음 지정된 노드로 전달) 또는 AudioParam이 될 수 있으므로 이전 노드는 다음과 같습니다. 출력 데이터는 시간이 지남에 따라 다음 매개변수 값을 자동으로 변경할 수 있습니다.

 audioSrc.connect(분석기);

7. 링크 분석기와 ctx.destination

AudioContext 의 destination 속성은 일반적으로 스피커와 같은 오디오 렌더링 장치인 context 에 있는 모든 오디오(노드)의 최종 대상 노드를 나타내는 AudioDestinationNode 를 반환합니다.

 analyzer.connect(ctx.destination)

8. 노래가 재생 중입니다.

Uint8Array 배열 유형은 8비트 부호 없는 정수 배열을 나타내며, 생성 시 내용은 0으로 초기화됩니다. 생성 후 배열의 요소는 객체로 참조되거나 배열 첨자 인덱싱을 사용하여 참조될 수 있습니다.

AnalyserNode 인터페이스의 getByteFrequencyData() 方현재 주파수 데이터를 수신 Uint8Array (부호 없는 바이트 배열)에 복사합니다.

배열의 길이가 AnalyserNode.frequencyBinCount 보다 작으면 Analyser 의 추가 요소가 삭제되고 길이가 더 크면 배열의 추가 요소가 무시됩니다.

 시각화() {

const arr = new Uint8Array(this.analyser.주파수BinCount);

this.analyser.getByteFrequencyData(arr);

this.draw(arr);

},

9. 캔버스를 사용하여 오디오 맵 그리기

HTMLCanvasElement.getContext() 메소드는 canvas 컨텍스트를 반환하거나, 컨텍스트가 정의되지 않은 경우 null을 반환하여 CanvasRenderingContext2D 2차원 렌더링 컨텍스트를 생성합니다.

 this.canvas = this.$refs.canvas.getContext('2d');draw(arr) { canvas.clearRect(0, 0, document.body.clientWidth, this.canvasHeight) const start = ((document.body) .clientWidth / 2) - ((arr.length / 2) * 3)) arr.forEach((item, index) => { this.canvas.beginPath(); this.canvas.스트로크스타일 = '#B2AFF4'; this.canvas.lineWidth = 3; this.canvas.moveTo(start + (index * 4), this.canvasHeight); lineTo(start + (index * 4), this.canvasHeight - 항목 / 2); this.canvas.strok() });}

효과 표시:

이것으로 오디오 시각화(웹 기술 공유)를 위한 AudioContext 에 대한 기사를 마치겠습니다. 오디오 시각화를 위한 AudioContext에 대한 자세한 내용은 downcodes.com에서 이전 기사를 검색하거나 아래의 관련 기사를 계속해서 읽어보시기 바랍니다. .downcodes.com을 지원하세요!