Аудио файл не воспроизводится в реагирующих

Question

Я пытался воспроизвести аудиофайл в Recact.js, но он не воспроизводится.Я не сталкиваюсь с какой-либо ошибкой, появляется полоса прокрутки, но кнопка воспроизведения не работает.Я попытался воспроизвести песню, чтобы проверить, не поврежден ли файл.mp3-файл работает нормально.

import React from 'react'

class AudioPlayer extends React.Component {
  render() {
    return (
      <div>
        <audio ref="audio_tag" src="./abc.mp3" controls autoPlay/>
      </div>
    );
  }
}

export default AudioPlayer;

Answer 1

Можете ли вы разместить правильный файл src?или просто поставь внешний, если хочешь проверить

  <div>
    <audio ref="audio_tag" src="https://file-examples.com/wp-content/uploads/2017/11/file_example_MP3_700KB.mp3" controls autoPlay/>
  </div> 

или

<audio
  ref="audio_tag"
  autoPlay={true}
  controls={true}>
  <source type="audio/mp3" src="https://file-examples.com/wp-content/uploads/2017/11/file_example_MP3_700KB.mp3" />
</audio>

Answer 2

./ - это относительный путь, поэтому ваш аудиофайл необходимо будет доставлять из той же папки, что и ваш пакет.

Если вы хотите, чтобы ваши аудиофайлы и проигрыватель были отсоединены, это нормально, но чтобы это работало, убедитесь, что а) ваш файл скопирован в выходную папку вашего приложения и б) вы ссылаетесь на путь из корня, что-то вроде:

class AudioPlayer extends React.Component {
  render() {
    return (
      <div>
        <audio ref="audio_tag" src="/assets/sounds/abc.mp3" controls autoPlay/>
      </div>
    );
  }
}

Вы можете альтернативно импортировать аудиофайл и использовать его напрямую:

import abc from './../path/to/file/abc.mp3';

class AudioPlayer extends React.Component {
  render() {
    return (
      <div>
        <audio ref="audio_tag" src={abc} controls autoPlay/>
      </div>
    );
  }
}

Вот рабочая песочница, которая демонстрирует метод импорта: https://codesandbox.io/s/strange-leakey-7lk6f

Answer 3

Поскольку вы используете приложение create-реакции-приложение, я предлагаю вам переместить ваш mp3-файл в общую папку, а затем попробовать следующее с тем, что я назвал pathToPublic, любым путем, который вам нужен, чтобы перейти к вашему файлу:

import abc from '.../pathToPublic/public/abc.mp3'

<audio
  ref="audio_tag"
  autoPlay={true}
  controls={true} >
  <source type="audio/mp3" src={abc} />
</audio>

И дайте нам знать, если это работает.