CODEWITHSUNDEEP
javascriptaudioscheduling
djeetee
djeetee

Reputation: 1837

Generating sound in browser at interval

I would like to schedule a sound to be produced at a certain interval in a web app. A sample code is below. Please note that I also tried using Web Audio APIs with exactly the same problem I will be describing here. First, the code:

export default class BeepPlayer {
  constructor(interval) {
    this.audio = new Audio()
    this.audio.src = 'src/assets/sounds/metronomeClick.wav'
    this.interval = (60 / interval) * 1000
    this.intervalID = null

    console.log('interval: ' + this.interval)
  }

  play() {
    this.intervalID = setTimeout(this._playSound.bind(this), this.interval)
  }

  _playSound() {
    console.log('beep')
    this.audio.play()

    clearTimeout(this.intervalID)
    this.intervalID = setTimeout(this._playSound.bind(this), this.interval)
  }

  stop() {
    clearTimeout(this.intervalID)
    this.audio = null
  }
}

if I construct the object with an interval of 60, play() will sound every 1 second.

if I construct the object with an interval of 30, play() will sound every 2 seconds but skips the first beep.

if I construct the object with an interval of 20, play() will sound every 3 seconds but skips the first beep.

if I construct the object with an interval of 15, play() will not produce any sound.

I have no idea why there is a threshold at around the 3-second mark and why even the Web Audio API code which does not even load an audio file behaves the same way.

Any thoughts on how I can overcome this bizarre issue would be appreciated.

thanks.

Upvotes: 0

Views: 79

Answers (1)

djeetee
djeetee

Reputation: 1837

problem fixed. Please see my comment above. summary: use the built-in speakers of the laptop :)

Upvotes: 0

Related Questions