Skip to content

Latest commit

 

History

History
20 lines (13 loc) · 812 Bytes

readme.md

File metadata and controls

20 lines (13 loc) · 812 Bytes
Raw

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