У меня есть html код, где есть аудио в js, и мне бы хотелось реализовать случайный следующий трек и что бы 1 и тот же трек для раза подряд не выпадал, а как это сделать я не знаю. Если можете чем-то помочь, я буду благодарен. Вот сам код:
function timeColor() {
var now = new Date();
var hours = now.getHours();
var color = "#f2d44e";
if (hours >= 20 || hours < 7)
color = "#00203f"
return color;
}
// Create a new instance of an audio object and adjust some of its properties
var audio = new Audio();
audio.src = ['audio/Nightcore.mp3', 'audio/longlost.mp3', 'audio/Nightcore.mp3'][Math.random() * 2 | 0];
audio.controls = false;
audio.loop = true;
audio.autoplay = true;
// Establish all variables that your Analyser will use
var canvas, ctx, source, context, analyser, fbc_array, bars, bar_x, bar_width, bar_height;
// Initialize the MP3 player after the page loads all of its HTML into the window
window.addEventListener("load", initMp3Player, false);
function initMp3Player() {
document.getElementById('audio_box').appendChild(audio);
context = new AudioContext(); // AudioContext object instance
analyser = context.createAnalyser(); // AnalyserNode method
canvas = document.getElementById('analyser_render');
ctx = canvas.getContext('2d');
// Re-route audio playback into the processing graph of the AudioContext
source = context.createMediaElementSource(audio);
source.connect(analyser);
analyser.connect(context.destination);
frameLooper();
}
// frameLooper() animates any style of graphics you wish to the audio frequency
// Looping at the default frame rate that the browser provides(approx. 60 FPS)
function frameLooper() {
window.requestAnimationFrame(frameLooper);
fbc_array = new Uint8Array(analyser.frequencyBinCount);
analyser.getByteFrequencyData(fbc_array);
ctx.clearRect(0, 0, canvas.width, canvas.height); // Clear the canvas
ctx.fillStyle = timeColor(); // Color of the bars
bars = 500;
for (var i = 0; i < bars; i++) {
bar_x = i * 3;
bar_width = 2;
bar_height = -(fbc_array[i] / 3);
// fillRect( x, y, width, height ) // Explanation of the parameters below
ctx.fillRect(bar_x, canvas.height, bar_width, bar_height);
}
}
#analyser_render {
height: 30px;
position: fixed;
bottom: 0;
width: 100%;
margin: 0 auto;
}
<div id="mp3_player">
<div id="audio_box"></div>
<canvas id="analyser_render"></canvas>
</div>