在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实例,因此可以直接调用子组件的方法。