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() * (highest - lowest)) + lowest
	toneDisplay.innerHTML = newTone
})

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

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

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

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