Skip to content
A demo on displaying audio visualization inside a Picture-in-Picture window
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
artwork.jpg
index.css
index.html
index.js
pip.svg
readme.md
screenshot.jpg
song.mp3

readme.md

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
You can’t perform that action at this time.