logo标签列表

音频在上一首播放完毕后自动播放下一首歌曲

javascripthtmlhtml5-audio
15

我想创建一个音频背景播放器，用户只能点击图像来播放或停止播放。我在尝试使用已有代码创建播放列表时遇到了麻烦，因为它无法自动播放下一首歌曲。我想用原生JS实现。
这是我目前的代码:
https://jsfiddle.net/rockarou/ad8Lkkrj/

var imageTracker = 'playImage';

swapImage = function() {
  var image = document.getElementById('swapImage');
  if (imageTracker == 'playImage') {
    image.src = 'http://findicons.com/files/icons/129/soft_scraps/256/button_pause_01.png';
    imageTracker = 'stopImage';
  } else {
    image.src = 'http://findicons.com/files/icons/129/soft_scraps/256/button_play_01.png';
    imageTracker = 'playImage';
  }
};

var musicTracker = 'noMusic';

audioStatus = function() {
  var music = document.getElementById('natureSounds');
  if (musicTracker == 'noMusic') {
    music.play();
    musicTracker = 'playMusic';
  } else {
    music.pause();
    musicTracker = 'noMusic';
  }
};
3个回答
8

这里是触发下一首歌曲的技巧：

music.addEventListener('ended',function(){
      //play next song
    });

如何在同一音频标签上播放另一首歌曲：
 music.pause();
 music.src = "new url";
 music.load();
 music.play();

现在这里有一个很酷的HTML5播放列表示例，您可以一次加载每首歌曲，以防止某些客户端（移动设备）在消耗流量时感到不满意，在下一个示例中，所有音频都同时加载，以实现顺畅的过渡。 加载歌曲:
//playing flag 
var musicTracker = 'noMusic';
//playlist audios
var audios = [];
 $(".song").each(function(){
        var load = new  Audio($(this).attr("url"));
    load.load();
    load.addEventListener('ended',function(){
       forward();
    });
    audios.push(load);
 });
//active track
var activeTrack = 0;

使用一点jquery来突出显示正在播放的歌曲，是的，我很懒：

var showPlaying = function()
{
    var src = audios[activeTrack].src;
   $(".song").removeClass("playing");
   $("div[url='" + src + "']").addClass("playing");
};

这里是演示代码

注意：如果声音无法播放，请手动检查音频链接是否可访问。

我希望它是在 JavaScript 而不是 jQuery 中。 - Gamer Vang
6

[这里提供一种非传统方法。] 我的播放列表包含四首歌曲，它们分别命名为0.mp3、1.mp3、2.mp3和3.mp3。

<html>  
<head><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script></head>
<body>       
<audio id="player" autoplay controls><source src="0.mp3" type="audio/mp3"></audio>
</body>
<script>
    var x = 0;
    var music = document.getElementById("player");
    $("#player").bind("ended", function(){
    x=x+1;
    music.src = x%4 + ".mp3";
    music.load();
    music.play();       
    });
    </script>
</html>

播放列表会无限循环播放。
1

原生Javascript变体：

  const audioArray = document.getElementsByClassName('songs'); //Get a list of all songs
  let i = 0; //Initiate current Index

  const player = document.getElementById('player'); //get the player
  player.src = audioArray[i].getAttribute('data-url'); //set first Song to play
  player.addEventListener('ended',function(){ //when a song finished playing
    i++; //increase index
    if (i < audioArray.length) { //If current index is smaller than count of songs
      player.src = audioArray[i].getAttribute('data-url'); //set next song
      return; // stop further processing of this function for now
    }
    // current index is greater than count of songs
    i = 0; // therefore we reset the current index to the first available song
    player.src = audioArray[i].getAttribute('data-url'); // and set it to be played
  });

在这个例子中，您不设置音频播放器源标签的初始src，而是有一个类为“song”的项目列表，其中包含data-url属性，该属性包含曲目的URL /路径。
我添加了注释以了解此代码执行的内容和原因。当然，它可以更好，但这只是一个快速的代码示例;)
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接