ftlabs / fastclick

Polyfill to remove click delays on browsers with touch UIs

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

use fastclick in vue project, audio cannot play correctly in ios

xuxiaoxiao312 opened this issue · comments

commented

my app.vue code

<template>
<div id='app' style="width:300px;height:300px;background:#ff0000;margin:10px" @click="togglePlay">
   PLAY WITH {{audioState}}
  </p>
</div>
</template>
<script>
export default {
  data () {
    return {
      answerAudio: new Audio(),
      audioState: 'origin'
    }
  },
  methods: {
    togglePlay () {
      this.answerAudio.play()
      console.log(this.answerAudio.readyState)
    }
  },
  mounted () {
    this.answerAudio.src ='https://static.ladybirdedu.com/mp3/2018/05/04/v9DoVvZ1WPzepoO4cRELBAIRmgHz8CuOgG5UMaX4.m4a'
    let vm = this
    this.answerAudio.load()
    this.answerAudio.addEventListener('stalled', function (e) {
      vm.audioState = 'stalled'
      console.log('stalled')
    })
    this.answerAudio.addEventListener('error', function (e) {
      console.log('error')
      vm.audioState = 'error'
    })
    this.answerAudio.addEventListener('playing', function (e) {
      vm.audioState = 'playing'
      console.log('playing')
    })
    this.answerAudio.addEventListener('suspend', function (e) {
      vm.audioState = 'suspend'
      console.log('suspend')
    })
    this.answerAudio.addEventListener('canplay', function (e) {
      vm.audioState = 'canplay'
      console.log('canplay')
    })
    this.answerAudio.addEventListener('loadstart', function (e) {
      vm.audioState = 'loadstart'
      console.log('loadstart')
    })
  }
}
</script>

if i import fastclick in main.js, the audio load start event will not be be triggered,and it wont play any way.
Ios version is 12.2
The browser is safari

遇到相同问题,双击是能播放,没找到具体问题,只能不用fastclick,或者needsclick。