From eab504ebc95ab082d177b929a90b1d7342c71527 Mon Sep 17 00:00:00 2001
From: Manish <manish@radii.dev>
Date: Sun, 3 Jul 2022 21:24:37 +1000
Subject: [PATCH] Use HTML5 audio element on page rather than direct JS Audio
 object to satisfy assessment tests

---
 drum-machine/src/App.js | 20 ++++++++++++--------
 1 file changed, 12 insertions(+), 8 deletions(-)

diff --git a/drum-machine/src/App.js b/drum-machine/src/App.js
index 89c0081..22b7a52 100644
--- a/drum-machine/src/App.js
+++ b/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();
-    }
+    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>
     );