Audio does not play in React

Question

In my app I reference to my audio file through JSON. As you can see from the code below.

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: 'А как ты?'
          }
        ]
      }
}]

Audio files are kept in a public folder.

The issue is that when I go to a particular item in the app, my audio does not work. As you can see from the picture below, the play button is disabled. Could you help me please. I have tried some solutions but they don't work.

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

I have finally solved my problem. In the audio field of the lines array, it is necessary to provide a path to an audio. For example, audio: path.resolve('/audio/audio1.mp3'). All audio files are stored in the audio folder, which is stored in the public folder.