Hi
Ive almost finished my wood drumpad proyect but Im having issues with a power button that was just recently added. The power button’s purpose is to activate the keypad so that sounds are only played when the button is on. the button has an onClick attribute set to trigger togglePowerSwitch function that sets state for buttonState. buttonState holds the audio urls for the sounds associated with buttons component. togglePower sets urls to an empty array so they are no longer able to be played when button is off.
What is peculiar is that togglePower is actually changing state for the backgroundColor property for the power button and also the keypads buttons and when console logging this.state , urls are actually changed to an empty string. But sounds are still playing when the power button is off.
Anyone knows what could be the issue?
Here is my codepen: https://codepen.io/tonytony92/pen/QWbQyxW?editors=1111
this is togglePower:
togglePower(){
if(this.state.powerStatus==="true"){
let newState=Object.assign({},this.state)
newState.powerStatus="false"
newState.powerSwitchBorder="none"
newState.powerColor="rgb(32,32,32)"
newState.buttonState.forEach(element=>{
element.col="gray";
element.url="";
})
this.setState(newState)
console.log(this.state)
}
else if(this.state.powerStatus==="false"){
let newState=Object.assign({},this.state)
newState.powerStatus="true";
newState.powerSwitchBorder="2px solid green";
newState.powerColor="orange"
this.setState(newState)
console.log(this.state)
}
}
this are the two bank Objects that are associated with buttonState prop in this.state:
let bankOne = [{
key:"Q",
col:"rgb(102, 26, 0)",
audioId: 'Chord-1',
url: 'https://s3.amazonaws.com/freecodecamp/drums/Chord_1.mp3'
}, {
key:"W",
col:"rgb(102, 26, 0)",
audioId:'Chord-2',
url: 'https://s3.amazonaws.com/freecodecamp/drums/Chord_2.mp3'
},{
key:"E",
col:"rgb(102, 26, 0)",
audioId:'Chord-3',
url: 'https://s3.amazonaws.com/freecodecamp/drums/Chord_3.mp3'
},{
key:"A",
col:"rgb(102, 26, 0)",
audioId:'Shaker',
url: 'https://s3.amazonaws.com/freecodecamp/drums/Give_us_a_light.mp3'
},{
key:"S",
col:"rgb(102, 26, 0)",
audioId:'Open-HH',
url: 'https://s3.amazonaws.com/freecodecamp/drums/Dry_Ohh.mp3'
},{
key:"D",
col:"rgb(102, 26, 0)",
audioId:'Closed-HH',
url: 'https://s3.amazonaws.com/freecodecamp/drums/Bld_H1.mp3'
},{
key:"Z",
col:"rgb(102, 26, 0)",
audioId:'Punchy-Kick',
url: 'https://s3.amazonaws.com/freecodecamp/drums/punchy_kick_1.mp3'
},{
key:"X",
col:"rgb(102, 26, 0)",
audioId:'Side-Stick',
url: 'https://s3.amazonaws.com/freecodecamp/drums/side_stick_1.mp3'
},{
key:"C",
col:"rgb(102, 26, 0)",
audioId:'Snare',
url: 'https://s3.amazonaws.com/freecodecamp/drums/Brk_Snr.mp3'
} ]
let bankTwo = [{
key:"Q",
col:'rgb(102, 26, 0)',
audioId:'Heater-1',
url: 'https://s3.amazonaws.com/freecodecamp/drums/Heater-1.mp3'
}, {
key:"W",
col:"rgb(102, 26, 0)",
audioId:"Heater-2",
url: 'https://s3.amazonaws.com/freecodecamp/drums/Heater-2.mp3'
} ,{
key:"E",
col:"rgb(102, 26, 0)",
audioId:"Heater-3",
url: 'https://s3.amazonaws.com/freecodecamp/drums/Heater-3.mp3'
},{key:"A",
col:"rgb(102, 26, 0)",
audioId:"Heater-4",
url: 'https://s3.amazonaws.com/freecodecamp/drums/Heater-4_1.mp3'} , {
key:"S",
col:"rgb(102, 26, 0)",
audioId:"Heater-6",
url: 'https://s3.amazonaws.com/freecodecamp/drums/Heater-6.mp3'
},{key:"D",
col:"rgb(102, 26, 0)",
audioId:"DrumSet-Oh",
url: 'https://s3.amazonaws.com/freecodecamp/drums/Dsc_Oh.mp3'},{
key:"Z",
col:"rgb(102, 26, 0)",
audioId:"Kick-n-Hat",
url: 'https://s3.amazonaws.com/freecodecamp/drums/Kick_n_Hat.mp3'
},{
key:"X",
col:"rgb(102, 26, 0)",
audioId:"Kick-1",
url: 'https://s3.amazonaws.com/freecodecamp/drums/RP4_KICK_1.mp3'
},{
key:"C",
col:"rgb(102, 26, 0)",
audioId:"Cev-H2",
url: 'https://s3.amazonaws.com/freecodecamp/drums/Cev_H2.mp3'
}]
and this is the MyApp state:
class MyApp extends React.Component{
constructor(props){
super(props)
this.state={
buttonState:bankOne,
padBankStatus:"flex-start",
currentPadBank:"bankOne",
currentSound:'',
currentVolume:0.5,
powerStatus:"false",
powerColor:"rgb(32,32,32)",
powerSwitchBorder:"none"
}