All geek questions in one place

How to make a simple HTML playlist using jQuery

I need help creating a very simple jQuery playlist using the html audio tag. So far, I got it:

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

and part of 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>

How can I make these 2 mp3 games one by one? Thanks for the help.

+5
source share
3 answers

  • There was no element to use animate , so I made a div#bg and wrapped it around an audio element. Remember that if you want the element to disappear with opacity, make sure the element starts with opacity:0

  • The expression should be: $('div#bg').animate({opacity: 1}, 1000);

  • I took a look at your question ... does it no longer have animate() ?

  • The playlist is in the array.

  • The player() function is called document ready (so you don't need autoplay , which mobile devices generally ignore)

  • The player will play each sound clip in a row, and after playback is complete, the list starts again ( loop works with only one file, not with the playlist. Therefore, you never go to the next file if loop=true )

Excerpt

 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>
+1
source

One way is to use the audio API to bind the onended event to bgAudio and switch the source there.

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/

NOTE. This is not verified, just to give an idea of ​​the events.

+1
source

I improved the answer a bit, so the opening song will start randomly and just remain in chronological order for the rest.

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

I thought about all the songs being repeated in random order, but I believe that I will need to make an array of numbers in order to count them or something like that. Still. it's just optional!

0
source

Source: https://habr.com/ru/post/1243305/

More articles:


All Articles