android - Problem with javascript timer play sound in last 3 seconds

Question

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>

Answer 1

等待大神答复