Claude3.5、シンセサイザーつくれてすごい

ブラウザで操作可能なアンビエントシンセサイザーを作成してください。20和音が出せる仕様にしてください。それぞれのオシレーターにボタンをつけて、ボタンを押すと音が出る仕様にしてください。

音が出ません。アンビエントシンセサイザーとしてブラウザ操作で音が出るところまで実装してください。

和音を100まで増やしてください。また、ボタンに文字は入れなくてよいです。色で区別できるようにするとよいかもしれません。

import React, { useState, useCallback, useMemo } from 'react';

const AmbientSynth = () => {
  const [audioContext, setAudioContext] = useState(null);
  const [activeOscillators, setActiveOscillators] = useState({});

  const initializeAudioContext = useCallback(() => {
    if (!audioContext) {
      const context = new (window.AudioContext || window.webkitAudioContext)();
      setAudioContext(context);
    }
  }, [audioContext]);

  const frequencies = useMemo(() => {
    const minFreq = 20; // Hz
    const maxFreq = 20000; // Hz
    return Array.from({ length: 100 }, (_, i) => {
      // 対数スケールで周波数を生成
      return minFreq * Math.pow(maxFreq / minFreq, i / 99);
    });
  }, []);

  const playSound = useCallback((index) => {
    initializeAudioContext();
    if (!audioContext) return;

    if (activeOscillators[index]) {
      activeOscillators[index].stop();
      setActiveOscillators(prev => {
        const newOscillators = { ...prev };
        delete newOscillators[index];
        return newOscillators;
      });
    } else {
      const oscillator = audioContext.createOscillator();
      oscillator.type = 'sine';
      oscillator.frequency.setValueAtTime(frequencies[index], audioContext.currentTime);

      const gainNode = audioContext.createGain();
      gainNode.gain.setValueAtTime(0, audioContext.currentTime);
      gainNode.gain.linearRampToValueAtTime(0.2, audioContext.currentTime + 0.05);

      oscillator.connect(gainNode);
      gainNode.connect(audioContext.destination);

      oscillator.start();
      setActiveOscillators(prev => ({ ...prev, [index]: oscillator }));
    }
  }, [audioContext, activeOscillators, frequencies, initializeAudioContext]);

  const getButtonColor = useCallback((index) => {
    const hue = (index / 100) * 360;
    return `hsl(${hue}, 70%, ${activeOscillators[index] ? '60%' : '85%'})`;
  }, [activeOscillators]);

  return (
    <div className="p-4 bg-gray-100 rounded-lg shadow-md">
      <h1 className="text-2xl font-bold mb-4">100和音アンビエントシンセサイザー</h1>
      <div className="grid grid-cols-10 gap-1">
        {frequencies.map((_, index) => (
          <button
            key={index}
            className="w-8 h-8 rounded-full focus:outline-none transition-colors duration-300"
            style={{ backgroundColor: getButtonColor(index) }}
            onClick={() => playSound(index)}
          />
        ))}
      </div>
    </div>
  );
};

export default AmbientSynth;