diff --git a/src/App.css b/src/App.css index 6b1434b974f35a1baa49c2ac238c6cbb01ce0671..4e004ba855e88c93e07c0a6d9e509b24f3c95202 100644 --- a/src/App.css +++ b/src/App.css @@ -56,6 +56,13 @@ cursor: pointer; } +#soittimet { + font-size: 20px; + position: "absolute"; + bottom: 60; + cursor: pointer; +} + #sharp { background-color: black; diff --git a/src/App.js b/src/App.js index d12665a184956ced662ba03de0af0e4950a446be..9a56c9eea467ddff7e4f70b45915fd6031a22009 100644 --- a/src/App.js +++ b/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> ) }