修复 "Cannot ready property 'container' of null" 来自 musickit.js 当运行 Angular 服务器上的应用程序

Question

我正在编写一个应用程序，它使用 Angular 和 MusicKit 来允许用户同时收听相同的音乐。我在尝试运行应用程序（使用 ng serve --host x.x.x.x）时遇到以下错误，而不是默认本地主机（使用 ng serve）：

core.js:14597 ERROR TypeError: Cannot read property 'container' of null  
    at Player. (musickit.js:formatted:6614)  
    at musickit.js:formatted:726  
    at Object.next (musickit.js:formatted:739)  
    at fulfilled (musickit.js:formatted:627)  
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (zone.js:388)  
    at Object.onInvoke (core.js:16156)  
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (zone.js:387)  
    at Zone.push../node_modules/zone.js/dist/zone.js.Zone.run (zone.js:138)  
    at zone.js:872  
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:421)  



21:08:38.100 core.js:14597 ERROR Error: Uncaught (in promise): 
TypeError: Cannot read property 'isFairplay' of undefined  
TypeError: Cannot read property 'isFairplay' of undefined  
    at MediaExtension.get [as isFairplay] (musickit.js:formatted:5020)  
    at musickit.js:formatted:6728  
    at Array.filter ()  
    at Player._playbackDataForItem (musickit.js:formatted:6726)  
    at Player. (musickit.js:formatted:6504)  
    at musickit.js:formatted:726

我认为 "isFairplay" 错误是导致第一个错误的任何原因的结果，但为了安全起见，我将其包括在内。我在 digitalocean 上使用 nginx 服务器（ng 构建，将 dist 文件夹移动到 /var/www/html）但在本地我只是使用“ng serve --host x.x.x.x to 运行来对抗我的本地 IP。仅使用普通 ng 服务时，一切正常。我尝试使用其他 Apple Music 帐户，以防 Apple 对实际发出请求的应用程序感到困惑，我尝试了不同的 browsers/incognito windows 在 Chrome。

我正在尝试执行以下操作： 1. 向用户显示他们图书馆中的歌曲列表 2.允许用户select一首歌 3. 在可观察对象中订阅以下步骤： 4. 当歌曲被 selected 时，将歌曲排队 musicKit.queueSong 5.歌曲排队时，使用musicKit.player.play()播放当前排队的歌曲

在第 5 步之后出现以下错误。我已经将 container.id 添加到歌曲中，所以我相信出于某种原因 Apple 并没有真正排队播放歌曲，我只是不确定它发生了什么然后。 queueSong returns 成功，所以我认为 container.id 不是唯一的 null 或 undefined ，它只是它抱怨的第一件事。

描述上述步骤中发生的事情的代码。 "playSong(..)" 订阅了另一个 class:

playSong(songs: any[], index: number): Observable {  
    if(songs) {  
      //songs play without the forEach, but musicKit still complains 
      //about not finding container.id in the song object  
      songs.forEach(song => song['container'] = { 'id' : song.id });  


      return from(this.musicKitService.setQueue({ 'items': songs, startPosition: index}))  
        .pipe(mergeMap(x => this.play()));  
    }  
  }  

  modifyPlayback(arg: Observable): Observable {  
    return arg.pipe(map(x => this.setTitle()));  
  }  


  play(): Observable {  
    return this.modifyPlayback(from(this.player.play()));  
  }

我希望在这之后歌曲开始在浏览器中播放。我实际上是在排队一首歌曲，然后告诉 musicKit.js 播放排队的歌曲。但是，当 msuicKit.js 去播放排队的歌曲时，那里没有歌曲可以播放。当我运行在本地主机之外时，我不确定歌曲成功排队后实际发生了什么。

我还 post 将此问题发布到 Apple 开发者论坛，在那里我将去年遇到过该问题的人包括在内，但该问题从未得到解决。 https://forums.developer.apple.com/message/350355#350355

我也忘了在原文post中提到：这只发生在chrome。该代码在 Firefox 和移动 safari 中运行良好。

Answer 1

解决方案：

至少在 chrome 中，musicKit.js 要求托管的站点使用 SSL。这对我来说不是问题运行本地的所有内容，但如果我什至运行反对我的网络 IP 地址，则需要 SSL。在我的服务器上设置 https 后，我不再收到错误。据我所知，musicKit.js 文档中没有对此进行记录，但我可能已经错过了。

修复 "Cannot ready property 'container' of null" 来自 musickit.js 当运行 Angular 服务器上的应用程序

Fix "Cannot ready property 'container' of null" From musickit.js When Running Angular App on Server

javascript

rxjs

typescript

angular

apple-musickit

修复 "Cannot ready property 'container' of null" 来自 musickit.js 当 运行 Angular 服务器上的应用程序

Fix "Cannot ready property 'container' of null" From musickit.js When Running Angular App on Server

javascript

rxjs

typescript

angular

apple-musickit

修复 "Cannot ready property 'container' of null" 来自 musickit.js 当运行 Angular 服务器上的应用程序