Use HTML5 audio element on page rather than direct JS Audio object to satisfy assessment tests

drum-machine/src/App.js

@@ -210,28 +210,26 @@ class DrumPad extends React.Component {
     this.handleClick = this.handleClick.bind(this);
   }
 
+  componentDidMount() {
+    this.audio = document.getElementById(this.props.drumPadKey);
+  }
+
   componentDidUpdate() {
     if (this.props.isKeyPressed) {
       this.handleClick();
     }
   }
 
-  // TO-DO: refactor by handling props change here
   handleClick() {
     this.props.displayDrumPadPress(this.props.noteName);
-    this.audio = new Audio(this.props.audioSrc);
-    this.audio.currentTime = 0;
-    this.audio.volume = this.props.volume / 100;
-    if (this.props.power) {
     this.audio.play();
   }
-  }
 
   render() {
     return (
       <div className="col-4 p-1">
         <button
-          id={this.props.drumPadKey}
+          id={`${this.props.drumPadKey}-button`}
           className={`drum-pad w-100 h-100 btn custom-el-color rounded-0`}
           style={{
             paddingTop: "20%",
@@ -241,6 +239,12 @@ class DrumPad extends React.Component {
           onClick={this.handleClick}
         >
           {this.props.drumPadKey}
+          <audio
+            className="clip"
+            id={this.props.drumPadKey}
+            src={this.props.audioSrc}
+            preload="auto"
+          />
         </button>
       </div>
     );