An iPod Classic that connects to Apple Music and Spotify. Built with React & Styled Components

Related tags

apple-music
Overview

ipod_og

by Tanner Villarete | LinkedIn | Website

Before the days of streaming services, we relied on physical devices to store our limited libraries of music. Now with the streaming age, we no longer rely on physical storage and have endless hours of songs at our disposal. This project is an homage to the good 'ol days. A mix of the old and new. Experience the iPod Classic you used to own that now connects to Spotify and Apple Music — the two most popular music streaming platforms in the world.

I built this thing to be very extensible – to the point where it can even run games (like brick!). In the future I might consider adding a few more little apps and easter eggs (theming?).

ipod

Details

Here's a breakdown of the Full Stack:

Frontend:

  • JS: TypeScript, React (Hooks, Context)
  • CSS: Styled Components, Framer Motion (for some of the animations)
  • Textures/Icons: All SVGs created by me in Figma
  • API: Spotify Web Playback SDK / Apple MusicKit JS

Running Locally

NOTE

If you want to develop locally with this project, you'll need to supply an Apple Developer Token using the token query parameter. See https://developer.apple.com/documentation/applemusicapi/getting_keys_and_creating_tokens

In the project directory, you can run:

yarn start

Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.

The page will reload if you make edits.
You will also see any lint errors in the console.

Issues
  • Lockscreen player doesn't display cover art - move to musickit JS V3

    Lockscreen player doesn't display cover art - move to musickit JS V3

    Not sure if you are maintaining this project still but musicKit v3 is now available with a fix for showing the cover art on the lock screen player. https://js-cdn.music.apple.com/musickit/v3/docs/index.html?path=/story/tech-notes-migrating-to-musickit-js-3--page

    enhancement 
    opened by tedhosmann 7
  • Display device battery status in compatible browsers

    Display device battery status in compatible browsers

    • Adds a new useBattery hook which reads device battery information from the Battery Status API where available. While this capability was removed from Firefox several years ago it is still available in Chromium-based browsers.
    • Adds a new battery indicator and SVG which can display different charging states.
    opened by olliepup 6
  • Ideas for improvement

    Ideas for improvement

    Hi there!

    As you can guess from the timing I discovered your project on HN today. I was positively surprised to see that it's not only working well, but that you can actually use it as a real player with external music providers. Congrats and thanks for the work :bow: And an extra thanks to make it opensource :100: !

    Spotify is quite oriented towards individual songs and playlists, so with time I kind of forgot the notions of artists and albums. Using this "old" iPod reminded me about them and now I want to start "adding" artists and albums just for the pleasure to navigate them. Having this simple, easy and efficient interface is refreshing in comparison with Spotify!

    After trying it a bit on my phone (Android) here are a few ideas for improvements:

    Haptic feedback

    The wheel works well. Having a haptic feedback (vibration) would make it even more enjoyable. I don't know what latency can be obtained with the haptic feedback though.

    Centering on screen

    The vertical centering on desktop is correct but on mobile phone the iPod get stuck on top of the screen:

    image

    On big screen like my Note 10 the wheel is quite difficult to reach with the thumb, so having it centered would make it more comfortable to use.

    Appearance when installed as an application

    This is probably a personal preference. I think I would like having it full-screen when installing it as an app from the website. This means without notification bar and home buttons. I think there is a "display": "fullscreen" option that can be put in the manifest.json for that. It helps to feel you have a "real" device and not just an app on the phone (side note that's what I like about my DM42 calculator skin full-screen, it looks like a real calculator).

    A second point would be to set the background to black also when installed as an app. This would look more fancy than white, especially on OLED screens.

    Liked songs

    Right now I have a long list of "Liked songs" on Spotify that is difficult to navigate. As far as I saw these songs are not shown in this player. Maybe it could be possible to have a section "Music » Liked songs" that automatically organize them by artists/albums and can be navigated like the rest? That would be awesome!


    Feel free to do whatever you want with this list and issue, these are just feedback and I'm not expecting you to change/fix things on demand 😄

    enhancement 
    opened by StreakyCobra 5
  • ngrok.io blocked on corporate network

    ngrok.io blocked on corporate network

    Screen Shot 2021-06-23 at 10 39 15 AM

    Awesome project!

    wontfix 
    opened by captbaritone 5
  • [Brick Game] fix bouncing of the ball on the player

    [Brick Game] fix bouncing of the ball on the player

    fix: the ball now bounces off the player at an angle

    • the angle is based on where the player hits the ball
    • the vector velocity is always 1
    • the ball still starts towards bottom right at 45deg

    fix: the ball now inverts x/y direction instead of setting to 1 or -1

    • this is to keep the bouncing anglefix checkCollisionWithBricks logic
    • it used to pass through some bricks instead of changing direction

    fix: missing parenthesis in the Brick's fill color switch statement

    p.s. sorry about all the edits I'm still learning github PRs

    opened by nicosemp 5
  • iOS HomeScreen Bookmark: Support background play

    iOS HomeScreen Bookmark: Support background play

    Opening the app on Chrome or Safari on iPhone, and switching apps continues to play the song in the background, including the locked screen state.

    But once you add it to the Home screen via - Safari > Share icon > Add to Home Screen. The "app" added to the home screen does not play songs in the background, stops immediately when you switch the app or the screen locks.

    opened by cyriac 4
  • U2 iPod

    U2 iPod

    As a user I should be able to change the iPod to the U2 iPod in settings.

    enhancement 
    opened by getaaron 4
  • Spotify: Show popup when non-premium user signs in

    Spotify: Show popup when non-premium user signs in

    Copied from https://news.ycombinator.com/item?id=27606099

    neogodless 5 hours ago [–]

    Firefox on Windows 10 with uBlock Origin (which I disabled on this page) and Multi-Account Containers. I'm not a Spotify paid user, and the error I get is different:
    > Cannot register to Track Playback with non-premium user.
    
    However, the "iPod" just keeps telling the user to sign in. It might be good to have some indicator that you need a paid account to use Spotify on this iPod.
    

    neogodless 4 hours ago [–]

    Do you have a free account? I had to pop open Developer Tools to see that there's an error if you don't have a paid account that prevents the iPod.js from connecting to your account.
    

    Probably should add some warnings if that happens, instead of failing silently.

    bug 
    opened by fireattack 3
  • Add support for haptic feedback

    Add support for haptic feedback

    Adding really basic useHapticFeedback hook, and implementing it in the useScrollHandler as a proof of concept.

    We'll want to think about where the triggers should live. The scroll handler seems like a reasonable place, but there might be a better spot for them.

    opened by JohnDaly 3
  • Better mobile view

    Better mobile view

    I would love to use this app as a daily driver for Spotify on my mobile device. I'm wondering if we're able to make the view take up the entire screenspace on a mobile device and pin the scroll wheel closer to the bottom of the screen.

    enhancement 
    opened by crutchcorn 3
  • Curtailed lists

    Curtailed lists

    My artists’ list stops at the end of the A’s, albums two albums into the C’s and the playlists aren’t all there either. Haven’t seen it mentioned?

    opened by newtestleper 1
  • plz add scroll click song

    plz add scroll click song

    The classic iPod makes a perfect click song when scrolling between choices in the Interface. Could it be possible to add it to the Interface ?

    opened by strayMat 0
  • [New UI]: Implement

    [New UI]: Implement "Songs" view

    Hey! Great work here! I have some comments, I don't know if its something that you're already working on. The first is about the filter, that is only for albums or artist, but not for songs. The second one is about the wheel and the lack of vibration when you're using it. That's all! Great work!

    enhancement 
    opened by juampafrank 2
  • [Scroll Wheel]: Support hybrid touch/click devices

    [Scroll Wheel]: Support hybrid touch/click devices

    The iPod won't react when I try to run it on my Microsoft edge on Windows 10 using my mouse no matter I tried to click on it or click and hold, instead, if I use the touch screen on my laptop to operate, it works fine.

    bug 
    opened by PIndividual 3
  • [New UI]: Display user's liked songs

    [New UI]: Display user's liked songs

    This should be for both Spotify and Apple Music ideally, but we can start with Spotify.

    enhancement 
    opened by tvillarete 0
  • mankybansal/add-back-case-for-ipod

    mankybansal/add-back-case-for-ipod

    • add setting for showing back panel
    • move providers into a component
    • add mobile support for back panel
    • add U2 edition back panel
    • add normal panel with engraving'

    Follow up / Improvements: make the back panel glossy

    Screen Shot 2021-06-25 at 2 51 46 PM screenshot-u2 Screen Shot 2021-06-26 at 1 13 49 AM Screen Shot 2021-06-26 at 1 04 36 AM
    opened by mankybansal 2
  • feat: last updates

    feat: last updates

    null

    opened by RaulGF92 4
  • Spotify & Apple Music: Add pagination to API responses

    Spotify & Apple Music: Add pagination to API responses

    Noticed a bug where whilst using Apple Music it only loads the first set of Albums and Artists, instead of loading the next set / "page" once scrolled to the bottom of the list.

    Perhaps due to Apple's API limits? or a bug?

    bug 
    opened by ronaldlangeveld 3
Owner
Tanner Villarete
Making the 🌎 a more user-friendly place. Frontend Engineer at @convoyinc.
Tanner Villarete
Lito (/laɪto/) Music built with MusicKit JS, Edge WebView2 and React lightweight Apple Music client for Windows,

Lito (/laɪto/) Music built with MusicKit JS, Edge WebView2 and React lightweight Apple Music client for Windows,

Jiahao Lu 33 Sep 23, 2021
SheetAble is an easy-to-use music sheet organizer for all the music enthusiasts out there.

SheetAble is an easy-to-use music sheet organizer for all the music enthusiasts out there. You can upload and organize your sheets for any kind of instrument you use! Create Accounts for your friends or family to invite them to your library to use it as well or potentially upload sheets themselves.

SheetAble 62 Sep 23, 2021
React Native & Expo music player application UI

React Native & Expo music player application UI

JSX Clan 48 Sep 21, 2021
A friendly music sequencer built with web technology

A friendly music sequencer built with web technology

ryohey 222 Sep 22, 2021
Bridge is a web based video conferencing application which bridges the gap between people and connects them online.

Bridge is a web based video conferencing application which bridges the gap between people and connects them online. It is a simple and easy to use application which offers a distraction free interface. The application can be used to create a one on one or a group video call. The video call comes with features like mute audio/video, share screen and in-built chatting.

Sonal Kushwaha 31 Sep 11, 2021
🎥 Remotion is a suite of libraries building a fundament for creating videos programmatically using React.

?? Remotion is a suite of libraries building a fundament for creating videos programmatically using React.

Jonny Burger 8.3k Sep 23, 2021
A collaboration application built with the twilio-video.js SDK and React.js

A collaboration application built with the twilio-video.js SDK and React.js

Twilio 1.5k Sep 22, 2021
A real-time transcription project using React and socketio

A real-time transcription project using React and a socketio python server. The goal of this project is to enable developers to create web demos and speech2text prototypes with just a few lines of code. Examples can be medical dictation apps, a note-taking CRM for entrepreneurs, etc.

Sahar 88 Sep 21, 2021
a collection of simple demos of React.js

This is a collection of simple demos of React.js. These demos are purposely written in a simple and clear style. You will find no difficulty in following them to learn the powerful library.

Ruan YiFeng 15.8k Sep 16, 2021
🍭 Marshmallow React components

?? Marshmallow React components

Marshmallow 13 Sep 16, 2021
Ready-to-deploy webapp for sharing home videos: a React frontend with a Serverless Framework / AWS Lambda backend using FFmpeg to process videos.

Serverless Media Portal ?? What is this? This repo contains the full stack for creating a private, password-protected website for sharing home videos

null 81 Sep 6, 2021
Moon Design System

Moon Design System

Coingaming 64 Sep 22, 2021
A web video player built for the HTML5 world using React library.

video-react Video.React is a web video player built from the ground up for an HTML5 world using React library. Installation Install video-react and pe

null 2.2k Sep 22, 2021
A React-based web video player

A React-based web video player

Zhihu 2.3k Sep 23, 2021
A React component for playing a variety of URLs, including file paths, YouTube, Facebook, Twitch, SoundCloud, Streamable, Vimeo, Wistia and DailyMotion

ReactPlayer A React component for playing a variety of URLs, including file paths, YouTube, Facebook, Twitch, SoundCloud, Streamable, Vimeo, Wistia, M

Pete Cook 5.7k Sep 22, 2021
Pink Planner is a React application for managing events and meetings

"Pink Planner" is a React application for managing events and meetings.

Vanessa Chan 39 Sep 7, 2021
Video calling and chatting app (PWA) built using React.js, Web RTC and Socket.io

This is a video calling application where users can call other user and will also have the capabiltiy to mute their mic and audio. Their is also real time chat functionality. It's also a modern PWA so users can install it on their devices like other native apps.

Mihir Gupta 210 Sep 16, 2021
📻 Create custom web audio players with React

react-soundplayer Create highly-customizable SoundCloud (or any audio) players with React.js. Documentation Install npm install react-soundplayer --sa

KOSMETISM 1.4k Sep 24, 2021
A React Hook for playing sound effects

A React Hook for playing sound effects

Joshua Comeau 1.5k Sep 24, 2021