This is really cool. It’s amazing how “realistic” the clickwheel feels—it instantly transported me back to actually using an iPod. Also, there’s something poetic about emulating the clickwheel on the interface that replaced it :)
I still have my original iPods. The original and the mini chromatic ones. When I'm on the go and or in a gym and I need to play music, nothing beats a simple mp3 player. Don't want the bulk of the phone. Don't want to have to touch a phone screen and engage with it.
I'd rather just reach into my pocket and press buttons.
I think smartwatches fill that niche now - at least those models with physical buttons. I'm actually impressed by how ergonomic the music listening experience on my Garmin is.
"Sadly, this only works on Chrome Desktop" when clicking the sign in to Spotify on my iPhone. definitely doesn't have that "it just works feel" in that regard. However, driving the click wheel is fun. I did instinctively click on the buttons that would pop up in the menu by clicking them directly the first time rather than spinning the wheel to get to them. Just shows how much more powerful the touch screen is.
Part of what makes it feel so good is that it keeps tracking if your finger goes outside of the actual wheel. This mimics the fact that you could keep your finger in the physical wheel by feeling the edges
How do you even get the _feel_ of the device so right? I'm perplexed, such a great project. I started using it unironically to play music, I'd totally pay for a Mac/iOS app haha.
Simpler than one might think - once you do the math to project each touch/mouse event down to an angle, you just need to quantize the angle to a certain number of discrete options (which you can measure on an actual device), look at the event stream of such angle events pairwise, and take the sign of the pairwise difference as right/left or up/down!
The much harder part when designing the iPods themselves was to build a robust touch sensor given the hardware of the day, and actually come up with pleasing dimensions and quantization parameters as a designer!
iirc there was an iPod-style app on the Apple App Store for a bit around a year ago, but it was shortly after taken down. I don’t know if the developer came out with an official statement, but I imagine Apple had some copyright grievances.
It did have haptic feedback on the wheel which was cool, although I think this web implementation actually does a better job of nailing the motion and feel of the click wheel itself.
Taking nothing away from the maker of this, but cried must also go to Apple for the original UX too and how well designed that is that copying it works so well too.
This is awesome! My only request is to polish it just a bit more when you add it to the home screen. I’d love for this to feel like a native app.
Nominally:
- The default title when adding to the Home Screen is “React App”.
- The icon could be better by choosing something in 1:1 aspect ratio. Maybe just the click wheel?
- When opened from the home screen it correctly loads without displaying the browsers nav bar, but the dimensions are slightly skewed so it doesn’t fill the screen.
Apple still sells the ipod touch for some reason. Its clear that they think that the Apple Watch + Airpods replaces the need for the traditional ipods.
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.
Might be because I never owned one myself, but I've always felt the interface incredibly clunky and the navigation hard to grasp. It's not something intuitive you know how to use just by looking at it.
Also, it always bounces at the same angle regardless of where it bounced on the paddle, which makes it really long and boring. The lack of payoff is even more annoying.
Readit News
I'd rather just reach into my pocket and press buttons.
For the player I wonder whether I can trust it fir the access to my iphone account. Or Spotify.
Looks like the spec is getting updated with more modern security and privacy practices.
https://www.w3.org/TR/battery-status/
Lack of browser support in a Spotify Web API providing free advertising for Apple Music. The irony!
[1] https://developer.mozilla.org/en-US/docs/Web/API/Navigator/v... or https://googlechrome.github.io/samples/vibration/
I felt the same way! It was 2003 again. Cool stuff. Thanks to the OP!
The much harder part when designing the iPods themselves was to build a robust touch sensor given the hardware of the day, and actually come up with pleasing dimensions and quantization parameters as a designer!
Code for this implementation: https://github.com/tvillarete/ipod-classic-js/blob/master/sr...
> ... you just need to quantize the angle ... look at the event stream ... and take the sign of the pairwise difference
This is harder than I thought
It did have haptic feedback on the wheel which was cool, although I think this web implementation actually does a better job of nailing the motion and feel of the click wheel itself.
Nominally:
- The default title when adding to the Home Screen is “React App”.
- The icon could be better by choosing something in 1:1 aspect ratio. Maybe just the click wheel?
- When opened from the home screen it correctly loads without displaying the browsers nav bar, but the dimensions are slightly skewed so it doesn’t fill the screen.
https://developer.mozilla.org/en-US/docs/Web/API/Navigator/v...
Anyways great execution and loved how seamless it works really cool project
It’s not active live streaming, just downloading your playlists.
https://youtu.be/ZxdhG1OhVng
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://apresolve.spotify.com/?type=dealer&type=spclient. (Reason: CORS request did not succeed).
> 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.
Can I get my money back please?