soittimen vaihto

src/App.css

@@ -56,6 +56,13 @@
   cursor: pointer; 
 }
 
+#soittimet {
+  font-size: 20px;
+  position: "absolute";
+  bottom: 60;
+  cursor: pointer; 
+}
+
 
 #sharp {
   background-color: black;

src/App.js

@@ -231,6 +231,17 @@ function App() {
   const handleFis4Click = () => {
     audioPlayer.stopNote(0)
     audioPlayer.playNote("F#4")}
+  const handlePianoClick = () => {
+    audioPlayer.setInstrument("acoustic_grand_piano")}
+  const handleSaxClick = () => {
+        audioPlayer.setInstrument("alto_sax")}
+  const handleAahClick = () => {
+        audioPlayer.setInstrument("choir_aahs")}
+  const handleShakuClick = () => {
+        audioPlayer.setInstrument("shakuhachi")}
+  const handleCelloClick = () => {
+        audioPlayer.setInstrument("cello")}
+          
                     
   return (
     <div className="app-container">
@@ -268,6 +279,12 @@ function App() {
       <button id="thin" onClick={handleF4Click}>-</button>
       <button id="sharp" onClick={handleFis4Click}>ä</button>
       
+      <button id="soittimet" onClick={handlePianoClick}>piano</button>
+      <button id="soittimet" onClick={handleSaxClick}>saksofoni</button>
+      <button id="soittimet" onClick={handleAahClick}>ihminen</button>
+      <button id="soittimet" onClick={handleShakuClick}>shakuhachi</button>
+      <button id="soittimet" onClick={handleCelloClick}>sello</button>
+      
     </div>
   )
 }