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 = 'a0'
let highest = 'c8'

minInput.setAttribute('placeholder', lowest)
maxInput.setAttribute('placeholder', highest)

generateButton.addEventListener('click', () => {
	Tone.start()
	const minFreq = teoria.note(lowest).fq()
	const maxFreq = teoria.note(highest).fq()
	newTone = (Math.random() * (maxFreq - minFreq)) + minFreq 
	toneDisplay.innerHTML = newTone
})

playButton.addEventListener('click', ()=>{
	synth.triggerAttack(newTone)
})

stopButton.addEventListener('click', ()=>{
	synth.triggerRelease()
})

minInput.addEventListener('change', ()=>{
	lowest = minInput.value
})

maxInput.addEventListener('change', ()=>{
	highest = maxInput.value
})