MP3

Prepárense chicuelos que este es uno de los código más largos que tengo, pero la verdad lo que tienen que cambiar no es mucho que digamos y tratare de explicar para que sirve cada cosito, ¡OJO! solo tienen que cambiar lo que esta en negritas y les recomiendo pegarlo en notas primero para que no sea tan complicado, si no les funciona métanlo al chatgpt, que ni yo lo entiendo Hago lo mejor que puedo.

CÓDIGO

<link href="https://fonts.googleapis.com/css2?family=Slackey&display=swap" rel="stylesheet" />

<div class="ipod-widget">
  <div class="ipod">
    <div class="screen">
      <img id="cover" src="" alt="cover" />
      <p id="track-title">Cargando...</p>
      
      <div class="progress-container" id="progress-container">
        <div class="progress-bar" id="progress-bar"></div>
      </div>
      <div class="time-display">
        <span id="current-time">0:00</span> / <span id="duration-time">0:00</span>
      </div>
    </div>

    <div class="controls-wheel">
      <button id="play" class="ipod-btn btn-play-pause state-paused" title="Play/Pause">
        <span class="play-icon"></span>
      </button>
      <button id="prev" class="ipod-btn btn-prev" title="Anterior">
        <span class="icon-prev"></span>
      </button>
      <button id="next" class="ipod-btn btn-next" title="Siguiente">
        <span class="icon-next"></span>
      </button>
    </div>

    <div class="youtube-hidden-container">
      <div id="player"></div>
    </div>
  </div>
</div>

<style>
.ipod-widget {
  all: initial;
  display: block;
  font-family: FUENTE_BASE_AQUÍ, sans-serif;
}

.ipod-widget .ipod {
  width: 200px;
  background: #000000;
  border-radius: 8px;
  padding: 8px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.2), inset -3px -3px 7px **#000000**, inset 3px 3px 7px **#000000**;
  text-align: center;
  margin: 20px auto;
  border: 1px solid #000000;
  position: relative;
  overflow: hidden;
}

.ipod-widget .youtube-hidden-container {
  width: 2px;
  height: 2px;
  position: absolute;
  bottom: 0;
  left: 0;
  opacity: 0.01;
  overflow: hidden;
}

.ipod-widget .screen {
  background: #000000;
  border-radius: 6px;
  padding: 15px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  box-shadow: inset 0 4px 10px rgba(0,0,0,0.5);
}

.ipod-widget .screen img {
  width: 100px;
  height: 100px;
  object-fit: cover;
  border-radius: 6px;
  border: 2px solid #2a5d85;
}

.ipod-widget .screen p {
  font-family: 'Slackey', cursive;
  font-size: 13px;
  color: #152026; 
  margin: 5px 0 0 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
}

.ipod-widget .time-display {
  font-size: 10px;
  color: #22435c;
  font-family: *FUENTE_TIEMPO_AQUÍ*;
  font-weight: bold;
}

.ipod-widget .progress-container {
  width: 100%;
  background: #2a5d85;
  height: 6px;
  border-radius: 3px;
  cursor: pointer;
  margin-top: 5px;
  position: relative;
}

.ipod-widget .progress-bar {
  background: #00ffcc;
  height: 100%;
  width: 0%;
  border-radius: 3px;
}

.ipod-widget .controls-wheel {
  position: relative;
  width: 140px;
  height: 140px;
  background: #ffffff;
  border-radius: 50%;
  margin: 20px auto 5px auto;
  border: 1px solid #dcdcdc;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1), inset 0 2px 5px rgba(0,0,0,0.05);
}

.ipod-widget .ipod-btn {
  position: absolute;
  border: none;
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.1s;
}

.ipod-widget .ipod-btn:active {
  transform: scale(0.85);
}

.ipod-widget .btn-play-pause {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #f0f0f0;
  width: 45px;
  height: 45px;
  border-radius: 50%;
  box-shadow: 0 2px 5px rgba(0,0,0,0.15);
  z-index: 2;
}
.ipod-widget .btn-play-pause:active {
  transform: translate(-50%, -50%) scale(0.9);
}

.ipod-widget .play-icon {
  display: block;
  transition: all 0.1s ease;
}

.ipod-widget .state-paused .play-icon {
  width: 0;
  height: 0;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-left: 14px solid #555;
  margin-left: 4px;
}

.ipod-widget .state-playing .play-icon {
  width: 12px;
  height: 14px;
  border-left: 4px solid #555;
  border-right: 4px solid #555;
  box-sizing: border-box;
}

.ipod-widget .btn-prev {
  top: 50%;
  left: 15px;
  transform: translateY(-50%);
}
.ipod-widget .btn-prev:active {
  transform: translateY(-50%) scale(0.85);
}
.ipod-widget .icon-prev {
  display: block;
  width: 0;
  height: 0;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-right: 10px solid #555;
  position: relative;
}
.ipod-widget .icon-prev::before {
  content: '';
  position: absolute;
  top: -6px;
  left: 10px;
  width: 0;
  height: 0;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-right: 10px solid #555;
}

.ipod-widget .btn-next {
  top: 50%;
  right: 15px;
  transform: translateY(-50%);
}
.ipod-widget .btn-next:active {
  transform: translateY(-50%) scale(0.85);
}
.ipod-widget .icon-next {
  display: block;
  width: 0;
  height: 0;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 10px solid #555;
  position: relative;
}
.ipod-widget .icon-next::after {
  content: '';
  position: absolute;
  top: -6px;
  right: 10px;
  width: 0;
  height: 0;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 10px solid #555;
}
</style>

<script>
let player;
let current = 0;
let progressInterval;
let apiReady = false;

const playlist = [
  {
    title: "TITULO - NOMBRE DEL ARTISTA 1",
    id: "ID DE YOUTUBE 1",
    cover: "URL DE LA IMAGEN DE PORTADA 1"
  },
  {
    title: "TITULO - NOMBRE DEL ARTISTA 2",
    id: "ID DE YOUTUBE 2",
    cover: "URL DE LA IMAGEN DE PORTADA 2"
  },
  {
    title: "TITULO - NOMBRE DEL ARTISTA 3",
    id: "ID DE YOUTUBE 3",
    cover: "URL DE LA IMAGEN DE PORTADA 3"
  },
  {
    title: "TITULO - NOMBRE DEL ARTISTA 4",
    id: "ID DE YOUTUBE 4",
    cover: "URL DE LA IMAGEN DE PORTADA 3"
  },
  {
    title: "TITULO - NOMBRE DEL ARTISTA 5",
    id: "ID DE YOUTUBE 5",
    cover: "URL DE LA IMAGEN DE PORTADA 5"
  }
];

var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

function onYouTubeIframeAPIReady() {
  player = new YT.Player("player", {
    height: "2",
    width: "2",
    videoId: playlist[current].id,
    playerVars: {
      autoplay: 0,
      controls: 0,
      disablekb: 1,
      fs: 0,
      rel: 0,
      modestbranding: 1,
      playlist: playlist[current].id
    },
    events: {
      'onStateChange': onPlayerStateChange,
      'onReady': onPlayerReady
    }
  });
}

function onPlayerReady() {
  apiReady = true;
  updateUI();
}

function updateUI() {
  document.getElementById("track-title").textContent = playlist[current].title;
  document.getElementById("cover").src = playlist[current].cover;
}

function onPlayerStateChange(event) {
  const btnPlay = document.getElementById("play");
  
  if (event.data === YT.PlayerState.PLAYING) {
    btnPlay.classList.remove("state-paused");
    btnPlay.classList.add("state-playing");
    startProgressTimer();
  } else {
    btnPlay.classList.remove("state-playing");
    btnPlay.classList.add("state-paused");
    clearInterval(progressInterval);
  }

  if (event.data === YT.PlayerState.ENDED) {
    nextTrack();
  }
}

document.getElementById("play").onclick = () => {
  if (!apiReady || !player) return;
  
  const state = player.getPlayerState();
  if (state !== YT.PlayerState.PLAYING) {
    player.playVideo();
  } else {
    player.pauseVideo();
  }
};

fn = function nextTrack() {
  if (!player || !apiReady) return;
  current = (current + 1) % playlist.length;
  player.loadVideoById(playlist[current].id);
  updateUI();
}
document.getElementById("next").onclick = fn;

document.getElementById("prev").onclick = () => {
  if (!player || !apiReady) return;
  current = (current - 1 + playlist.length) % playlist.length;
  player.loadVideoById(playlist[current].id);
  updateUI();
};

function startProgressTimer() {
  clearInterval(progressInterval);
  progressInterval = setInterval(() => {
    if (player && player.getCurrentTime) {
      const currentTime = player.getCurrentTime();
      const duration = player.getDuration();
      
      if (duration > 0) {
        const percentage = (currentTime / duration) * 100;
        document.getElementById("progress-bar").style.width = percentage + "%";
        document.getElementById("current-time").textContent = formatTime(currentTime);
        document.getElementById("duration-time").textContent = formatTime(duration);
      }
    }
  }, 500);
}

function formatTime(time) {
  const mins = Math.floor(time / 60);
  const secs = Math.floor(time % 60);
  return mins + ":" + (secs < 10 ? "0" : "") + secs;
}

document.getElementById("progress-container").onclick = function(e) {
  if (player && player.getDuration && apiReady) {
    const rect = this.getBoundingClientRect();
    const clickX = e.clientX - rect.left;
    const width = rect.width;
    const duration = player.getDuration();
    
    if (duration > 0) {
      const newTime = (clickX / width) * duration;
      player.seekTo(newTime, true);
    }
  }
};

window.onload = function() {
  if(apiReady) updateUI();
};
</script>
      



Como ven es un código muy largo y espero que me entiendan bien,, así que voy a explicar todo por orden, aunque igual sale la explicación al ladito de cada uno por si les sirve más, obvio igual si se les hace más fácil pasarlo por chatgpt se los recomiendo pq ni yo entendía esta wea (se merece la groseria por complicada).
Primero que todo, no me saquen ningún espacio ni ninguna comilla pq si no nos vamos al carajiño y con eso dijo empezamos.
Yapis chicuelos vamo a empezar, el primer coso que les sale para cambiar es el de "FUENTE_BASE_AQUÍ..." qué como dice es la letra base por si se te olvida poner tu fuente en otra sección del mp3 esta es la que se pondra, después de este viene la mayor parte de los colores de este gadgt, si les ayuda en color-calculator pueden ir viendo lo de los colores.
El primer cambio de color  #000000 que este es el color exterior de mp3, luego de este vienen las sombras de los laditos  inset -3px -3px 7px #000000 y inset 3px 3px 7px #000000 la idea es que sea un color más oscuro y más claro que el primero,  el siguiente es 1px solid #000000 que es un bordecito que rodea por fuera el mp3 que define su silueta.
Ahora yéndonos a la parte interior esta #000000 que es el el cuadradito interior del mp3, como el fondo de pantalla, luego viene font-family: 'Slackey', cursive, que en la parte de Slackey deben poner el tipo de letra exclusivo para el titulo de canción, después viene FUENTE_TIEMPO_AQUÍ que es para los números del tiempo la canción, yo recomiendo monospace para que se vea "natural" el cambio de números
Ahora viene otra parte complicada que es lo de las canciones, en esta ocasión puse 5 canciones, pero si quieren más pueden copiar el script de aquí abajo .
{
  title: "TU TITULO - NOMBRE DEL AUTOR 1",
  id: "ID_DE_YOUTUBE_1", 
  cover: "URL_DE_LA_IMAGEN_DE_PORTADA_1"
}

En la parte de title, dentro de las comillas va el nombre de la canción y el artista. Luego viene el id, que es el código de letras y números que aparece en el enlace de YouTube después de v= y antes de cualquier símbolo de &.

Por ejemplo, si la dirección es watch?v=gjWk-MY3pc4&list, tu ID secreto para las comillas seria gjWk-MY3pc4.

En cover, igual dentro de las comillas va la dirección de la imagen, que debería ser la portada de la canción que quieren poner.
Y eso sería todo, se que se ve muy complicado, pero cuando le agarras la onda no los es tanto .