Skip to content
This repository has been archived by the owner on Jun 9, 2022. It is now read-only.

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

Open
xuxiaoxiao312 opened this issue May 7, 2019 · 2 comments
Open

Comments

@xuxiaoxiao312
Copy link

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
Copy link

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

@lazyhero
Copy link

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants