解决页面退出后语音还在播放的bug

在H5的开发工作中，遇到了一个问题，就是在页面跳转后，甚至是webview销毁后，依然播放之前页面的语音。出现这个现象，分析一下原因，第一个是VUE本身就是个单页面的逻辑，所以页面跳转后，相当于还是一个URL，导致了跳转后并没有销毁，当webview销毁后，音频还在播放，说明可能在安卓手机上，调用的系统播放器，而这个播放器是独立于webview的，导致了后面还一直播放，思来应该在VUE页面的声明周期中添加销毁的操作，所以应该在beforeDestroy中添加如下代码：

for (let i = 0; i < this.stepList.length; i++) {
      if (this.$refs["audio" + i] != null) {
        this.$refs["audio" + i][0].stopMusic();
      }
}

在页面中的ref是如下添加的

<audio-player
      :audioSrc="step.audioUrl"
      :ref="'audio' + num"
      @stopAudio="stopAudio"
      :num="num"
></audio-player>

在v-for中结合的ref，当获取refs时，得到的是一个数组，在组件中用的ref对应的对象是VUE实例，因此可以直接调用子组件的方法。