I have an app that plays a random sound from the selected array based on which button you push. I want to also give the option of listing all the sounds in an array on demand.
I've been going through all kinds of different suggestions using for loops and .map but I keep running into a wall with the fact being that I can't use .map on an object... I think.
class Randomizer extends React.Component {
constructor(props) {
super(props);
this.state = {
currentSound: {name: "laser", sound: "http://commondatastorage.googleapis.com/codeskulptor-assets/Collision8-Bit.ogg"},
myArray: [
{
name: 'laser',
sound: "http://commondatastorage.googleapis.com/codeskulptor-assets/Collision8-Bit.ogg"
},
{
name: 'laugh',
sound: "http://commondatastorage.googleapis.com/codeskulptor-assets/Evillaugh.ogg"
},
{
name: 'jump',
sound: "http://commondatastorage.googleapis.com/codeskulptor-assets/jump.ogg"
}
],
myArraySequel: [
{
name: 'laser2',
sound: "http://commondatastorage.googleapis.com/codeskulptor-assets/Collision8-Bit.ogg"
},
{
name: 'laugh2',
sound: "http://commondatastorage.googleapis.com/codeskulptor-assets/Evillaugh.ogg"
},
{
name: 'jump2',
sound: "http://commondatastorage.googleapis.com/codeskulptor-assets/jump.ogg"
}
]
}
}
newSound(arr){
this.setState((prevState)=>{
return {currentSound: prevState[arr][Math.floor(Math.random()*prevState[arr].length)]}
})
};
render() {
return (
Listen!
autoPlay
src={this.state.currentSound.sound}>
{this.state.currentSound.name}
sounds from myArray
{/* list of buttons with the name value as the the button name and it will play the sound associated when pressed */}
);
}
}
function App() {
return (
RandomSoundboard
);
}
export default App;
when I've used .map it's told me to use an array of course.
No comments:
Post a Comment