generate note functionality

app.js

@@ -1,6 +1,7 @@
-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 generateToneButton = document.querySelector('#generate-tone > button:nth-of-type(1)')
+const generateNoteButton = document.querySelector('#generate-tone > button:nth-of-type(2)')
+const playButton = document.querySelector('#generate-tone > button:nth-of-type(3)')
+const stopButton = document.querySelector('#generate-tone > button:nth-of-type(4)')
 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)')
@@ -10,11 +11,12 @@ const synth = new Tone.Synth().toDestination()
 let newTone
 let lowest = 'a0'
 let highest = 'c8'
+const notes = ['c', 'c#', 'd', 'd#', 'e', 'f', 'f#', 'g', 'g#', 'a', 'a#', 'b' ]
 
 minInput.setAttribute('placeholder', lowest)
 maxInput.setAttribute('placeholder', highest)
 
-generateButton.addEventListener('click', () => {
+generateToneButton.addEventListener('click', () => {
 	Tone.start()
 	const minFreq = teoria.note(lowest).fq()
 	const maxFreq = teoria.note(highest).fq()
@@ -22,6 +24,27 @@ generateButton.addEventListener('click', () => {
 	toneDisplay.innerHTML = newTone
 })
 
+generateNoteButton.addEventListener('click', () => {
+	Tone.start()
+
+	const lowOctave = parseInt(lowest.charAt(1)) * 12
+	const lowNote = notes.indexOf(lowest.charAt(0))
+	const highOctave = parseInt(highest.charAt(1)) * 12
+	const highNote = notes.indexOf(highest.charAt(0))
+
+	const lowPitch = lowOctave + lowNote
+	const highPitch = highOctave + highNote
+	const pitchSpread = highPitch - lowPitch
+	const randomAddedPitches = Math.floor(Math.random() * (pitchSpread + 1) )
+	const randomPitch = lowPitch + randomAddedPitches
+
+	const randomPitchOctave = Math.floor(randomPitch / 12)
+	const randomPitchNote = randomPitch % 12
+
+	newTone = notes[randomPitchNote] + randomPitchOctave
+	toneDisplay.innerHTML = newTone
+})
+
 playButton.addEventListener('click', ()=>{
 	synth.triggerAttack(newTone)
 })

index.html

@@ -25,6 +25,7 @@
 		<input type="text" />
 		<input type="text" />
 		<button>Generate Tone</button>
+		<button>Generate Note</button>
 		<button>Play</button>
 		<button>Stop</button>
 	</section>