Audio not playing through JavaScript when put in a loop

Question

I have a piece of JavaScript that is supposed to loop through some audio files in series that are defined using audio tags with an id in the HTML body. The problem is that the audio at first would stop in the first 3 seconds, and now it doesn't play at all, and I can't find what's wrong. The below code is all in the HTML body and is the smallest possible example of my error:

<audio id="lobby1">
    <source src="audio/lobby-audio1.mp3" type="audio/mpeg">
</audio>
<audio id="lobby2">
    <source src="audio/lobby-audio2.mp3" type="audio/mpeg">
</audio>
<button onclick="playLobby()">play lobby</button>

<script>
    number = 1
    lobbySong = "lobby" + number
    function playLobby() {
        while (number < 2) {
            var lobbySong = document.getElementById(lobbySong);
            lobbySong.play();
            lobbySong.onended = function() {
                number++
            };
        }
    }
</script>

The error I get from the console is cannot read property 'play' of null referring to lobbySong.play in the while loop.

code in while (number < 2) { will run continuously, not waiting for onended, executing play at an extremely fast pace — Jaromanda X
– Jaromanda X, Commented Oct 9, 2020 at 1:24
@lucumt - since playlobby is executed via onclick, that won't help and would mean playlobby isn't accessible through onclick — Jaromanda X
– Jaromanda X, Commented Oct 9, 2020 at 1:26
You are redeclating the variable! lobbySong <--- it has nothing to do with lobbySong = "lobby" + number — epascarello
– epascarello, Commented Oct 9, 2020 at 1:29
how can I make it not go through play at a fast pace? I have tried wait(lobbySong.duration*1000); without waiting for the onended — Revvz
– Revvz, Commented Oct 9, 2020 at 1:30

Jaromanda X · Accepted Answer · 2020-10-09 01:30:30Z

2

Try rewriting the javascript like this

function playLobby() {
    let fn = function(number) {
        let lobbySong = "lobby" + number;
        let audio = document.getElementById(lobbySong);
        audio.play();
        audio.onended = function () {
            if (number < 2) {
                fn(number + 1);
            }
        }
    };
    fn(1);
}

answered Oct 9, 2020 at 1:30

Jaromanda X

57.1k6 gold badges82 silver badges96 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Revvz Over a year ago

thanks. This worked! Is there a way to loop this forever?

Jaromanda X Over a year ago

else { fn(1) } or audio.onended = function () { fn(3-number) }

Revvz Over a year ago

I have changed the code a little bit and added it to my join page. However, even with a body onload event triggering the function, it doesn't play again using this JavaScript in the body and appropriately named audio sources.

StackSlave · Accepted Answer · 2020-10-12 23:49:16Z

0

Just use the AudioWhore constructor I created:

let doc, htm, bod, nav, M, I, mobile, S, Q, AudioWhore; // for use on other loads
addEventListener('load', ()=>{
doc = document; htm = doc.documentElement; bod = doc.body; nav = navigator; M = tag=>doc.createElement(tag); I = id=>doc.getElementById(id);
mobile = nav.userAgent.match(/Mobi/i) ? true : false;
S = (selector, within)=>{
  var w = within || doc;
  return w.querySelector(selector);
}
Q = (selector, within)=>{
  var w = within || doc;
  return w.querySelectorAll(selector);
}
AudioWhore = function(playButton){
  this.stack = [];
  let playing = 0;
  this.add = src=>{
    const a = M('audio');
    a.src = src; this.stack.push(a);
    return this;
  }
  playButton.onclick = ()=>{
    let s = this.stack, l = s.length;
    let p = playing-1 > -1 ? playing-1 : l-1;
    s[p].load();
    if(playing === l)playing = 0;
    s[playing++].play();
  }
}
// magic under here
const ah = new AudioWhore(I('play_button'));
ah.add('http://soundbible.com/mp3/Wind-Mark_DiAngelo-1940285615.mp3').add('http://soundbible.com/mp3/Tornado_Siren_II-Delilah-747233690.mp3');
}); // end load

<input id='play_button' type='button' value='play' />

edited Oct 12, 2020 at 23:49

answered Oct 9, 2020 at 2:19

StackSlave

10.6k2 gold badges20 silver badges35 bronze badges

1 Comment

Revvz Over a year ago

It looks like you would have to hard code every lobby song in there. I mentioned that I have more than 2 songs, but 2 was the smallest example. Am I wrong?

Collectives™ on Stack Overflow

Audio not playing through JavaScript when put in a loop

2 Answers 2

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related