ytPod

overview

ytpod recreates the nostalgic experience of using an ipod classic, bringing the iconic click wheel interface to the web. stream any youtube video as audio while navigating through an authentic recreation of apple's legendary music player design.

features

• authentic interface: faithful recreation of the ipod classic design with interactive click wheel
• youtube integration: stream any youtube video as audio
• smart navigation: return to current playback without interruption
• now playing view: album artwork and track information display
• auto-progression: automatically advance to next track when current finishes
• scrolling text: lengthy song titles scroll for full visibility
• responsive design: works on desktop and mobile with touch support

controls

• click wheel navigation: rotate to browse, click to select
• directional controls: menu, play/pause, previous/next track
• menu system: browse your library like the original ipod

technical stack

built with react 18+ and typescript, ytpod integrates youtube's iframe player api to deliver a seamless streaming experience wrapped in nostalgic hardware aesthetics.

usage example

integrate ytpod into your react application:

import IPod from './components/iPod';

const songs = [
  {
    title: "Song Title",
    artist: "Artist Name",
    album: "Album Name",
    image: "https://example.com/cover.jpg",
    youtubeId: "dQw4w9WgXcQ"
  },
  // ... more songs
];

function App() {
  return <IPod songs={songs} />;
}

the ipod component accepts a songs array and handles youtube integration automatically, providing an authentic ipod classic experience with all navigation and playback features built-in.

song object structure

each track requires the following properties: