Воспроизведение аудио из не импортированного src

#reactjs #audio

#reactjs #Аудио

Вопрос:

Я хочу воспроизвести аудио с помощью reactjs, а src поступает из базы данных и динамически изменяет src.
Итак, я могу воспроизводить аудио, которое я импортирую, но если я его не импортирую, я получаю сообщение об ошибке:

 HTTP "Content-Type" of "text/html" is not supported. Load of media resource http://localhost:3000/audio-lib/soundTest.mp3 failed.
 

Как я могу заменить это: state = {audioSrc: soundTest}; На что-то вроде этого: state = {audioSrc: «.. /audio-lib/soundTest.mp3»};

Этот код работает, но я хочу удалить импорт:

 // I don't want this import
import soundTest from "../audio-lib/soundTest.mp3"
...
 state = { audioSrc: soundTest};
...
  render () {
        return(
            <audio
                controls
                ref={ ref => this.player = ref} >
                <source src={this.state.audioSrc} type="audio/mp3"/>
            </audio>        
        );
    }
 

Ответ №1:

Для решения этой проблемы я использовал пакет react-sound . С помощью этого компонента легко загружать звук с URL-адреса, переданного в качестве реквизита. документ npm: https://www.npmjs.com/package/react-sound