Question

在Vue应用程序中，我使用音频标签播放背景音乐：

<audio id="music" autoplay loop>
  <source
    :src="musicfilename"
    type="audio/mp3"
  />
</audio>

这可以正常工作，但是在开发过程中通过Webpack“热重载”重新启动应用程序时，正在播放的音乐不会停止，因此它可以同时播放多个音乐实例！

当我使用document.getElementsByTagName进行检查时，实际上只有1个AUDIO实例，因此我找不到停止播放以前的音频实例的方法。

有什么办法解决这个问题吗？

Answer 1

您应该跟踪何时热更换模块以及何时停止音频播放器。

<audio id="music" ref="player" autoplay loop>
  <source
    :src="musicfilename"
    type="audio/mp3"
  />
</audio>

export default {
  ...
  mounted() {
    if (module.hot) {
      module.hot.dispose(this.hmrHandler);
    }
  },
  destroyed() {
    if (module.hot) {
      module.hot.removeDisposeHandler(this.hmrHandler)
    }
  },
  methods: {
    hmrHandler() {
      const { player } = this.$refs
      player.pause()
      // Lines below can also help
      // player.currentTime = 0
      // player.src = ''
    },
  },
  ...
}

更新：将Howler.unload()放在mounted挂钩中可以解决此问题。

Webpack HMR API。

查看dispose和removeDisposeHandler。

Webpack热重装不会停止html5音频

1 个答案: