如何将特定文件夹中的所有（mp3）文件导入到react.js 中的数组中？

我正在使用 React.js 和 HTML5 Web 音频 API 构建一个 mp3 播放器。我是 React 新手（大约 2 周），但有 3 年 JavaScript 经验。

看来，为了让 mp3 文件播放/加载到音频标签中（在使用 cmd 行和本地主机的反应环境中），我需要将它们导入到应用程序中（而不是仅仅在 src 中指向它们的 URL）音频标签）。看我的问题在这里 https://stackoverflow.com/questions/44121471/html5-audio-is-not-playing-in-my-react-app-in-localhost?noredirect=1#comment75287515_44121471

因此，目前我正在以硬编码方式导入声音，如下所示：

import React, { Component } from 'react';
import './music-player.css';

import mp3_file0 from './sounds/0010_beat_egyptian.mp3';
import mp3_file1 from './sounds/0011_beat_euphoric.mp3';
import mp3_file2 from './sounds/0014_beat_latin.mp3';
import mp3_file3 from './sounds/0015_beat_pop.mp3';
import mp3_file4 from './sounds/0027_falling_cute.mp3';
import mp3_file5 from './sounds/0028_feather.mp3';
import mp3_file6 from './sounds/0036_lose_cute.mp3';
import mp3_file7 from './sounds/0039_pium.mp3';

var mp3s = [];

mp3s[0] = mp3_file0;
mp3s[1] = mp3_file1;
mp3s[2] = mp3_file2;
mp3s[3] = mp3_file3;
mp3s[4] = mp3_file4;
mp3s[5] = mp3_file5;
mp3s[6] = mp3_file6;
mp3s[7] = mp3_file7;


const AudioPlayer = function(props) {
    var mp3Src = mp3s[props.currentSoundIndex];
    console.log(mp3Src);
        return (<audio id="audio_player">
        <source id="src_mp3" type="audio/mp3" src={mp3Src}/>
        <source id="src_ogg" type="audio/ogg" src=""/>
        <object id="audio_object" type="audio/x-mpeg" width="200px" height="45px" data={mp3Src}>
            <param id="param_src" name="src" value={mp3Src} />
            <param id="param_src" name="src" value={mp3Src} />
            <param name="autoplay" value="false" />
            <param name="autostart" value="false" />
        </object>
        </audio>    
        );
}

export default AudioPlayer;

这很完美，但理想情况下我想要：

1 将 mp3 文件直接导入到数组中（而不是事后创建数组）。我尝试了以下操作，但是我在 [ 括号处收到“意外令牌”错误（导入时）

var mp3s = [];

import mp3s[0] from './sounds/0010_beat_egyptian.mp3';
import mp3s[1] from './sounds/0011_beat_euphoric.mp3';

2 或者甚至更好地将所有文件从声音文件夹导入到零索引数组中，而不知道它们的名称。

非常感谢任何帮助。谢谢。

我发现如果您有多个文件（例如图像或 mp3 文件等）想要动态包含到您的应用程序中，那么最好将它们存储在公共文件夹中（请参阅文档https://create-react-app.dev/docs/using-the-public-folder/ https://create-react-app.dev/docs/using-the-public-folder/).

注意：将文件存储在公共文件夹中时，不需要“导入”它们，但必须使用公共环境变量（process.env.PUBLIC_URL）以便正确的路径（到你的public文件夹）将被引用。

所以我的解决方案是：

1. 我在以下位置创建了一个文件夹public名为的文件夹sounds（我在其中存储了该项目的所有 mp3）。
2. 然后我将音频组件（在原始帖子中）更改为以下内容：

.

import React, { Component } from 'react';
import './music-player.css';

const AudioPlayer = function(props) {
    let mp3Src = process.env.PUBLIC_URL + props.sounds[props.currentSoundIndex].mp3;
        return (<audio id="audio_player">
        <source id="src_mp3" type="audio/mp3" src={mp3Src}/>
        <source id="src_ogg" type="audio/ogg" src=""/>
        <object id="audio_object" type="audio/x-mpeg" width="200px" height="45px" data={mp3Src}>
            <param id="param_src" name="src" value={mp3Src} />
            <param id="param_src" name="src" value={mp3Src} />
            <param name="autoplay" value="false" />
            <param name="autostart" value="false" />
        </object>
        </audio>    
        );
}

export default AudioPlayer;

Note: props.sounds上面的代码中引用了我在 src 文件夹中的以下 JavaScript 数组：

let sounds = [{"title" : "Egyptian Beat", "artist" : "Sarah Monks", "length": 16, "mp3" : "sounds/0010_beat_egyptian.mp3"}, 
        {"title" : "Euphoric Beat", "artist" : "Sarah Monks", "length": 31, "mp3" : "sounds/0011_beat_euphoric.mp3"},
        {"title" : "Latin Beat", "artist" : "Sarah Monks", "length": 59, "mp3" : "sounds/0014_beat_latin.mp3"}, 
        {"title" : "Pop Beat", "artist" : "Sarah Monks", "length": 24, "mp3" : "sounds/0015_beat_pop.mp3"},
        {"title" : "Falling Cute", "artist" : "Sarah Monks", "length": 3, "mp3" : "sounds/0027_falling_cute.mp3"}, 
        {"title" : "Feather", "artist" : "Sarah Monks", "length": 6, "mp3" : "sounds/0028_feather.mp3"},
        {"title" : "Lose Cute", "artist" : "Sarah Monks", "length": 3, "mp3" : "sounds/0036_lose_cute.mp3"}, 
        {"title" : "Pium", "artist" : "Sarah Monks", "length": 3, "mp3" : "sounds/0039_pium.mp3"}];