时间戳

首页 > 解决方案 > 从非导入的 src 播放音频

reactjs - 从非导入的 src 播放音频

问题描述

我想用 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>        
        );
    }

标签： reactjsaudio

解决方案

为了解决这个问题，我使用了 react-sound 包。使用这个组件，很容易从作为 props 传递的 url 加载声音。npm 文档： https ://www.npmjs.com/package/react-sound

推荐阅读