Create a popup media player using JS?

Question

I have been trying to make an audio player that has basic controls allowing audio to be played instead of a video. It needs to be viewed in PIP mode, as well. Here is my code so far:

    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();

Any help that you can give me would be very much appreciated. (I already have the pause and play functions but I didn't include them for message size)

PS: (I don't know why, but earlier I was getting an error that said "JavaScript exception: Failed to execute 'requestPictureInPicture' on 'HTMLVideoElement': Metadata for the video element are not loaded yet" and now I have no errors at all... and no music either...)

PPS: (I fixed some of the bugs... and now I have the original error again.)

Answer 1

I have the same problem as you, but I have solved it
My solution:
My guess is that the video data did not load successfully when the RequestPicturePicture function was executed
So you can execute the RequestPicturePicture function in the loadedData function