Cara Use the Web Audio API dengan Claude Code

dimungkinkan性 Web Audio API

Web Audio API 、browser上 高度なaudiopemrosesan 行う untuk 強力なAPI.音楽pemutaranaplikasi、ゲーム サウンド、audioビジュアライザー、Lebih lanjut シンセサイザーま 実現 bisa dilakukan.Claude Code 使えば、Audio Node kompleksなkoneksiやエフェクトpemrosesan efisien implementasi bisa dilakukan.

dasar オーディオプレイヤー

> Web Audio API 使ったカスタムオーディオプレイヤー buatkan.
> pemutaran・一時停止・ボリューム・シークoperasi support.

class AudioPlayer {
  private context: AudioContext;
  private source: AudioBufferSourceNode | null = null;
  private gainNode: GainNode;
  private analyser: AnalyserNode;
  private buffer: AudioBuffer | null = null;
  private startTime = 0;
  private pauseTime = 0;
  private isPlaying = false;

  constructor() {
    this.context = new AudioContext();
    this.gainNode = this.context.createGain();
    this.analyser = this.context.createAnalyser();
    this.analyser.fftSize = 2048;

    this.gainNode.connect(this.analyser);
    this.analyser.connect(this.context.destination);
  }

  async load(url: string) {
    const response = await fetch(url);
    const arrayBuffer = await response.arrayBuffer();
    this.buffer = await this.context.decodeAudioData(arrayBuffer);
  }

  play() {
    if (!this.buffer || this.isPlaying) return;

    this.source = this.context.createBufferSource();
    this.source.buffer = this.buffer;
    this.source.connect(this.gainNode);
    this.source.start(0, this.pauseTime);
    this.startTime = this.context.currentTime - this.pauseTime;
    this.isPlaying = true;

    this.source.onended = () => {
      if (this.isPlaying) {
        this.isPlaying = false;
        this.pauseTime = 0;
      }
    };
  }

  pause() {
    if (!this.isPlaying || !this.source) return;
    this.source.stop();
    this.pauseTime = this.context.currentTime - this.startTime;
    this.isPlaying = false;
  }

  setVolume(value: number) {
    this.gainNode.gain.setValueAtTime(
      Math.max(0, Math.min(1, value)),
      this.context.currentTime
    );
  }

  get currentTime(): number {
    if (this.isPlaying) return this.context.currentTime - this.startTime;
    return this.pauseTime;
  }

  get duration(): number {
    return this.buffer?.duration ?? 0;
  }

  getFrequencyData(): Uint8Array {
    const data = new Uint8Array(this.analyser.frequencyBinCount);
    this.analyser.getByteFrequencyData(data);
    return data;
  }
}

オーディオビジュアライザー

> 周波数データ 使ったCanvasビジュアライザー buatkan.

import { useRef, useEffect } from 'react';

function AudioVisualizer({ player }: { player: AudioPlayer }) {
  const canvasRef = useRef<HTMLCanvasElement>(null);
  const animationRef = useRef<number>();

  useEffect(() => {
    const canvas = canvasRef.current;
    if (!canvas) return;
    const ctx = canvas.getContext('2d')!;

    const draw = () => {
      const data = player.getFrequencyData();
      const width = canvas.width;
      const height = canvas.height;
      const barWidth = width / data.length * 2.5;

      ctx.clearRect(0, 0, width, height);

      data.forEach((value, i) => {
        const barHeight = (value / 255) * height;
        const hue = (i / data.length) * 360;

        ctx.fillStyle = `hsl(${hue}, 70%, 50%)`;
        ctx.fillRect(
          i * barWidth,
          height - barHeight,
          barWidth - 1,
          barHeight
        );
      });

      animationRef.current = requestAnimationFrame(draw);
    };

    draw();
    return () => {
      if (animationRef.current) cancelAnimationFrame(animationRef.current);
    };
  }, [player]);

  return <canvas ref={canvasRef} width={800} height={200} className="w-full rounded-lg bg-gray-900" />;
}

エフェクトチェーン

class AudioEffects {
  private context: AudioContext;

  constructor(context: AudioContext) {
    this.context = context;
  }

  createReverb(duration = 2): ConvolverNode {
    const convolver = this.context.createConvolver();
    const sampleRate = this.context.sampleRate;
    const length = sampleRate * duration;
    const impulse = this.context.createBuffer(2, length, sampleRate);

    for (let channel = 0; channel < 2; channel++) {
      const data = impulse.getChannelData(channel);
      for (let i = 0; i < length; i++) {
        data[i] = (Math.random() * 2 - 1) * Math.pow(1 - i / length, 2);
      }
    }
    convolver.buffer = impulse;
    return convolver;
  }

  createEqualizer(): BiquadFilterNode[] {
    const frequencies = [60, 170, 350, 1000, 3500, 10000];
    return frequencies.map((freq) => {
      const filter = this.context.createBiquadFilter();
      filter.type = 'peaking';
      filter.frequency.value = freq;
      filter.Q.value = 1;
      filter.gain.value = 0;
      return filter;
    });
  }

  createDistortion(amount = 50): WaveShaperNode {
    const shaper = this.context.createWaveShaper();
    const samples = 44100;
    const curve = new Float32Array(samples);
    for (let i = 0; i < samples; i++) {
      const x = (i * 2) / samples - 1;
      curve[i] = ((Math.PI + amount) * x) / (Math.PI + amount * Math.abs(x));
    }
    shaper.curve = curve;
    return shaper;
  }
}

Reactプレイヤーkomponen

function PlayerUI() {
  const [player] = useState(() => new AudioPlayer());
  const [playing, setPlaying] = useState(false);
  const [volume, setVolume] = useState(0.8);

  const toggle = () => {
    if (playing) { player.pause(); } else { player.play(); }
    setPlaying(!playing);
  };

  return (
    <div className="p-4 bg-gray-900 rounded-xl text-white">
      <AudioVisualizer player={player} />
      <div className="flex items-center gap-4 mt-4">
        <button onClick={toggle} aria-label={playing ? '一時停止' : 'pemutaran'}
          className="w-12 h-12 rounded-full bg-white text-gray-900 flex items-center justify-center">
          {playing ? '⏸' : '▶'}
        </button>
        <input type="range" min={0} max={1} step={0.01} value={volume}
          onChange={(e) => { const v = Number(e.target.value); setVolume(v); player.setVolume(v); }}
          aria-label="音量" className="flex-1" />
      </div>
    </div>
  );
}

Summary

Untuk Claude Codeを使えば、Web Audio APIによるカスタムプレイヤーからビジュアライザー、エフェクトpemrosesanまでefisienにimplementasiできます。Canvasの描画についてはCanvas/WebGLpengembanganを、performaoptimasi, lihat パフォーマンス最適化.

Web Audio API 仕様 MDN Web Docs - Web Audio API silakan lihat.