How can I import all (mp3) files from a specific folder into an array in response.js?
I am creating an mp3 player using response.js and HTML5 web audio API. I'm a newbie to react (about 2 weeks) but have 3 years of experience with JavaScript.
It seems that in order for the mp3 files to play / load into the sound tag (in react environment using cmd and localhost line), I need to import them into the application (and not just point to their url in the src of the sound tag). See my question here
So at the moment I'm importing sounds hardcoded like this:
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;
This works great, but ideally I would like:
1 import mp3 files directly into the array (instead of creating the array afterwards). I have tried the following, however I am getting an "unexpected token" error in [brace (on import)
var mp3s = [];
import mp3s[0] from './sounds/0010_beat_egyptian.mp3';
import mp3s[1] from './sounds/0011_beat_euphoric.mp3';
2 Or even better to import all files from the sounds folder without knowing their names in a zero indexed array.
Any help is greatly appreciated. thank.
source to share
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.
It can also be interesting
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])
}
They have pluses and contrasts, but I think you get the point.
source to share