javascript - JS を使用してポップアップ メディア プレーヤーを作成しますか?

Question

ビデオの代わりにオーディオを再生できる基本的なコントロールを備えたオーディオ プレーヤーを作成しようとしています。同様に、PIP モードで表示する必要があります。これまでの私のコードは次のとおりです。

    var audio = document.createElement('audio'); // The Audio

    var canvas = document.createElement('canvas'); // New Canvas To Contain Video
    canvas.width = canvas.height = 512;

    var video = document.createElement('video'); // Create Video
    video.srcObject = canvas.captureStream(); // Make Video Reflect The Canvas
    video.muted = true;

    function showPictureInPictureWindow() {
      const image = new Image();
      image.crossOrigin = true;
      image.src = [...navigator.mediaSession.metadata.artwork].pop().src;
      image.decode();

      canvas.getContext('2d').drawImage(image, 0, 0, 512, 512);
      video.onloadedmetadata = function() {
        video.play();
        video.requestPictureInPicture();
      };
    }
    
    window.VID = video;
    window.AU = audio;
    
    function playAudio() {
        audio.src = "mysong.mp3";
        // Update Media Session metadata
        navigator.mediaSession.metadata = new MediaMetadata({
          title: "Audio Title",
          artist: "MEEEEEEE",
          album: "LOOOL",
          artwork: [{src: "graphics/128x128.png", sizes: "128x128", type: "image/png"}]
        });
        // Play audio
        audio.play();
        // Show track album in a Picture-in-Picture window
        showPictureInPictureWindow();
    }
    
    window.VID.requestPictureInPicture();
    playAudio();

あなたが私に与えることができるどんな助けでも大歓迎です。(私はすでに一時停止と再生機能を持っていますが、メッセージサイズのためにそれらを含めませんでした)

PS: (理由はわかりませんが、以前は「JavaScript 例外: 'HTMLVideoElement' で 'requestPictureInPicture' を実行できませんでした: ビデオ要素のメタデータがまだ読み込まれていません」というエラーが表示されていましたが、今はエラーはありませんまったく...そして音楽もありません...）

PPS: (いくつかのバグを修正しました...そして、元のエラーが再び発生しました。)