Drum machine need some extra help

<%= @topic_view.topic.title %>
<%= @topic_view.topic.average_rating %> <%= @topic_view.topic.posts.count { |p| !!p.custom_fields['rating'] } %>

https://codepen.io/Moiseychek/pen/pXKWry

hello Campers! so from line 6 in JS section, im working on to start playing music when i click on my buttons, i was wondering if someone can take a look and let me know whats seems the trouble!

pushing it UP on forum branch so someone can see it

pushing it UP on forum branch so someone can see it

  playing(event) { 
   let pad = $(event.target);
   {/* let audio = new Audio('https://s3.amazonaws.com/freecodecamp/drums/Bld_H1.mp3');  should i even connect this way???? */}
   {/* pad.audio.play();  this doesnt work*/}
   {/* audio.play();  and this*/}
   pad.animate({backgroundColor: "#f53703",
                height: "70px",
                width: "90px",
                marginTop: "25px"
                },  100)
   pad.animate({backgroundColor: "#f5b003",
                height: "75px",
                width: "100px",
                marginTop: "20px"
               }, 100)
    }

In the above code section, you can uncomment the following two lines and the buttons will make a sound play. However, you should not be using JavaScript or jQuery to select DOM elements (i.e. **let pad = $(event.target);.) This is not the React way of doing things. It is fine to use the new Audio but keep in mind the first time the button is clicked for a sound the sound could be delay for those on slower connection. It would be better to load all of these into an object containing the sounds so that you can access them easily.