audio的play属性在第一次操作失效

audio的play属性在第一次操作失效，在第二次操作后恢复正常

最近在写一个音乐网站，我希望页面呈现的效果是点击按钮A，audio实现播放：

于是我在按钮A所在的组件，为它绑定一个点击事件，触发事件playMusic：

music(play, index) {
            ......
            this.$bus.$emit("playMusic")
            ......

在playMusic里：

this.$bus.$on("playMusic", () => {
            console.log(this.$refs.audio_music)
            this.playPause()
        })

playPause() {
            if (this.isPlay) { //暂停音乐
                ...
                    this.$refs.audio_music.pause();
                ...
            } else { // 播放音乐
		            ......
                this.$refs.audio_music.play();
                ......
            }

照理来说，初次点击按钮就会调用play(),并播放音频，但我却得到如下结果：
只有在第二次及以上点击按钮A才能实现正常功能。

后面我为audio添加了一个自动播放的属性，就解决了

<audio :src="getSongUrl(songList[songIndex].url)" 
		controls="controls" 
		ref="audio_music" 
		style="display:"
    	autoplay muted>
</audio>

无论我和页面是否有交互，只要是切换到新的资源，就会出现上述错误，于是我打算先记录下来。