Add a favicon with media playback progress in Firefox

media-favicon.js

var canvas = document.createElement("canvas");
canvas.width = canvas.height = 32;
var context = canvas.getContext("2d");

var link = document.createElement("link");
link.setAttribute("rel", "icon");

var media = document.querySelector("audio, video");
media.addEventListener("timeupdate", function() {
  // get the current ratio
  var ratio = media.currentTime / media.duration;
  var arc = ratio * Math.PI * 2;
  var start = Math.PI * 1.5;
  var end = start + arc;
  canvas.width = canvas.width;
  context.fillStyle = "#0002";
  context.beginPath();
  context.arc(16, 16, 15, 0, Math.PI * 2);
  context.fill();
  context.beginPath();
  context.arc(16, 16, 14, start, end);
  context.lineWidth = 2;
  context.stroke();
  var href = canvas.toDataURL();
  link.remove();
  link.setAttribute("href", href);
  document.head.append(link);
});