Show HN: React Component for Apple's iPod Simulator

React and HTML component for Apple’s official iPod Simulator.

Add your own musicAdd Music

View GitHubGitHub

Get Started

npm install ipod-simulator

import { IPod } from "ipod-simulator/react"; import { defaultSongs, defaultPlaylists, type Song, type Playlist, } from "ipod-simulator";

const songs: Song[] = [...defaultSongs, { id: "my-song", name: "My song", artistName: "My artist", previewUrl: "/music/my-song.mp3", }];

const playlists: Playlist[] = [...defaultPlaylists, { id: "favorites", name: "Favorites", songIds: ["my-song"], }];

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

Independent project. Not affiliated with or endorsed by Apple.

<ipod-simulator></ipod-simulator>

<script type="module"> import { createIPod, defaultSongs, defaultPlaylists } from "https://cdn.jsdelivr.net/npm/ipod-simulator@latest/dist/index.js"; const element = document.querySelector("ipod-simulator"); const ipod = await createIPod(element, { songs: [...defaultSongs, { id: "my-song", name: "My song", artistName: "My artist", previewUrl: "/music/my-song.mp3", }], playlists: [...defaultPlaylists, { id: "favorites", name: "Favorites", songIds: ["my-song"], }], }); </script>

Independent project. Not affiliated with or endorsed by Apple.