web-dev-qa-db-ja.com

前の曲が終了すると、オーディオは次の曲を自動再生します

ユーザーが画像をクリックするだけで再生または再生を停止できるオーディオバックグラウンドプレーヤーを作成したいと思います。前の曲が終了すると自動的に次の曲を再生するプレイリストを作成するために、既存のコードを作成または再作成するのに問題があります。 Vanillajsでやりたいです。
これが私がこれまでに持っているものです：
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';
  }
};
javascripthtmlhtml5-audio
11
rockarou

次の曲をトリガーする秘訣は次のとおりです。

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

ここでフィドル

注：サウンドが再生されない場合は、オーディオURLにアクセスできるかどうかを手動で確認してください

5
SilentTremor

[ここではバニラ以外のソリューションです。]私のプレイリストは4つの曲で構成されており、名前は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
Leonard Storcks