'MediaMetadata' 未定义 no-undef 且 MediaMetadata 不是构造函数

编程问答 2022-04-25

问题描述

我已经在 vuejs 中使用 howler.js 实现了播放列表播放器。我想将 MediaMetadata API 集成到它。 MediaSession API 可以很好地处理通知栏、键盘控件、远程设备等控件。但我无法使用 MediaMetadata 设置音频的元数据（标题、艺术家、专辑、艺术品）。 跟随给定 tutorial 的 github repo。

出现以下错误： error 'MediaMetadata' is not defined no-undef

我正在使用 chrome 57 来运行它。还使用以下代码测试了浏览器兼容性：

if ('mediaSession' in navigator) {
    console.log("browser supports MediaMetadata API")
    navigator.mediaSession.Metadata = new MediaMetadata({
      title: "my_track_name",artist: "track_artist_name",album: "track_album_name",artwork: "track_image",});

} else {
    console.log("Your browser doean't support MediaMetadata")
}

上面的代码打印 browser supports MediaMetadata API，但它不断抛出错误 MediaMetadata is not defined。

我还尝试从包 @mdn/browser-compat-data 中导入它，如下所示：

const MediaMetadata = require("@mdn/browser-compat-data").api.MediaMetadata;

现在，它显示以下错误： Uncaught TypeError: MediaMetadata is not a constructor。

也尝试了 this 解决方案，但没有成功，错误仍在继续。

有人可以帮我解决这个问题吗？提前致谢。

解决方法

通过使用 new window.MediaMetadata({}) 而不是 new MediaMetadata({}) 来修复它

howler.jsjavascriptmediasessionvue.jswebapiwebapiwebapi