如何通过Base64 Data URI播放音频？更新URI后播放失败求助

你的问题核心在于：Howl实例只初始化了一次，后续this.uri更新时，旧的Howl实例不会自动读取新地址，因此始终播放第一次生成的音频。

解决方法 #

把创建Howl实例和播放的逻辑移到订阅回调内部，每次生成新URI后，重新创建实例并播放：

this.flagObs.subscribe((data) => {
  this.wav.fromScratch(1, 8000, '8m', data);
  this.wav.fromMuLaw();
  this.uri = this.wav.toDataURI();
  
  // 每次更新URI后，重新创建Howl实例并播放
  new Howl({
    src: this.uri,
    html5: true,
    format: 'wav',
  }).play();
});

优化方案（避免重复实例堆积） #

如果担心频繁创建实例导致性能问题，可以先销毁旧实例再创建新的：

let audioPlayer = null;

this.flagObs.subscribe((data) => {
  this.wav.fromScratch(1, 8000, '8m', data);
  this.wav.fromMuLaw();
  this.uri = this.wav.toDataURI();
  
  // 销毁旧实例释放资源
  if (audioPlayer) {
    audioPlayer.unload();
  }
  
  // 创建新实例并播放
  audioPlayer = new Howl({
    src: this.uri,
    html5: true,
    format: 'wav',
  });
  audioPlayer.play();
});

这样每次URI更新时，都会基于新地址创建音频实例并播放，就能解决后续无法播放的问题。

内容的提问来源于stack exchange，提问作者Tim Dang