[Vuejs]-Webpack hot reload doesn't stop html5 audio

You should track when your module is being hot replaced, and when it is just stop the audio player.

<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 = ''
    },
  },
  ...
}

Update:
Howler.unload() placed in the mounted hook solved the problem.

Webpack HMR API.

Look at dispose and removeDisposeHandler.