Show HN: iPod.js – An online iPod that connects to Spotify and Apple Music | Hacker News Reader

Show HN: iPod.js – An online iPod that connects to Spotify and Apple Music

tannerv.com

866 pointstonyhawkins157 comments

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?

The square iPod Shuffle with the clip on the back was great for running! Still had a wire, but no need for pockets.

https://en.wikipedia.org/wiki/IPod_Shuffle#/media/File:Apple...

I think I've got one somewhere. Weirdest thing about it was the cable, it used a USB 2 (4 pins) to TRRS cable for syncing with the computer.

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.

Depends on the phone, high-end phones (iPhone obviously, but also Samsung S XYZ, et al.) have quite good "vibration" these days, since it is produced by more sophisticated mechanism [1] than just rotating motor.

[1] https://www.ifixit.com/News/16768/apple-taptic-engine-haptic...

No vibration feedback on Android, something like navigator.vibrate(...) can be used for that [1]

[1] https://developer.mozilla.org/en-US/docs/Web/API/Navigator/v... or https://googlechrome.github.io/samples/vibration/

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

+1 Would be super cool if this integrated with the Battery Status API for even more realism!

Looks like the spec is getting updated with more modern security and privacy practices.

https://www.w3.org/TR/battery-status/

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

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

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.

"just" haha

That "just" is doing a looot of work.

Not really. It's just atan2, modulo, and subtraction.

I was going to respond saying "at least it's less work than mimicking modern Apple momentum scrolling..." but in fact I'd argue that's simpler than one might expect as well! https://medium.com/homullus/recreating-native-ios-scroll-and...

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.

FYI this exists ;)

https://developer.mozilla.org/en-US/docs/Web/API/Navigator/v...

Hm, no support on iOS sadly.

Ironic

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.

Like this? If you’re willing to DIY, it’s possible

https://youtu.be/ZxdhG1OhVng

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

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.

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.

I would like to complain about the game of Brick that refuses to award me a victory despite clearing away all the bricks.

Can I get my money back please?

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.

It also doesn't properly reset if you leave and come back. It seems to set the reset flag, then once the ball goes in, then it resets.

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.

Anyone know why the Spotify Web Playback SDK isn't supported on mobile?

The docs [1] say "It’s the same technology we use to power our Web Player experience", which seems to work fine on my mobile browsers. However, mobile browsers are explicitly listed as unsupported.

The docs also clarify it's powered by Encrypted Media Extensions, which is supported natively back to iOS11 and Chrome 42 [2]. There's also an actively maintained polyfill [3].

[1]: https://developer.spotify.com/documentation/web-playback-sdk...

[2]: https://caniuse.com/eme

[3]: https://github.com/google/eme-encryption-scheme-polyfill

whoa this is awesome! thanks for making the source available too :) https://github.com/tvillarete/ipod-classic-js

Maybe a bit of a dumb question, but how can one be sure that this doesn't steal my credentials when logging in with spotify? It's open source, so I guess someone would probably have figured it out if it did by now, but is there a way to be sure or is it even possible?

how can you be sure that any web site asking for google authentication doesn't "steal" your goolge data?

The reason is because of a protocol called Oath2.

Nice, thanks! I have heared of OAuth2 before, but didn't know what it was for... Now I know:)

Not a dumb question, very much appreciate you keeping an eye out for your password security. It uses an OAuth flow so you're actually entering your credentials on accounts.spotify.com (Spotify-owned) and then Spotify gives this developer a token (rather than a username+password) to access your data (usually a very limited subset of data outlined on the login page).

any idea why it uses ngrok when I go to the sign in flow? Chrome is saying the connection is insecure.

he's probably just using ngrok as a server and the SSL cert on that ngrok process probs isn't verified by a CA. just a guess tho

Oh I see, makes sense! Thanks for the answer - very much appreciated!

Every time I pressed a button my brain was expecting to hear and feel a click

Have you tried clicking on it?

There is no click or vibration on Android.

I forgot how intuitive that wheel really felt.

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.

The iPod reflection on a white page brought me back to Apple's late 2000s marketing pages before they became so interactive.

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!

There's an app for Android, as well.

How long till apple pulls this down with trademark claim? Should be roughly instant.

Which is dumb. All this made me do is think about getting an old iPod again. Seems like a missed opportunity on Apple's part tbh, especially now that people are getting tired of being 'online' all the time.

On the internet, you're nobody. On your iPod, you're everything.

That's what I miss.

Love it. Clean and simple as the original. It takes me back to when I had mine!

It's funny how often I was tapping the rows expecting the UI to drill through a table or play content, only to realize that I was supposed to use the click wheel to navigate.

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!

A lot of people here are nostalgic about iPods but I'm nostalgic for that era when most people ripped CDs, and shared files with their friends, and it's all offline. I remember as a kid recording the radio onto cassettes so I could listen again later. Now it's all encrypted, DRM'd, and ephemeral.

With music downloads peaking in 2012, I'm still clinging to audio files myself and will still buy albums on Bandcamp.

Surprised 14 hours later Apple hasn't issued a take down notice. I remember Apple forbid anyone, including an App that copy the iPod interface.

Unfortunately it just signs me in Spotify but does not import anything. Can't play anything either. Keeps asking me to sign in.

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.

Awesome idea, and even more awesome execution!

This is great work! Thanks for putting the source on GitHub too!! This brings back so many memories of a simpler time.

I was just thinking about how much I missed this thing earlier. Beautiful design and interaction.

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

Really amazing! Great work, indeed pretty close to the original feeling :-)

Others would know more, but surely this is poking the Apple legal department bear? I once tried to have a company print a single ping-pong paddle with the name iPaddle and they refused.

Curious if Apple would even allow this as an app on their store?

This is just awesome and the experience from my Phone felt like I went back in time. Any possibilities of releasing as an Android App, I would actually pay for it

Oh, wow! This brings back a wave of nostalgia. This is great! If only you could get some haptic feedback happening, it would be the icing on the cake.

Weird question, but is it safe to sign into my Apple account via some random novelty app like this? What's the worst a bad actor could do?

It uses an OAuth flow so you're actually entering your credentials on https://authorize.music.apple.com/ which gives this developer a token to access your data (usually a limited subset of your data. I know on the Spotify OAuth screen it tells you exactly what data, not sure about Apple Music)

So if your token gets hijacked then the bad actor would probably be able to view your playlists and listen to your music.

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

Awesome tool dude. Brings back a lot of old memories

I never had one. Was clicking on the >>| and thinking it was bugged because it won't navigate between the items on menu...

This is definitely a good project.. I was pleasantly surprised to see - github link as navigation item.

Settings -> About -> Github Repo

This is awesome. It's heinous how confusing and buggy the stock interfaces are. Instantly added to my home screen.

Does it not make the ticky clicking sound?

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 would love to see this incorporate a force touch api so I can push the buttons!

I'd love this as a phone app.

Does not respond on android .. google chrome . Any solutions ?

Weird, works for me on android, both Chrome and Firefox

Does not respond on android .. google chrome. Any solutions ?

Great execution! The click wheel feels really good on iOS.

This is so pretty. I love it! Thanks for making it!

Wow. This is amazing. Well done

Can I install Rockbox on it?

anybody notice ngrok when singing in? wonder what that’s about…

Super cool

lol soooo cool. takes me back

this is absolutely amazing.

Still a better interface than youtube music, the app for which still doesn't have a horizontal screen axis mode six months after google music shut down. the web interface can't disable videos and play music only, while the app can.

I don't understand google's approach to youtube music. Maybe they secretly want it to fail.

Whilst it looks nice, is no one else concerned with passing details to some unknown site? It doesn't seem to have any direct way to make contact nor is there a privacy policy (nor is there anything obviously relevant in the GitHub repo for the code either)

https://wikipedia.org/wiki/OAuth

The site uses both Spotify and Apple Music’s standard oauth flows. You aren’t providing your credentials to the site directly and the site requests access to a very limited set of your data. So, no people shouldn’t be concerned.

They would get your email according to the Spotify sign in. I didn't mean to imply people would be giving their credentials (hence why I said details but I get why you misunderstood)

Mexican teenagers from 2008 with jailbroken PSPs would be proud.

Reply on news.ycombinator.com