使用JS开发带PIP弹窗的音频播放器遇报错及无音频问题求助

• 执行时序错位：脚本全局位置直接同步调用window.VID.requestPictureInPicture()，此时绑定到video的canvas流尚未生成任何有效帧，完全不具备加载元数据的条件，直接触发“视频元素的元数据尚未加载完成”的报错。该同步调用是无效的前置执行，发生在playAudio()之前，根本拿不到后续需要渲染的封面资源。
• 异步流程无等待闭环：showPictureInPictureWindow中的image.decode()是异步解码操作，代码未等待解码完成就直接执行canvas绘制，此时canvas无有效画面输出，捕获的视频流为空白帧，导致video元素无法解析到有效媒体元数据，PIP请求自然失败。部分浏览器会因为检测到空白媒体流，连带拦截同链路的音频自动播放请求，出现无报错但音频无法播放的现象。
• 事件绑定逻辑不稳定：在showPictureInPictureWindow内反复给video.onloadedmetadata赋值，每次调用都会覆盖之前的事件绑定，当video元数据加载完成时，回调触发逻辑会出现错位，导致后续流程无法正常执行。
• 未适配浏览器自动播放与PIP触发规则：非用户主动交互触发的媒体操作，会被现代浏览器的安全策略拦截。

• 删除脚本全局位置的无效window.VID.requestPictureInPicture()调用，所有PIP请求仅在有效媒体流加载完成的回调中触发。
• 重构资源加载链路，等待封面图片完全解码、canvas成功绘制有效帧后，再将canvas捕获流绑定到video元素，确保video可以正常解析到流的元数据。
• 仅为video绑定一次元数据加载完成回调，避免重复赋值覆盖导致的逻辑错位。
• 将音频播放、PIP触发逻辑绑定到用户主动交互事件中，适配浏览器的自动播放安全策略。

const audio = document.createElement('audio');
const canvas = document.createElement('canvas');
canvas.width = canvas.height = 512;
const video = document.createElement('video');
// 仅绑定一次元数据加载完成回调，避免覆盖
video.onloadedmetadata = async () => {
  await video.play();
  await video.requestPictureInPicture();
};

async function renderCover(coverUrl) {
  const canvasCtx = canvas.getContext('2d');
  const coverImage = new Image();
  coverImage.crossOrigin = 'anonymous';
  coverImage.src = coverUrl;
  // 等待图片完全解码完成
  await coverImage.decode();
  canvasCtx.drawImage(coverImage, 0, 0, 512, 512);
  // 确保canvas生成有效帧后再绑定捕获流
  video.srcObject = canvas.captureStream();
  video.muted = true;
}

async function playAudio() {
  audio.src = "mysong.mp3";
  // 更新系统媒体会话元数据
  navigator.mediaSession.metadata = new MediaMetadata({
    title: "Audio Title",
    artist: "MEEEEEEE",
    album: "LOOOL",
    artwork: [{src: "graphics/128x128.png", sizes: "512x512", type: "image/png"}]
  });
  // 先完成封面渲染，再启动音频播放
  const coverUrl = navigator.mediaSession.metadata.artwork.at(-1).src;
  await renderCover(coverUrl);
  await audio.play();
}

// 绑定用户首次点击交互触发播放流程，适配浏览器自动播放策略
document.addEventListener('click', () => {
  playAudio();
}, {once: true});

内容的提问来源于stack exchange，提问作者Super BUFF Meatballs