159 comments

[ 4.5 ms ] story [ 191 ms ] thread
Every time I pressed a button my brain was expecting to hear and feel a click
Nice touch adding pong (brick).
I'm ready for them to add a level 2 now :P
Even has the same bug where the ball glitches through a few rows!!
This is great work! Thanks for putting the source on GitHub too!! This brings back so many memories of a simpler time.
I don't have Apple Music, but my wife does. If she, hypothetically, logged in on my Android phone, could I use her library?
I don’t see why not. There’s an official web version at music.apple.com. They probably prevent multiple simultaneous streams on the same account at the same time though.
I found out it actually allows me to play on the same account on two separate devices. The official apple music apps reliably stop my attempts to abuse my one person membership. Maybe this means that authorised applications aren't checked as thoroughly for this.
Yeah, they might just be lenient for now with the MusicKit JS API. I know for commercial partners they seem to be pretty strict.
Ssh, Apple engineers are silently reading along!
Awesome idea, and even more awesome execution!
Where’s the back button? - took me half a second to dust off memories. Also it’s uncannily snappy compared to how I remember it!
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.
At the time at least it was wildly more intuitive than other mp3 players. I'm not a huge apple fan, but sometimes they get stuff right.
I think its because you never spent time with one. I always found them incredibly intuitive and easy to use.
That's kinda my point, though. You couldn't just pick up the iPod connected to the speakers at a friends' place and instantly know how to switch songs. While virtually every other mp3 at the time had a d-pad with labeled buttons easily understood.
I really contest this. The UI of the iPods were great. I don't recall anyone having issues, including elderly, etc.
I think OP’s right, everyone “knew” how to operate an iPod through advertisement and probably few had to figure it out on their own. It was simple and consistent enough that they looked intuitive but maybe it wasn’t.
Awesome tool dude. Brings back a lot of old memories
Great execution! The click wheel feels really good on iOS.
If they brought an iPod back with spotify and apple music I would definitely buy it

Anyways great execution and loved how seamless it works really cool project

Now that you mention it, I REALLY want a piece of hardware like this..!
Something like this? https://bemighty.com

It’s not active live streaming, just downloading your playlists.

That's a cool piece of tech. It's unfortunate it doesn't work with mp3s ( from the faq) as well.
Wow, that's insanely awful, at least in my opinion. I loved my iPod shuffle. Pretty much the exact same form factor as this.
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.
Sony sells touchscreen Walkmans these days. AFAIK they're based on Android.
I just looked through but they are really expensive
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.
I would pay for the app just to get the haptic feedback!
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.

Should make one that looks like a Zune!!
ah ya of course you can’t put an ipod on apples app store!

looks like you could maybe use the Vibrate API for some andriod browsers…

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!

Code for this implementation: https://github.com/tvillarete/ipod-classic-js/blob/master/sr...

> Simpler than one might think

> ... 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

> quantize the angle

Round the angle quite severely. E.g. if using 10 degree steps you'd round anything below 5 degrees to 0 degrees, and anything above to 10 degrees. Anything above 15 would get rounded to 20, and so on.

> look at the event stream

Look at the last two directions the above procedure generated.

> and take the sign of the pairwise difference

If the new angle is higher it's a counterclockwise motion. If the new angle is lower it's a clockwise motion. Do some special handling if the angle wraps around from 350 to 0 degrees or vice versa.

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.
Nice work. I kept clicking on the labels and got so upset that it didn't work lol. Those who have the same issue, use the Scroll Wheel!!
Mexican teenagers from 2008 with jailbroken PSPs would be proud.
This is great, good job.

Some bugs I've noticed(Chrome 90 on Android):

* When looking at a list of albums, using the clickwheel to scroll won't actually scroll the list

* With Spotify, only my public playlists are shown

Thanks!

The iPod reflection on a white page brought me back to Apple's late 2000s marketing pages before they became so interactive.
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.

(comment deleted)
Does it not make the ticky clicking sound?
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.
I never thought I'd say this, but I actually agree. I have a Fossil Gen 5 that I use for the exact same purpose, and it works great with Bluetooth headphones.
I don’t like wearing a watch So for me the MP3 player is still great
What benefit do you get from the mp3 player over a phone? Typically the main reason is to avoid bouncing while running but most runners prefer to have a watch for fitness tracking.
Right, wearing an Apple Watch + AirPods is the modern iPod experience to me. I can leave my house without a smartphone and take a stroll or bike ride or skateboard etc with music. The Apple Watch crown provides that tactile feel missing from smartphones. I like how easy it is to turn up the volume by quickly rotating the crown up or down.
Do you have to have the watch with LTE, or does it actually cache music locally?
LTE but you can download music when on Wifi and keep it stored on the watch.
It can cache music locally – it does some guessing as to what you want by default, but you can also sync specific playlists. Current models have 32gB of storage.
you can but the issue is they limit the media storage to 8gb. :eyeroll. I can see why they'd want to leave some to the OS, but it really defeats half the purpose of 32 on a watch as is if limited to 8GB for media.
As far as I know, only apple music saves it locally but spotify and others can stream if you have LTE. I believe this is just a hold up from spotify and the apis are available though.
As of about a month ago, Spotify can download content to watch too.
I have this setup and it’s a great vision. Unfortunately I personally find it needless hamstringed:

1) the Watch works great for every single one of my smartphone needs, but you are required to pair it with an iPhone that has a phone plan…even if you keep the iPhone turned off 95% of the time.

2) the AirPods fall out of my head when I smile. I’ve tried the different sizings. For such an expensive gadget, I expect to be able to make them stay in my head without fear of losing them simply because I’m having a nice time.

3) people sometimes report that they can’t hear me very well through the AirPods even if I’m sitting still in a quiet room with no obstructions. This happens regardless of whether the pods are tethered to the Watch, computer, or iPhone.

#3 it sounds like something is wrong in your device chain. 80%+ of my family and friends use AirPods for personal, workout, and or business purposes and their experience is rather seamless. Reach out to Apple support.
For 2), something I didn’t realize till recently is that you can “twist” them towards your face to tighten the grip. Perhaps try that?
I found cheap yet decent earbuds from Aliexpress and a cheap 3.5mm bluetooth receiver that solves the earbuds falling out of your ears problem. Every time I hear about issues people have with AirPods I'm so glad I went with this solution, and spent a fraction of the money too. If I pop the bluetooth receiver off the 3.5mm jack, I can use it with my (growing) iPod classic collection. The only reason I even use bluetooth at all is because my iPhone demands it.
Can you reccomend decent earbuds from aliexpress? I bought some but they still had a strong chemical smell after I let them offgas for a week.
Anything from KZ. I’m personally using their ZSTs at the moment but the ZSN is probably the go-to
I got the KBEAR Lark Hybrid earbuds. Incredible price to performance ratio. They wrap up around your ears so nothing is getting them off your head except deliberately removing them. The Chinese have massively upped their quality game in recent years, it’s no longer cheap shite that takes a month to arrive.
That's too bad. I love my AirPods so much. I run with them, bike with them, work out with them, and I've never had one fall out (classic, not pro). Obviously one-size-fits-all doesn't always work out though.
I was debating getting a watch. Maybe I'll give this a try.
FWIW, if there’s one thing I love about wearing a non-smart watch is that it keeps me from doing all the other things my phone incites me to do (check messages etc) when all I want to know is the time. A bit like you use your MP3 player to, well, play MP3’s.
Airpods + iPhone/Apple Watch. No wires, nothing to put in your pockets when you're lifting and running. Who loads an MP3 player?
Still use mine on an old one that accept the older iPod interface for music playing. Not all songs go into it though.

For the player I wonder whether I can trust it fir the access to my iphone account. Or Spotify.

Is the click wheel "feel" experience only on iOS? I don't get any haptic feedback on Android
I don't feel the click haptic feedback on iOS with iPhone 12
No, no haptic feedback for me either. It would be interesting to try, but honestly it might make it feel more gimmicky if not done perfectly.
> transported me back

I felt the same way! It was 2003 again. Cool stuff. Thanks to the OP!

Agreed! And given the source code is available maybe someone could hack together a prototype of this Onion classic: https://youtu.be/9BnLbv6QYcA
OMG. Thanks for bringing back that Onion classic. The sentence suggestions are legendary Onion.
"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.
I think in terms of scrolling through the big lists, the wheel was a far superior scrolling device than touch scroll is.
I have to admit, this was first time I've considered trialing Apple Music after being a longtime Spotify customer.

Lack of browser support in a Spotify Web API providing free advertising for Apple Music. The irony!

What's the big deal? Just install our App. It's soooo much better in all the data we can take from you, er provide you.
(comment deleted)
Hmm, it works on firefox desktop on my end. Maybe they just doesn't support safari?
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
I miss how smooth those gradients look
This is so much more pleasant than flat interfaces.
I never owned an ipod so I don't remember the UI at all, but from the now playing screen the only thing that looks like it has a gradient is the top bar[1], all of the menu selection indicators looks solid blue as well. Am I missing something?

[1]https://i.imgur.com/y4s4o24.png

oh wait nah I see it now, the playing bar has a very light one. Looks nice!
I was just thinking about how much I missed this thing earlier. Beautiful design and interaction.
Firefox appears to be blocking Cross Origins Requests so cannot actually successfully sign-in:

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).

I had no issue on macOS 11.4, Firefox 89.0.1 (64-bit arm)
Could be due to Strict privacy settings?
Like the other reply, I had no issue at all using it on Firefox on Windows. Even with a whole host of privacy addons and settings enabled.
That's also the message you get when a content blocker blocks a request. Could be uBlock Origin or tracking protection, probably not CORS.
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.

This is so well done. Such a pleasure to use. Responds just like an iPod Classic did to the point I find myself anticipating the click sound on the wheel.

Amazing work.

I can't believe how there's no buttons on devices anymore. This is a reminder on how much I miss them! I remember when I'd clip a really small iPod to my chest between layers of clothes and just move through songs by pressing it whenever. First and last time I felt cyborg-ish with technology.