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

Question

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

似乎为了让 mp3 文件播放/加载到音频标签中（在使用 cmd 行和本地主机的反应环境中）我需要将它们导入应用程序（而不是仅仅指向它们的 URL 在音频标签）。 在这里查看我的问题

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

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 或者甚至更好地将声音文件夹中的所有文件在不知道其名称的情况下导入到零索引数组中。

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

Answer 1

在这里检查这个copeden

var mp3_file = []
    mp3_file[0] = 'file1',
    mp3_file[1] = 'file2',
    mp3_file[2] = 'file3',
    mp3_file[3] = 'file4',
    mp3_file[4] = 'file5',
    mp3_file[5] = 'file6',
    mp3_file[6] = 'file7',    
    mp3s = [];

for (let i=0; i<6; i++) {   
  mp3s[i] = mp3_file[i]
  console.log(mp3s[i])
}
RESULT > 
"file1"
"file2" and so on.

这也可能很有趣

var mp3_file = [];
var mp3s = [];

for (let i=0; i<6; i++) {
  mp3_file[i = 'file' + i,
}           

for (let i=0; i<mp3_file.length; i++) {   
  mp3s[i] = mp3_file[i]
  console.log(mp3s[i])
}

有“优点”和“反面”，但我想你会明白的。

Answer 2

我发现如果您有多个文件（例如图像或 mp3 文件等）要动态包含到您的应用程序中，那么最好将它们存储在公共文件夹中（请参阅文档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;

注意：上面代码中的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"}];

Answer 3

如果文件中的音乐像（ songName_01.mp3 songName_02.mp3 songName_03.mp3 ...），您可以将它们全部导入您的反应项目

而不是使用

 var songCollection = []; import song01 from '../some file/songName01.mp3' import song02 from '../some file/songName02.mp3' import song03 from '../some file/songName0.mp3' import song04 from '../some file/songName04.mp3' and then add them in array

使用此代码转换

 var songCollection = [] function _interopRequireDefault(obj) { return obj && obj.__esModule? obj: { default: obj }; } for(let i = 0; i< fileSize; i++ ) { songCollection[i] = _interopRequireDefault(require(`../some file/songName_0${i+1}.mp3`)); }

并且src值将是<audio src = {songName[2].default} ></audio>

Los-Track（你可以看看我的 repo 它是如何工作的） - https://github.com/sosumit001/los-track