Question

我有一段JavaScript，该JavaScript可以循环播放一系列音频文件，这些文件是使用HTML正文中带有id的音频标签定义的。问题在于，最初的音频会在开始的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，它引用 while 循环中的lobbySong.play。

Answer 1

尝试像这样重写JavaScript

--remote

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

放入循环时，音频无法通过JavaScript播放

2 个答案: