Redzs
2024 nov 25,
const tracks = [
{
title: "Thommasine MM húzók márája",
src: "MP3_URL_1",
cover: "COVER_URL_1"
},
{
title: "Másik epizód",
src: "MP3_URL_2",
cover: "COVER_URL_2"
}
];
const audio = document.getElementById("audio");
const playBtn = document.getElementById("playBtn");
const progress = document.getElementById("progress");
const title = document.getElementById("title");
const cover = document.getElementById("cover");
const playlist = document.getElementById("playlist");
let currentTrack = 0;
function loadTrack(index) {
const track = tracks[index];
audio.src = track.src;
title.innerText = track.title;
cover.src = track.cover;
currentTrack = index;
}
tracks.forEach((track, index) => {
const div = document.createElement("div");
div.classList.add("track");
div.innerText = track.title;
div.onclick = () => {
loadTrack(index);
audio.play();
};
playlist.appendChild(div);
});
playBtn.onclick = () => {
if (audio.paused) {
audio.play();
playBtn.innerText = "⏸";
} else {
audio.pause();
playBtn.innerText = "▶";
}
};
audio.ontimeupdate = () => {
progress.value = (audio.currentTime / audio.duration) * 100;
document.getElementById("current").innerText =
formatTime(audio.currentTime);
document.getElementById("duration").innerText =
formatTime(audio.duration);
};
progress.oninput = () => {
audio.currentTime = (progress.value / 100) * audio.duration;
};
function seek(sec) {
audio.currentTime += sec;
}
document.getElementById("speed").onchange = (e) => {
audio.playbackRate = e.target.value;
};
function formatTime(sec) {
const m = Math.floor(sec / 60);
const s = Math.floor(sec % 60);
return `${m}:${s {
if (window.scrollY > 300) {
document.getElementById("podcast-player").classList.add("sticky");
} else {
document.getElementById("podcast-player").classList.remove("sticky");
}
});