特定のフォルダからすべての（mp3）ファイルをreact.jsの配列にインポートするにはどうすればよいですか？

Question

私はreact.jsとHTML5ウェブオーディオAPIを備えたmp3プレーヤーを構築しています。私は反応が新しく（2週間目）、JavaScriptには3年の経験があります。

私はmp3ファイルをオーディオタグに（ロードラインを使用して反応環境内で）再生/ロードするために、アプリケーションにインポートする必要があります。オーディオタグのsrc）。次のように私はハードコード化された形で音を輸入していた瞬間にそうmy question here

を参照してください：

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

Check this copeden here

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]) 
} 

は "長所" と "コントラ" を持っていますが、私はあなたのポイントを得ると思います。