Как сделать простой плейлист HTML с помощью JQuery

Мне нужна помощь в создании очень простого плейлиста JQuery, использующего аудиотег html. До сих пор я получил его:Как сделать простой плейлист HTML с помощью JQuery

<audio id="myAudio" preload="auto"> 
    Your user agent does not support the HTML5 Audio element. 
</audio>

и JQuery часть:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> 
<script> 

$(document).ready(function() { 
    bgAudio = document.getElementById("myAudio"); 
    bgAudio.volume = 0.3; 

    bgAudio.controls = true; 
    bgAudio.loop = true; 
    bgAudio.autoplay = true; 

    bgAudio.src = "bg1.mp3"; 
    bgAudio.src = "bg2.mp3"; 
    bgAudio.play(); 

}); 
</script>

Как я могу играть эти 2 mp3, один за другим? Спасибо за помощь.

источник

2016-02-18 user1286956

Там не было ни одного элемента использовать animate для поэтому я сделал div#bg и обернул его вокруг аудиоэлемента. Помните, что если вы хотите, чтобы элемент исчезать с непрозрачностью, убедитесь, что элемент начинается с opacity:0
Выражение должно быть: $('div#bg').animate({opacity: 1}, 1000);
Я посмотрел на свой вопрос ... это Безразлично У меня есть animate()?
Плейлист находится в массиве.
Функция player() призывается document ready (Так что вам не нужно autoplay, что мобильные устройства игнорировать в любом случае)
Игрок будет играть каждый звуковой клип в последовательности и после завершения воспроизведения начинается сначала (loop работает только на одном файле, а не в списке воспроизведения. Таким образом, вы никогда не переходить к следующему файлу, если loop=true)

Snippet

MNG- https://vocaroo.com/media_command.php?media=s0Ai9tr7779v&command=download_mp3 
 
Righteous- https://vocaroo.com/media_command.php?media=s1dKHkbev0dJ&command=download_mp3

<!doctype html> 
 
<html> 
 

 
<head> 
 
    <meta charset="utf-8"> 
 
    <title>35478017</title> 
 
</head> 
 

 
<body> 
 
    <div id='bg' style="opacity:0"> 
 
    <audio id="xAudio" preload="auto"></audio> 
 
    </div> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> 
 
    <script> 
 
    
 
    // This is a simple array of strings 
 
    var playlist = [ 
 
     "https://vocaroo.com/media_command.php?media=s1H9fX5GI9Fa&command=download_mp3", 
 
     "https://vocaroo.com/media_command.php?media=s0Ai9tr7779v&command=download_mp3", 
 
     "https://vocaroo.com/media_command.php?media=s1dKHkbev0dJ&command=download_mp3" 
 
    ]; 
 
    
 
    // Remember that element must start out at opacity:0 
 
    // The duration should be only a number outside of the curly brackets 
 
    $('div#bg').animate({ 
 
     opacity: 1 
 
    }, 1000); 
 

 

 
    $(document).ready(function() { 
 
     var xA = document.getElementById("xAudio"); 
 
     xA.volume = 0.3; 
 
     xA.controls = true; 
 

 

 
     function player(x) { 
 
     var i = 0; 
 
     xA.src = playlist[x]; // x is the index number of the playlist array 
 
     xA.load();   // use the load method when changing src 
 
     xA.play(); 
 
     xA.onended = function() { // Once the initial file is played it plays the rest of the files 
 
      /* This would be better as a 'for' loop */ 
 
      i++;     
 
      if (i > 2) {   //   ... Repeat 
 
      i = 0;    //  ^
 
      }      //  ^
 
      xA.src = playlist[i]; // Rinse,^
 
      xA.load();    // Lather,^
 
      xA.play();    // and.....^ 
 
     } 
 
     } 
 
     player(0); // Call the player() function at 0 index of playlist array 
 
    }); 
 
    </script> 
 
</body> 
 

 
</html>

источник

2016-02-18 10:47:47 zer00ne

Анимация была для другого компонента, а не для игрока. Я удалил его, когда увидел, что я добавил его по ошибке. – user1286956

Ну, на самом деле это добавляет приятный сенсорный IMO. – zer00ne

Ваш код работает превосходным человеком. Благодаря тонну! Это окончательный результат: http://www.tzr.ro – user1286956

Один из способов - использовать audio API, чтобы связать событие onended с номером bgAudio и переключить источник.

JS:

$(document).ready(function() { 

    var bgAudio = document.getElementById("myAudio"); 
    var src1 = "bg1.mp3"; 
    var src2 = "bg2.mp3"; 

    bgAudio.volume = 0.3; 

    bgAudio.controls = true; 
    bgAudio.loop = false; 
    bgAudio.autoplay = true; 
    bgAudio.src = src1; 

    bgAudio.onended = function(){ 
    bgAudio.stop(); 
    bgAudio.src = src2; 
    bgAudio.play(); 
    } 

    bgAudio.play(); 

});

Fiddle: https://jsfiddle.net/wpwddq30/

ПРИМЕЧАНИЕ: Это не тестировался, просто чтобы дать представление о событиях

источник

2016-02-18 10:32:58 OllieH

Я сделал улучшить то ответ немного, так что начальная песня начнет случайно и просто следовать в хронологическом порядке по остальным.

<script> 

    var playlist = [ 
     "music/bg1.mp3", 
     "music/bg2.mp3", 
     "music/bg3.mp3", 
     "music/bg4.mp3" 
    ]; 

    var n = playlist.length-1; 
    var r = 1 + Math.floor(Math.random() * n); 

    $(document).ready(function() { 
     var xA = document.getElementById("myAudio"); 
     xA.volume = 0.3; 
     xA.controls = true; 

     function player(x) { 
      var i = 0; 

      xA.src = playlist[r]; 
      xA.load(); 
      xA.play(); 
      xA.onended = function() { 
       i++; 
       if (i > n) { 
        i = 0; 
       } 

       xA.src = playlist[i]; 
       xA.load(); 
       xA.play(); 
      } 
     } 
     player(0); 
    }); 
    </script>

Я думал сделать все песни повторить в случайном порядке, как, но я считаю, что я должен был бы сделать массив чисел, чтобы сосчитать их вниз или что-то. Все еще. это просто необязательно!

источник

2016-02-18 13:54:55 user1286956

Как сделать простой плейлист HTML с помощью JQuery

ответ

Смежные вопросы