🪼⋆｡𖦹°🫧⋆.ೃ࿔*:･

 「 ✦ Ipod tutorial!!✦ 」

<link href="https://fonts.googleapis.com/css2?family=Cherry+Cream+Soda&amp;display=swap" rel="stylesheet" />

<div class="ipod-widget">
  <div class="ipod">
    <div class="screen">
      <img id="cover" src="" alt="cover" />
      <p id="track-title">Wait...</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: Unkempt, sans-serif;
}

.ipod-widget .ipod {
  width: 160px;
  background: #YOUR COLOR HERE;
  border-radius: 8px;
  padding: 8px;
  box-shadow: 0 10px 25px rgba(0, 11, 179, 1), inset -3px -3px 7px **#YOUR COLOR HERE**, inset 3px 3px 7px **#YOUR COLOR HERE**;
  text-align: center;
  margin: 20px auto;
  border: 1px solid #YOUR COLOR HERE;
  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: #YOUR COLOR HERE;
  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 #YOUR COLOR HERE;
}

.ipod-widget .screen p {
  font-family: 'Cherry Cream Soda', 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: #000000;
  font-family: *monospace*;
  font-weight: bold;
}

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

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

.ipod-widget .controls-wheel {
  position: relative;
  width: 140px;
  height: 140px;
  background: #3434AA;
  border-radius: 50%;
  margin: 20px auto 5px auto;
  border: 1px solid #000000;
  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: "TITLE - ARTIST",
    id: "YOUR ID HERE",
    cover: "YOUR URL HERE"
  },
  {
    title: "TITLE - ARTIST",
    id: "YOUR ID HERE",
    cover: "YOUR URL HERE"
  },
  {
    title: "TITLE - ARTIST",
    id: "YOUR ID HERE",
    cover: "YOUR URL HERE"
  },
  {
    title: "TITLE - ARTIST",
    id: "YOUR ID HERE",
    cover: "YOUR URL HERE"
  },
  {
    title: "TITLE - ARTIST",
    id: "YOUR ID HERE",
    cover: "YOUR URL HERE"
  }
];

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>

3 comments:

  1. Ann08 August, 2026 05:09

    no cause i love you sm for this

    ReplyDelete
  2. aya dayan17 August, 2026 17:24

    thank you soso much!!

    ReplyDelete
  3. Iriee 🩰23 August, 2026 22:08

    I love ur blog sending love from https://theenchantmentdollhouse.blogspot.com/

    ReplyDelete

⏾⋆.˚Comments

Subscribe to: Posts (Atom)

 ⋆. 𐙚˚࿔ School update!! 𝜗𝜚˚⋆ When I tell you I was stressing for nothing!! School went super well, and I got a nice class too, everyone i...

  • (no title)
     「 ✦ The notebook in my bed ✦ 」 So...you might find this weird but I keep a notebook and a pen in my bed. It's actually really useful wh...
  • (no title)
    「 ✦ Introduction ✦ 」 Hello, hello Valmies! This is my first post and after a long struggle to know what I could talk about first, I decided ...
  • (no title)
     「 ✦ Anxious friends vs dry texter ✦ 」 Have you ever had a very anxious or sensitive friend? I've had a few of them and I love them but ...
  • (no title)
     「 ✦ Thirteen ✦ 」 This is an analysis, so it is likely to contain spoilers. Thirteen was such a beautiful movie. I really wanted to talk abo...
  • (no title)
      「 ✦ A new summer job?! ✦ 」 Hi Valmies, I have some nice news! I woke up this morning to my mom telling me she had good news for me. I was ...
  • (no title)
     「 ✦Being afraid of high school ✦ 」 I think I've seen a lot of middle schoolers afraid of going to high school. Some said it's hard,...
  • (no title)
    「 ✦ More about me.... ✦ 」 I live in France!! I like a bunch of things: writing (I wrote about 4 books already and I'm currently working ...
  • (no title)
     「 ✦ Friendships....✦ 」 Have you ever felt like a third wheel with your friends? Like no matter what you do or say will never make you enoug...
  • (no title)
     ⋆˚࿔ The last week before school 𝜗𝜚˚⋆ The last week before school always feels so disappointing and sad because you know you have to go to...