تحويل النص إلى صوت

import React, { useState } from 'react';

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

  const handleTextChange = (event) => {
    setText(event.target.value);
  };

  const convertTextToSpeech = async () => {
    try {
      const response = await fetch('https://api.openai.com/v1/audio/speech', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          'Authorization': 'Bearer YOUR_API_KEY'
        },
        body: JSON.stringify({
          text: text,
          voice: 'alloy'
        })
      });
      const blob = await response.blob();
      const url = URL.createObjectURL(blob);
      setAudioUrl(url);
    } catch (error) {
      console.error('Error converting text to speech:', error);
    }
  };

  return (
    <div className="min-h-screen bg-gray-100 flex flex-col items-center justify-center p-4">
      <div className="bg-white shadow-lg rounded-lg p-8 w-full max-w-2xl">
        <h1 className="text-3xl font-bold text-center mb-6">Text to Speech Converter</h1>
        <textarea
          className="w-full p-4 border border-gray-300 rounded-lg mb-6 resize-none"
          rows="6"
          placeholder="Enter your text here..."
          value={text}
          onChange={handleTextChange}
        ></textarea>
        <button
          className="w-full bg-blue-500 text-white py-3 rounded-lg hover:bg-blue-600 transition duration-300"
          onClick={convertTextToSpeech}
        >
          Convert to Speech
        </button>
        {audioUrl && (
          <div className="mt-6">
            <audio controls className="w-full">
              <source src={audioUrl} type="audio/mpeg" />
              Your browser does not support the audio element.
            </audio>
          </div>
        )}
      </div>
      <footer className="mt-8 text-center text-gray-600">
        <p>© 2025 Text to Speech Converter. All rights reserved.</p>
      </footer>
    </div>
  );
};

export default App;