Come creare una semplice playlist HTML usando Jquery

Ho bisogno di aiuto per creare una playlist Jquery molto semplice usando il tag html audio. Finora ho ottenuto il suo:Come creare una semplice playlist HTML usando Jquery

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

e la parte 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>

Come posso fare giocare quei 2 di mp3 uno dopo l'altro? Grazie per l'aiuto.

fonte

2016-02-18 user1286956

Non c'era alcun elemento di utilizzare il animate per quindi ho creato un div#bg e l'ho avvolto attorno all'elemento audio. Ricordate, se si vuole fare un elemento dissolvenza con l'opacità, assicurarsi che l'elemento inizia con opacity:0
L'espressione dovrebbe essere: $('div#bg').animate({opacity: 1}, 1000);
ho preso uno sguardo alla vostra domanda ... doesn hai più quel animate()?
La playlist è in un array.
La funzione player() è chiamato document ready (Quindi non c'è bisogno autoplay che i dispositivi mobili ignorano comunque)
il giocatore giocherà ogni clip audio in successione e dopo aver completato la playlist Si parte da capo (loop funziona solo su un file, non su una playlist. Così non avresti mai procede al file successivo, se loop=true)

frammento

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>

fonte

2016-02-18 10:47:47 zer00ne

L'animazione era per un altro componente, non per il lettore. L'ho rimosso quando ho visto che l'ho aggiunto per errore. – user1286956

Beh, in realtà aggiunge un bel tocco IMO. – zer00ne

Il tuo codice funziona in modo superbo. Grazie mille! Questo è il risultato finale: http://www.tzr.ro – user1286956

Un modo sarebbe utilizzare audio API per associare un evento onended a bgAudio e cambiare la sorgente lì.

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/

NOTA: Questo non è testato, solo per dare un'idea degli eventi

fonte

2016-02-18 10:32:58 OllieH

ho fatto di migliorare la risposta un po ', in modo che il brano iniziale avrà inizio casuale e solo essere seguita in ordine cronologico dal resto.

<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>

Stavo pensando di fare tutti i brani ripetono in modo casuale, ma credo che avrei bisogno di fare una serie di numeri per contare giù o qualcosa del genere. Ancora. è solo opzionale!

fonte

2016-02-18 13:54:55 user1286956

Come creare una semplice playlist HTML usando Jquery

risposta

Problemi correlati