Webpack hot reload doesn't stop html5 audio - vue.js

Question

In a Vue app I play background music, using the audio tag :
<audio id="music" autoplay loop>
<source
:src="musicfilename"
type="audio/mp3"
/>
</audio>
This works fine, but when the app is restarted during development, by Webpack 'hot reload', the music that was playing isn't stopped, so it keeps playing multiple music instances at the same time!
When I check with document.getElementsByTagName there is really only 1 instance of AUDIO, so I can't find a way to stop the previous audio instances from playing.
Any idea how to solve this problem?

Answer 1

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.