var tracks = [...];
var currentTrack = 0;
var audio = new Audio();
var playing = false;
function updatePlayer() {
var trackimg = document.getElementById("trackimg");
var trackName = document.getElementById("trackName");
var author = document.getElementById("author");
var time = document.getElementById("time");
var proTime = document.getElementById("proTime");
var playpauseimg = document.getElementById("playpauseimg");
var playpause = document.getElementById("playpause");
audio.src = tracks[currentTrack].url;
trackimg.src = tracks[currentTrack].img;
trackName.textContent = tracks[currentTrack].name;
author.textContent = tracks[currentTrack].author;
time.textContent = "00:00";
proTime.textContent = "00:00 / " + formatTime(audio.duration);
if (playing) {
playpauseimg.innerHTML = '';
playpause.innerHTML = '';
} else {
playpauseimg.innerHTML = '';
playpause.innerHTML = '';
}
}
function formatTime(seconds) {
var minutes = Math.floor(seconds / 60);
var seconds = Math.floor(seconds % 60);
if (minutes < 10) minutes = "0" + minutes;
if (seconds < 10) seconds = "0" + seconds;
return minutes + ":" + seconds;
}
function togglePlay() {
if (playing) {
audio.pause();
playing = false;
updatePlayer();
} else {
audio.play();
playing = true;
updatePlayer();
}
}
function nextTrack() {
if (currentTrack < tracks.length - 1) {
currentTrack++;
updatePlayer();
if (playing) audio.play();
}
}
function prevTrack() {
if (currentTrack > 0) {
currentTrack--;
updatePlayer();
if (playing) audio.play();
}
}
document.getElementById("track").addEventListener("click", togglePlay);
document.getElementById("playpause").addEventListener("click", togglePlay);
document.getElementById("nextTrack").addEventListener("click", nextTrack);
document.getElementById("prevTrack").addEventListener("click", prevTrack);
audio.addEventListener("timeupdate", function() {
var time = document.getElementById("time");
var proTime = document.getElementById("proTime");
time.textContent = formatTime(audio.currentTime);
proTime.textContent = formatTime(audio.currentTime) + " / " + formatTime(audio.duration);
});
audio.addEventListener("ended", function() {
nextTrack();
});
Надеюсь, это вам поможет.
Шаблон кнопок и пульта: