You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

92 lines
1.8 KiB
JavaScript

const address = document.querySelector('#address').innerHTML
const socket = new ReconnectingWebSocket(location.origin.replace(/^http/, "ws") + address);
socket.onopen = (event) => {
socket.send(JSON.stringify({type:'hello'}))
}
const join = document.querySelector('#join')
join.addEventListener('click', ()=>{
startPlay()
setTimeout(()=>stopPlay(), 250)
})
const functions = {
start_play: (msg) => startPlay(),
stop_play: (msg) => stopPlay(),
tune: (msg) => tune(msg.freq, msg.gain)
}
socket.onmessage = (e) => {
let message
try {
message = JSON.parse(e.data)
} catch (e) {
console.log(e)
}
if (!message) return
functions[message?.type](message)
}
const WIDTH = window.innerWidth
const HEIGHT = window.innerHeight
const canvas = document.querySelector("#draw")
const canvasContext = canvas.getContext("2d")
canvas.width = WIDTH
canvas.height = HEIGHT
const audioContext = new AudioContext()
const oscillator = audioContext.createOscillator()
const gainNode = audioContext.createGain()
oscillator.connect(gainNode)
const maxFreq = 6000
const maxVol = 0.2
const initialVol = 0.001
oscillator.start(0)
oscillator.detune.value = 100
oscillator.addEventListener('end', () => {
console.log("Your tone has stopped")
})
gainNode.gain.value = initialVol
gainNode.gain.minValue = initialVol
gainNode.gain.maxValue = initialVol
let pressed = false
let cursorX
let cursorY
const startPlay = () => {
gainNode.connect(audioContext.destination)
}
const stopPlay = () => {
gainNode.disconnect(audioContext.destination)
}
const tune = (freq, gain) => {
oscillator.frequency.value = freq;
gainNode.gain.value = gain;
let x = WIDTH / maxFreq * freq
let y = HEIGHT / maxVol * gain
canvasContext.fillStyle = "rgb(0,0,0)"
canvasContext.fillRect(x, y, 5,5)
}