plyr - 以编程方式更改 Plyr 音频中的源

Question

我正在尝试构建一个使用 plyr 作为音频播放器的反应应用程序。我有使用具有不同内容布局的模板的课程。当用户浏览课程时，每节课的音频都会发生变化。如果是全新的模板，音频变化很好，但如果从一课到另一课的模板相同，则音频不会改变。我正在尝试根据 redux 中音频 url 的更改来更改它。我好像撞墙了。我似乎无法让 plyr 以编程方式更改源代码。

我创建了一个 codepen 以显示它不能与 onclick 一起使用：

https://codepen.io/bradrice/pen/JjyxjEY

    const changeSource = ()=> {
    console.log('changing source');
        player.source = {
      type: 'audio',
      title: 'Example title',
      sources: [
    {
      src: 'https://www.soundhelix.com/examples/mp3/SoundHelix-Song-13.mp3',
      type: 'audio/mp3',
    },
  ],
};
};

我可以在控制台中看到 onclick 正在调用 changeSource 函数，但源没有改变。我做得对吗？