Аудио не воспроизводится через JavaScript при вводе в цикл

#javascript #html

#javascript #HTML

Вопрос:

У меня есть фрагмент JavaScript, который должен последовательно перебирать некоторые аудиофайлы, определенные с использованием аудиотегов с идентификатором в теле HTML. Проблема в том, что звук сначала останавливается в первые 3 секунды, а теперь он вообще не воспроизводится, и я не могу найти, что не так. Приведенный ниже код находится в теле HTML и является наименьшим возможным примером моей ошибки:

 <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>

Ошибка, которую я получаю с консоли cannot read property 'play' of null , относится к lobbySong.play циклу while.

1. код while (number < 2) { будет выполняться непрерывно, не ожидая продолжения, выполняя воспроизведение в чрезвычайно быстром темпе

2. @lucumt — поскольку playlobby выполняется через onclick, это не поможет и будет означать, что playlobby недоступен через onclick

3. @JaromandaX alert() сработал onclick

4. Вы переопределяете переменную! lobbySong <— это не имеет ничего общего с lobbySong = "lobby" number

5. как я могу заставить его не воспроизводиться в быстром темпе? Я попытался wait(lobbySong.duration*1000); , не дожидаясь onended

Ответ №1:

Попробуйте переписать javascript следующим образом

 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);
}

1. Спасибо. Это сработало! Есть ли способ зациклить это навсегда?

2. else { fn(1) } или audio.onended = function () { fn(3-number) }

3. Я немного изменил код и добавил его на свою страницу присоединения. Однако, даже при событии загрузки тела, запускающем функцию, она не воспроизводится снова, используя этот JavaScript в теле и соответствующим образом названные источники звука.

Ответ №2:

Просто используйте созданный мной конструктор AudioWhore:

 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' />