HTML5 AUDIO 不断循环不同的来源

Posted 2023-02-24

【中文标题】HTML5 AUDIO 不断循环不同的来源

【英文标题】：HTML5 AUDIO Loop through different sources perpetually

【发布时间】：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）

啊，是的，我应该将它们移到循环中并使用缓存的变量

【参考方案1】：

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

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