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()                                  //定时器，这样就行 主动书法点击事件

              })

            

            }

          }

        }

      },