<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
my app.vue code
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