Menu
I need some help making a very simple Jquery playlist using audio html tag. So far I got his:
<audio id="myAudio" preload="auto">
Your user agent does not support the HTML5 Audio element.
</audio>
and the jquery part:
<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 those 2 mp3's play one after another? Thanks for the help.
474
There was no element to use the animate to so I made a div#bg and wrapped it around the audio element. Remember, if you want to make an element fade in with opacity, make sure the element starts off with opacity:0
The expression should be: $('div#bg').animate({opacity: 1}, 1000);
I took a look at your question... it doesn't have that animate() anymore?
The playlist is in an array.
The function player() is called upon document ready (So you don't need autoplay that mobile devices ignore anyways)
The player will play each audio clip in succession and upon completing the playlist it starts over again (loop only works on one file, not on a playlist. So you'd never progress to the next file if 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>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
