ftlabs / fastclick

Polyfill to remove click delays on browsers with touch UIs
MIT License
18.66k stars 3.23k forks source link

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

Open xuxiaoxiao312 opened 5 years ago

xuxiaoxiao312 commented 5 years ago

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

LiangFuzhi commented 5 years ago

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

lazyhero commented 4 years ago

https://www.jamescathy.top/p/113.html