https://www.df.cl/noticias/js-local/custom-av-1789418973-av-.js

1const audio = document.getElementById("audio");
2const playBtn = document.getElementById("play-btn");
3const progress = document.getElementById("progress");
4const time = document.getElementById("time");
5
6// función central
7function updateProgressBar(percent = 0) {
8    const thumbWidth = 12;
9    const trackWidth = progress.offsetWidth;
10
11    const progressPx = (percent / 100) * trackWidth;
12    const correctedPx = progressPx - (thumbWidth / 2);
13    const correctedPercent = (correctedPx / trackWidth) * 100;
14
15    progress.style.backgroundImage = `
16        linear-gradient(to right, 
17            #f6761e ${correctedPercent}%, 
18            #cfcece ${correctedPercent}%)
19    `;
20    progress.style.backgroundSize = "100% 2px";
21    progress.style.backgroundPosition = "center";
22    progress.style.backgroundRepeat = "no-repeat";
23}
24
25function safeInit() {
26    if (progress.offsetWidth === 0) {
27        requestAnimationFrame(safeInit);
28        return;
29    }
30    updateProgressBar(0);
31}
32
33safeInit();
34
35// INIT 2: cuando el audio está listo
36audio.addEventListener("loadedmetadata", () => {
37    updateProgressBar(0);
38});
39
40// INIT 3 (extra robusto en mobile)
41audio.addEventListener("loadeddata", () => {
42    updateProgressBar(0);
43});
44
45// Play / Pause
46playBtn.addEventListener("click", () => {
47    if (audio.paused) {
48        audio.play();
49        playBtn.innerHTML = `
50        <svg viewBox="0 0 24 24" width="16" height="16" fill="white">
51            <rect x="6" y="4" width="4" height="16"></rect>
52            <rect x="14" y="4" width="4" height="16"></rect>
53        </svg>
54        `;
55    } else {
56        audio.pause();
57        playBtn.innerHTML = `
58        <svg viewBox="0 0 24 24" width="16" height="16" fill="white">
59            <polygon points="5,3 19,12 5,21"></polygon>
60        </svg>
61        `;
62    }
63});
64
65// Actualizar barra + tiempo
66audio.addEventListener("timeupdate", () => {
67    const percent = (audio.currentTime / audio.duration) * 100 || 0;
68    progress.value = percent;
69
70    updateProgressBar(percent);
71
72    const minutes = Math.floor(audio.currentTime / 60);
73    const seconds = Math.floor(audio.currentTime % 60)
74        .toString()
75        .padStart(2, "0");
76
77    time.textContent = `${minutes}:${seconds}`;
78});
79
80// Control manual del progreso
81progress.addEventListener("input", () => {
82    const newTime = (progress.value / 100) * audio.duration;
83    audio.currentTime = newTime;
84
85    updateProgressBar(progress.value);
86});