如何将特定文件夹中的所有（mp3）文件导入react.js中的数组？ [英] How can I import all (mp3) files from a particular folder into an array in react.js?

问题描述

我正在使用react.js和HTML5网络音频API构建一个mp3播放器。我有新的反应（大约2周）但有3年的JavaScript经验。

I'm building an mp3 player with react.js and the HTML5 web audio API. I'm new to react (circa 2 weeks) but have 3 years experience with JavaScript.

似乎为了让mp3文件播放/加载到音频中tag（在使用cmd行和localhost的反应环境中）我需要将它们导入应用程序（而不是仅仅指向音频标记的src中的URL）。请参阅我的问题

It seems that in order for the mp3 files to play/load into the audio tag (within a react environment using the cmd line and localhost) I need to import them to the application(rather than just pointing to their URL in the src of the audio tag). See my question here

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

So at the moment I am importing the sounds in a hard-coded fashion as follows:

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;

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

That works perfect, however ideally I would like to either:

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

1 import the mp3 files straight into an array (instead of creating the array afterwards). I tried the following, however I am receiving an error of "unexpected token" at the [ bracket (when importing)

var mp3s = [];

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

2甚至可以更好地从声音文件夹导入所有文件而不知道他们的名字是否为零索引数组。

2 Or even better import all files from the sounds folder without knowing their names into a zero indexed array.

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

Any help greatly appreciated. thanks.

推荐答案

在这里检查这个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])
}

有专业和反对，但我认为你会明白这一点。

Have "pros" and "contras" but I think you'll get the point.

这篇关于如何将特定文件夹中的所有（mp3）文件导入react.js中的数组？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！