handleEnd 函数未被调用答案

【问题标题】：handleEnd function is not being calledhandleEnd 函数未被调用
【发布时间】：2023-02-20 22:29:39
【问题描述】：

import React, { useState } from 'react';
import './Textarea.css';
import { useSpeechSynthesis } from 'react-speech-kit';

function Textarea(props) {
  const [text, setText] = useState('');
  const [audioURL, setAudioURL] = useState('');

  const { speak } = useSpeechSynthesis();

  const generateAudio = () => {
    speak({ text, onEnd: handleEnd });
    console.log("generateAudio called");
  };

  const handleEnd = (event) => {
    const blob = new Blob([event.target.blob], { type: 'audio/mpeg' });
    const url = URL.createObjectURL(blob);
    setAudioURL(url);
    console.log('handleEnd called');
  };

  return (
    <>
    <div className="text-area-container">
      <label htmlFor={props.id}>{props.label}</label>
      <textarea
        id={props.id}
        name={props.name}
        placeholder="Type or paste here and get audio file"
        rows={props.rows}
        value={text}
        onChange={(event) => setText(event.target.value)}
      />
    </div>
    <button className='convert-btn' onClick={generateAudio}>Generate audio</button>
    {audioURL && (
    <a href={audioURL} download="audio.mp3" className='download-audio-btn'>
      Download Audio
    </a>
  )}
    </>
  );
}

export default Textarea;

嘿，我正在构建 React 文本转语音 Web 应用程序。由于未调用 handleEnd 函数，我无法下载音频文件。任何人都可以帮助我知道是什么问题。

感谢您的帮助，谢谢。

【问题讨论】：

嗨，欢迎来到 Stack Overflow，请don't upload text, table or error message as image。编辑您的问题以包含文本形式的所有信息 - 考虑使用编辑器的格式设置选项。另见How to Ask

标签： javascript reactjs text-to-speech

【解决方案1】：

在你的 Textarea 组件中，没有调用 handleEnd 函数，因为你在代码中定义它之前将它作为回调传递给 speak 函数。你可以将 handleEnd 函数声明移到 generateAudio 函数上方，或者你可以将 handleEnd 定义为将被提升并可以从组件中的任何位置调用的箭头函数。

尝试这个：

import React, { useState } from 'react';
import './Textarea.css';
import { useSpeechSynthesis } from 'react-speech-kit';

function Textarea(props) {
  const [text, setText] = useState('');
  const [audioURL, setAudioURL] = useState('');

  const { speak } = useSpeechSynthesis();

  const generateAudio = () => {
    speak({ text, onEnd: () => handleEnd() });
    console.log("generateAudio called");
  };

  const handleEnd = () => {
    const blob = new Blob([event.target.blob], { type: 'audio/mpeg' });
    const url = URL.createObjectURL(blob);
    setAudioURL(url);
    console.log('handleEnd called');
  };

  return (
    <>
    <div className="text-area-container">
      <label htmlFor={props.id}>{props.label}</label>
      <textarea
        id={props.id}
        name={props.name}
        placeholder="Type or paste here and get audio file"
        rows={props.rows}
        value={text}
        onChange={(event) => setText(event.target.value)}
      />
    </div>
    <button className='convert-btn' onClick={generateAudio}>Generate audio</button>
    {audioURL && (
    <a href={audioURL} download="audio.mp3" className='download-audio-btn'>
      Download Audio
    </a>
  )}
    </>
  );
}

export default Textarea;

【讨论】：