HTML5 AUDIO 不断循环不同的来源答案

【问题标题】：HTML5 AUDIO Loop through different sources perpetuallyHTML5 AUDIO 不断循环不同的来源
【发布时间】：2016-01-07 05:30:35
【问题描述】：

您好，我很难循环播放不同的音频播放器。从我认为优雅的方法开始，我尝试了各种方法：在一个播放器上切换 src 并加载新的 src 并播放。每次它都拒绝工作，所以我的修改变得更加粗糙，以至于现在尝试 4 个单独的音频播放器。在这一点上，我所关心的只是让这该死的东西工作。

var ear = document.getElementById('ear'),
    ogg = document.getElementById('ogg'),
    mp3 = document.getElementById('mp3'),
    sounds = ['laughing', 'gull', 'reel', 'snore'],
    counter = 0,
    loop = 0,
    activate = 0,
    p = document.getElementsByTagName('p')[0];

function loopPrep(){
   audio.remove();
   for (var i = 0; i < sounds.length; i++) {
            var elem =
                        "<source id='ogg' src=media/"+sounds[i]+".ogg type='audio/ogg'>"+
                        "<source id='mp3' src=media/"+sounds[i]+'.mp3 type="audio/mpeg">';
           var temp = document.createElement('audio');
           document.getElementsByTagName('body')[0].appendChild(temp);
           var a = document.getElementsByTagName('audio')[i];
           a.innerHTML=elem;
       }; 
        document.getElementsByTagName('audio')[0].addEventListener('onended', function(){ document.getElementsByTagName('audio')[1].play(); });  
      document.getElementsByTagName('audio')[1].addEventListener('onended', function(){  document.getElementsByTagName('audio')[2].play(); });
      document.getElementsByTagName('audio')[2].addEventListener('onended', function(){  document.getElementsByTagName('audio')[3].play(); });
      document.getElementsByTagName('audio')[3].addEventListener('onended', function(){ document.getElementsByTagName('audio')[0].play(); });
       document.getElementsByTagName('audio')[0].play();
              };


function playNext(){
    if (counter == 3){
        loop = 1; activate = 1; loopPrep();
    } else { counter++; };
    ogg.setAttribute('src', 'media/'+sounds[counter]+".ogg");
    mp3.setAttribute('src', 'media/'+sounds[counter]+".mp3");
}

【问题讨论】：

想通了——我为我的事件监听器写的是 onended 而不是 end。事实证明，这从一开始就是问题所在。不过，请注意 ID。
您使用多个音频元素的想法是最好的，除非您确实需要在页面中显示原始阅读器。一些 UA 不缓存音频媒体，因此如果您确实更改了单个音频元素的 src，它们将对文件进行新的调用。另外，尝试使用你的变量而不是每次调用 DOM 方法（getElementsByTagName，getElementById）
啊，是的，我应该将它们移到循环中并使用缓存的变量

标签： javascript html audio

【解决方案1】：

我意识到我的事件侦听器“已结束”并且应该已“结束”。 onended 用于内联 html 执行。

是时候回去用一个音频播放器重写它并切换 src 并加载和播放了。

【讨论】：