Reactで生成された audio ファイルを自動再生する方法

import React, { useEffect, useRef, useState } from 'react';

const AutoPlayAudio = ({ audioUrl }) => {
  const audioRef = useRef(null);

  useEffect(() => {
    if (audioUrl && audioRef.current) {
      audioRef.current.play();
    }
  }, [audioUrl]);

  return (
    <audio ref={audioRef} controls>
      <source src={audioUrl} type="audio/mpeg" />
      Your browser does not support the audio element.
    </audio>
  );
};

const App = () => {
  const [audioUrl, setAudioUrl] = useState('');

  // 仮の例として、オーディオURLを生成
  useEffect(() => {
    const generateAudio = async () => {
      // オーディオファイルを生成し、URLを取得するロジックをここに記述
      // 例として、一時的なURLを設定
      const newAudioUrl = 'path/to/generated/audio/file.mp3';
      setAudioUrl(newAudioUrl);
    };

    generateAudio();
  }, []);

  return (
    <div>
      <h1>Auto Play Audio Example</h1>
      {audioUrl && <AutoPlayAudio audioUrl={audioUrl} />}
    </div>
  );
};

export default App;