Trivial JS function to help sync sound and screen when recording a browser based screencast

clapperboard.js

export function clapperBoard() {
  let audio = new AudioContext()
  let beep  = audio.createOscillator()
  let flash = document.createElement("div")

  beep.frequency.value = 440 * 5
  beep.connect(audio.destination)
  flash.classList.add("clapperboard")

  beep.start()
  document.body.appendChild(flash)
  setTimeout(() => flash.remove(), 100)
  beep.stop(audio.currentTime + 0.1)
}