/pip-audio-visualization

A demo on displaying audio visualization inside a Picture-in-Picture window

Primary LanguageJavaScript

Audio Visualization in Picture-in-Picture

A demo on displaying audio visualization inside a Picture-in-Picture window.

screenshot

How it's made

  1. Use Web Audio API to read audio's waveform data
  2. Use Canvas API to draw visualizations based on waveform data
  3. Convert canvas into a video stream using canvas.captureStream()
  4. Create a <video> element, using the canvas video stream as its source
  5. video.requestPictureInPicture() to show the Picture-in-Picture window
  6. Use Media Session API to add playback controls to the Picture-in-Picture window