I've created a simple countdown timer in vuejs. setInterval is used to run every 0.1 second and when the time is 3 or 2 or 1 play a sound beep.mp3. (tried setTimeout is also not work).
The timer is work fine in iOS but not in android tablet (Samsung Galaxy Tab A with default browser).
When the init time is set to 15 or higher, there is 0.3 - 0.5 second delay when playing the sound for 2 second
Work on Mac / iphone / android phone
https://youtu.be/3DeD78lZ2F8
Sound delay in last 2 seconds on Android Tablet with default browser & chrome browser
https://youtu.be/syRdIBXYmeU
No sound delay on the same android tablet with firefox
https://youtu.be/1T68LvV8QRU
any idea why this happen? Is it possibly is browser problem?
The timer code:
<template>
<div class="white--text" style="font-size: 48px;">
{{second}}
<br/><br/><br/>
<v-btn @click="timerStart">Start</v-btn>
</div>
</template>
<script>
export default {
data() {
return {
default: 20,
second: 20,
num: 0.1,
audio: new Audio(require('@/assets/audio/beep.mp3'))
}
},
mounted() {
},
methods: {
timerStart() {
setInterval(() => {
this.second = parseFloat((this.second - this.num).toFixed(1))
if (this.second == 3.0 || this.second == 2.0 || this.second == 1.0)
this.audio.play() //<-- code run at this.second == 2 but sound played at 1.7 second
// Reset the timer
if (this.second <= 0)
this.second = this.default
}, 100)
}
}
}
</script>
与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…