play() failed because the user didn't interact with the document first audio 如何控制自动播放
作者：互联网
//加上静音属性也播放不了
<audio
ref="audio"
preload="auto"
autoplay
src="./tip.mp3"
controls="controls"
hidden
loadedmetadata="onLoadedmetadata"
/>
</section>
<button ref="playBtn" @click="startPlay">播放</button>
//添加一个播放按钮，正常点击就可以播放 隐藏起来
事件：
startPlay() {
this.$refs.audio.currentTime = 0 // 从头开始播放提示音
this.$refs.audio.play()
},
//需要触发的时候 我的需求是轮播图到某一张图片的时候让播放声音 下面是轮播的一项配置
swiperOptionWarning: {
autoplay: { disableOnInteraction: false }, // 主要处理点击以后不轮播的bug
loop: false,
slidesPerView: 3,
spaceBetween: 20,
speed: 800,
// 用户操作swiper之后，是否禁止autoplay.默认为true：停止。
autoplayDisableOnInteraction: false,
// 拖动释放时不会输出信息，阻止click冒泡。拖动Swiper时阻止click事件。
preventLinksPropagation: true,
// 设置点击箭头
navigation: {
nextEl: '#next1',
prevEl: '#prev1'
}, on: {
slideChangeTransitionStart: function() {
cleartimeout()
if (_this.warningItems[this.activeIndex - 1].new) {
setTimeout(() => {
_this.$refs.playBtn.click() //定时器，这样就行 主动书法点击事件
})
}
}
}
},
标签：play,because,false,轮播,interact,播放,audio,click,refs 来源： https://www.cnblogs.com/-youth/p/13697705.html