From cc8f0986ab766f13c0bc5ca27fd87548ace5e0a9 Mon Sep 17 00:00:00 2001
From: Matthew Huntington <matt.huntington@gmail.com>
Date: Wed, 31 Jul 2024 18:27:30 +0200
Subject: [PATCH] set min/max for tone generation

---
 app.js     | 22 +++++++++++++++++-----
 index.html |  2 ++
 2 files changed, 19 insertions(+), 5 deletions(-)

diff --git a/app.js b/app.js
index 1a0e0a9..7397c20 100644
--- a/app.js
+++ b/app.js
@@ -1,17 +1,22 @@
-const lowest = 27.5
-const highest = 4186
-const range = highest - lowest
-
 const generateButton = document.querySelector('#generate-tone > button:nth-of-type(1)')
 const playButton = document.querySelector('#generate-tone > button:nth-of-type(2)')
 const stopButton = document.querySelector('#generate-tone > button:nth-of-type(3)')
 const toneDisplay = document.querySelector('#generate-tone dd')
+const minInput = document.querySelector('#generate-tone input:nth-of-type(1)')
+const maxInput = document.querySelector('#generate-tone input:nth-of-type(2)')
+
 const synth = new Tone.Synth().toDestination()
+
 let newTone
+let lowest = 27.5
+let highest = 4186
+
+minInput.setAttribute('placeholder', lowest)
+maxInput.setAttribute('placeholder', highest)
 
 generateButton.addEventListener('click', () => {
 	Tone.start()
-	newTone = Math.random() * range + lowest
+	newTone = (Math.random() * (highest - lowest)) + lowest
 	toneDisplay.innerHTML = newTone
 })
 
@@ -23,3 +28,10 @@ stopButton.addEventListener('click', ()=>{
 	synth.triggerRelease()
 })
 
+minInput.addEventListener('change', ()=>{
+	lowest = parseFloat(minInput.value)
+})
+
+maxInput.addEventListener('change', ()=>{
+	highest = parseFloat(maxInput.value)
+})
diff --git a/index.html b/index.html
index 4132c7d..8ea3705 100644
--- a/index.html
+++ b/index.html
@@ -15,6 +15,8 @@
 			<dt>Tone:</dt>
 			<dd></dd>
 		</dl>
+		<input type="number" />
+		<input type="number" />
 		<button>Generate Tone</button>
 		<button>Play</button>
 		<button>Stop</button>