Mail.ruПочтаМой МирОдноклассникиВКонтактеИгрыЗнакомстваНовостиКалендарьОблакоЗаметкиВсе проекты

Помогите с написанием проигрователя треков похожего на Яндекс Музыку.

KIF CORP Профи (767), на голосовании 1 год назад
Задача написать JS с управлением. При нажатии на <div id="track"></div> - это белая штука см. рис. нужно запускать/останавливать трек + выводить если трек играет на картинке || . Также после запуска нужно выводить управление к треку снизу в <div id="pult"></div> снизу. Остальное по размерам указано на рисунке.Кто знает хотя бы напишите JS к кнопкам. Заранее спасибо!
Шаблон кнопок и пульта:

 






Название трека


Исполнитель


00:00











Голосование за лучший ответ
Михаил Просветленный (30520) 1 год назад
 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();
});
Надеюсь, это вам поможет.
Похожие вопросы