React JS，HTML音频标签未加载音乐文件

Question

使用我创建的应用程序create-react-app，浏览器audio标签未加载mp3文件。

import React from 'react';
import './App.css';

function App() {
  return (
    <div className="App">

  <audio controls src="Kalimba.mp3">
        Your browser does not support the
        <code>audio</code> element.
      </audio>

    </div>
  );
}

export default App;

文件结构作为图像附加。

Answer 1

不确定是否可以立即使用mp3，但是可以根据to docs选择一个选项： ：

import React from 'react';
import file from './foobar.mp3'; // Tell webpack this JS script uses this file
console.log(file); // /foobar.84287d09.mp3
function Foobar() {
  // Import result is the URL of your file
  return (<audio controls src={file}>
    Your browser does not support the
    <code>audio</code> element.
  </audio>);
}
export default Foobar;

另一种方法是先put your mp3 file to public folder，然后：

render() {
  // Note: this is an escape hatch and should be used sparingly!
  // Normally we recommend using `import` for getting asset URLs
  return (<audio controls src={process.env.PUBLIC_URL + '/foobar.mp3'}>
    Your browser does not support the
    <code>audio</code> element.
  </audio>);
}

Answer 2

要使Mp3正常工作，您还需要添加类型。并且您需要在react中使用 require 方法

此处要求用于静态导入，可以是图像，视频，音频

./ =>用于当前目录

 <audio
  controls
  src={require("./Kalimba.mp3")}
  type="audio/mpeg"
 />