音频不播放反应

Question

在我的应用程序中，我通过JSON引用我的音频文件。从下面的代码中可以看到。

const lines = [
  {
    id: 'dialogue1',
    parts: [
      {
        text: `как дела?`,
        audio: 'audio/audio1.mp3',
        prompt: '',
        speaker: 1,
        id: 1
      },
      {
        text: 'у меня все хорошо, а как ты?',
        audio: 'audio/аудио2.mp3',
        prompt: 'Say that: I am OK, how about you?',
        speaker: 2,
        id: 2,
        helpers: [
          {
            word_mother: "I'm all right",
            word_target: 'У меня все хорошо'
          },
          {
            word_mother: 'And you?',
            word_target: 'А как ты?'
          }
        ]
      }
}]

音频文件保存在公用文件夹中。

​

​

问题是，当我进入应用程序中的一个特定项目时，我的音频不工作。从下面的图片中可以看到，播放按钮是禁用的。你能帮帮我吗。我已经尝试过一些解决方案，但它们不起作用。

​

​

BubbleSpeechFrame.js

import React, { Component } from 'react';
import ReactAudioPlayer from 'react-audio-player';
import Tooltip from './Tooltip';
import Button from './Button';

class BubbleSpeechFrame extends Component {
  constructor(props) {
    super(props);
    this.showText = this.showText.bind(this);
  }

  showText(e) {
    e.target.parentNode.parentNode.children[1].childNodes[0].classList.toggle(
      'show'
    );
  }
  render() {
    const { lines } = this.props;
    const dialogueData =
      lines &&
      lines.parts.map(part => {
        return (
          <React.Fragment>
            {part.speaker === 1 ? (
              <div className="speaker-1">
                <div className="sound-cont">
                  <ReactAudioPlayer
                    src={part.audio}
                    autoPlay
                    controls
                    controlsList="nodownload"
                  />
                </div>
                <div className="text-cont">
                  {<p className="text">{part.text}</p>}
                </div>
                {part.prompt && (
                  <div className="prompt-cont">
                    <p className="prompt">{part.prompt}</p>
                  </div>
                )}
                <div className="toggle-text">
                  <Button showText={this.showText} />
                </div>
                {part.helpers && <Tooltip tips={part.helpers} />}
              </div>
            ) : (
              <div className="speaker-2">
                <div className="sound-cont">
                  <ReactAudioPlayer
                    src={part.audio}
                    autoPlay
                    controls
                    controlsList="nodownload"
                  />
                </div>
                <div className="text-cont">
                  {<p className="text">{part.text}</p>}
                </div>
                {part.prompt && (
                  <div className="prompt-cont">
                    <p className="prompt">{part.prompt}</p>
                  </div>
                )}
                <div className="toggle-text ">
                  <Button showText={this.showText} />
                </div>
                {part.helpers && <Tooltip tips={part.helpers} />}
              </div>
            )}
          </React.Fragment>
        );
      });

    return (
      <div>
        <h1 className="centered">Bubble speech frame</h1>
        {dialogueData}
      </div>
    );
  }
}

export default BubbleSpeechFrame;

Answer 1

我终于解决了我的问题。在audio数组的lines字段中，提供音频的路径是必要的。例如，audio: path.resolve('/audio/audio1.mp3')。所有音频文件都存储在音频文件夹中，该文件夹存储在公用文件夹中。