Snippet

TypedArray- und ArrayBuffer-Verarbeitung in benutzerdefinierten React-Hooks

Die Verarbeitung binärer Netzwerk- oder Medien-Payloads in React erfordert die Arbeit mit TypedArrays wie Float32Array und ArrayBuffers. Die Konvertierung binärer Puffer in JS-Arrays ermöglicht die Nutzung von Array-Methoden wie filter und reduce für DSP-Analysen vor dem Speichern im State.

snippet.js

javascript

import { useState, useCallback } from 'react';
 
export function useAudioBufferProcessor(sampleRate = 44100) {
  const [audioChunks, setAudioChunks] = useState([]);
 
  const processRawBytes = useCallback((arrayBuffer) => {
    const float32Data = new Float32Array(arrayBuffer);
    const windowedSamples = Array.from(float32Data).filter((sample, idx) => idx % 2 === 0);
    
    const peakAmplitude = windowedSamples.reduce((max, current) => 
      Math.abs(current) > max ? Math.abs(current) : max, 0
    );
 
    setAudioChunks(prev => prev.concat({ peakAmplitude, length: windowedSamples.length }));
  }, []);
 
  return { audioChunks, processRawBytes };
}

react

Erklärung

const float32Data = new Float32Array(arrayBuffer);

Erstellt eine TypedArray-Ansicht über den rohen ArrayBuffer, um binäre Daten als 32-Bit-Gleitkommazahlen zu interpretieren.

const windowedSamples = Array.from(float32Data).filter((sample, idx) => idx % 2 === 0);

Konvertiert das TypedArray in ein Standard-JavaScript-Array und reduziert die Samplerate durch Filtern ungerader Indizes.

const peakAmplitude = windowedSamples.reduce((max, current) => ...

Verwendet die Array.prototype.reduce-Methode, um das Maximum der absoluten Signalamplitude zu ermitteln.

Vorheriges Snippet Nächstes Snippet

Mehr JavaScript-Übungen für Experten →

TypedArray- und ArrayBuffer-Verarbeitung in benutzerdefinierten React-Hooks

Verwandt