5 ms·

Show HN: Vusic – A Simple Web Player for Apple Music Built with Vue and Vuex

102 points by philips4350 7y ago

readarticle 7y ago
A random student’s portfolio piece offering nothing over https://beta.music.apple.com https://beta.music.apple.com beside the use of a specific front end web ecosystem. Latest commit X 8 months ago, 8 months from now.
- tyingq 7y ago
  I don't have Apple music, but the YouTube integration mentioned seems like something Apple wouldn't offer.
- philips4350 7y ago
  Hi thanks for the feedback ! This is a personal project that i made to learn about css (sass) and vue. This is just something i made for fun and is not meant to replace apple's official website in any way. And i also wanted lyrics and youtube video integration, and genius api also has a really cool feature where you can select a part of a lyrics and it gives you really detailed description about that part, so i wanted a player with that feature built in. I dont think apple would implement something like that for legal reasons (?)
- bauerd 7y ago
  A random person's dismissive comment offering nothing besides negativity
- slipheen 7y ago
  Someone created something that they thought was cool, and wanted to share it with their online community. That's awesome, and I'm glad they did! Why give them a hard time for that? Who's life are you improving with that comment?
- munmaek 7y ago
  Shallow and negative dismissal aside, if this project doesn’t randomly get stuck and force a refresh, that would be an improvement over beta.music.apple.com. I regularly click on another song during a playlist only to have it just hang forever.
- ubercow13 7y ago
  Well one thing it offers is that the layout isn't broken, like Apples site's seems to be in my browser. Also in terms of basic functionality, you can search for a song name and click the album title to go to the whole album, which seems to be not possible on Apple's site. So that's something.
- dang 7y ago
  This comment breaks both the HN guidelines and the more specific guidelines for Show HN. Could you please read them and stick to the rules when posting? We're trying not to be the nasty sort of internet place here. https://news.ycombinator.com/newsguidelines.html https://news.ycombinator.com/newsguidelines.html https://news.ycombinator.com/showhn.html https://news.ycombinator.com/showhn.html
jph 7y ago
Thanks for sharing your learning! This shows a good way to learn Vue, Sass, and how to integrate with YouTube and the Genius API for lyrics.
- philips4350 7y ago
  Thank you ! I had a lot of fun making it and im glad that you fell that way :)
Kiro 7y ago
Looking good. A few questions about the toolchain: What do you use PostCSS for? How are the the scss files actually compiled?
- philips4350 7y ago
  Thank you ! The scss files are compiled by webpack to normal css at build time using sass loader, I used vue-cli to automate the webpack configuration https://cli.vuejs.org/ https://cli.vuejs.org/ process Oh and the poss css file is just a leftover config file for a package that i decided not to use ( Ant Design )
tomhallett 7y ago
It’s always nice to see a full application as a reference (vs small snippets in docs/blogs), when you have those questions “I wonder how they solved this?”. Thanks for putting this out there!!
- philips4350 7y ago
  Thank you for the kind words !
thomas536 7y ago
philips4350, can you say roughly how long it took you to build? Thanks!
- philips4350 7y ago
  It took me roughly 3 month to build if you count in the time it took to learn Vue but the project itself was made in about two months
ljm 7y ago
I quite like Apple’s decision to expose a streaming API. I’m still a bit unsure about the terms and monetising any app you write over it, but it looks like a good way to get native Linux support and also add on things like Spotify style discovery. The only thing stopping me switching is Spotify’s ability to show me music I might like. Apple mostly gives you the top hits.
- kingosticks 7y ago
  Doesn't it only work in a browser? And so does that count as "native Linux support"?
  - saagarjha 7y ago
    Maybe you can run it in a web view and put some native chrome over it?
  - ljm 7y ago
    They expose an API, you can write against it in Swift with the right libraries. No reason why you can't write against the same API in Linux using your language of choice. Apple only provides bindings for Swift/JS/Obj-C though, so it'd be a bit of work.
    - kingosticks 7y ago
      Last time I checked (a few months ago) there was no access to the audio outside of the browser i.e. DRM protected. Accessing the rest of the API is presumably simple but not very interesting.
AlphaWeaver 7y ago
Nice work here! Love me some Vue! A friend of mine worked on a similar web player for Apple Music that got a lot of attention, Musish [0]. If I remember right, they were working on it before Apple released their web player. It's totally open source as well, so you might be able to take some inspiration from their work too! [0]: https://github.com/Musish/Musish https://github.com/Musish/Musish
- philips4350 7y ago
  Thank you! Musish is what actually inspired me to create this project , its really awesome and i learned a great deal from it.
hereisdx 7y ago
Beautiful!
- philips4350 7y ago
  Thank you!
agumonkey 7y ago
What are your favorite vue related readings ?
- philips4350 7y ago
  https://madewithvuejs.com/blog/vue-3-roundup https://madewithvuejs.com/blog/vue-3-roundup The articles mentioned here were very interesting, and im actually looking forward to Vue 3
  - agumonkey 7y ago
    thank you
zrules 7y ago
This looks good and functions very nicely. However, the playhead in the progress bar moves in discreet steps. It'd be better if its movement is smoother. the playhead inside https://beta.music.apple.com https://beta.music.apple.com unfortunately behaves the same way.
- philips4350 7y ago
  Now that you point it out it does look kind of weird... Maybe be i should create a new component for the play progress which increments in very tiny scale. Thank you for the feedback!
  - ch_sm 7y ago
    The best way I’ve found is to update the DOM in an requestAnimationFrame loop, polling the Audio Element’s currentTime, since its events don’t fire reliably.
ch_sm 7y ago
Very nice, thanks for sharing! One suggestion: music player applications benefit greatly from virtual scrolling, since lists of songs or albums can potentially be very, very long. Nonetheless, fantastic job!

102 points by philips4350 7y ago

A random student’s portfolio piece offering nothing over https://beta.music.apple.com https://beta.music.apple.com beside the use of a specific front end web ecosystem. Latest commit X 8 months ago, 8 months from now.

tyingq 7y ago
I don't have Apple music, but the YouTube integration mentioned seems like something Apple wouldn't offer.
philips4350 7y ago
Hi thanks for the feedback ! This is a personal project that i made to learn about css (sass) and vue. This is just something i made for fun and is not meant to replace apple's official website in any way. And i also wanted lyrics and youtube video integration, and genius api also has a really cool feature where you can select a part of a lyrics and it gives you really detailed description about that part, so i wanted a player with that feature built in. I dont think apple would implement something like that for legal reasons (?)
bauerd 7y ago
A random person's dismissive comment offering nothing besides negativity
slipheen 7y ago
Someone created something that they thought was cool, and wanted to share it with their online community. That's awesome, and I'm glad they did! Why give them a hard time for that? Who's life are you improving with that comment?
munmaek 7y ago
Shallow and negative dismissal aside, if this project doesn’t randomly get stuck and force a refresh, that would be an improvement over beta.music.apple.com. I regularly click on another song during a playlist only to have it just hang forever.
ubercow13 7y ago
Well one thing it offers is that the layout isn't broken, like Apples site's seems to be in my browser. Also in terms of basic functionality, you can search for a song name and click the album title to go to the whole album, which seems to be not possible on Apple's site. So that's something.
dang 7y ago
This comment breaks both the HN guidelines and the more specific guidelines for Show HN. Could you please read them and stick to the rules when posting? We're trying not to be the nasty sort of internet place here. https://news.ycombinator.com/newsguidelines.html https://news.ycombinator.com/newsguidelines.html https://news.ycombinator.com/showhn.html https://news.ycombinator.com/showhn.html

jph 7y ago

Thanks for sharing your learning! This shows a good way to learn Vue, Sass, and how to integrate with YouTube and the Genius API for lyrics.

philips4350 7y ago
Thank you ! I had a lot of fun making it and im glad that you fell that way :)

Kiro 7y ago

Looking good. A few questions about the toolchain: What do you use PostCSS for? How are the the scss files actually compiled?

philips4350 7y ago
Thank you ! The scss files are compiled by webpack to normal css at build time using sass loader, I used vue-cli to automate the webpack configuration https://cli.vuejs.org/ https://cli.vuejs.org/ process Oh and the poss css file is just a leftover config file for a package that i decided not to use ( Ant Design )

tomhallett 7y ago

It’s always nice to see a full application as a reference (vs small snippets in docs/blogs), when you have those questions “I wonder how they solved this?”. Thanks for putting this out there!!

philips4350 7y ago
Thank you for the kind words !

thomas536 7y ago

philips4350, can you say roughly how long it took you to build? Thanks!

philips4350 7y ago
It took me roughly 3 month to build if you count in the time it took to learn Vue but the project itself was made in about two months

ljm 7y ago

I quite like Apple’s decision to expose a streaming API. I’m still a bit unsure about the terms and monetising any app you write over it, but it looks like a good way to get native Linux support and also add on things like Spotify style discovery. The only thing stopping me switching is Spotify’s ability to show me music I might like. Apple mostly gives you the top hits.

kingosticks 7y ago
Doesn't it only work in a browser? And so does that count as "native Linux support"?
- saagarjha 7y ago
  Maybe you can run it in a web view and put some native chrome over it?
- ljm 7y ago
  They expose an API, you can write against it in Swift with the right libraries. No reason why you can't write against the same API in Linux using your language of choice. Apple only provides bindings for Swift/JS/Obj-C though, so it'd be a bit of work.
  - kingosticks 7y ago
    Last time I checked (a few months ago) there was no access to the audio outside of the browser i.e. DRM protected. Accessing the rest of the API is presumably simple but not very interesting.

AlphaWeaver 7y ago

Nice work here! Love me some Vue! A friend of mine worked on a similar web player for Apple Music that got a lot of attention, Musish [0]. If I remember right, they were working on it before Apple released their web player. It's totally open source as well, so you might be able to take some inspiration from their work too! [0]: https://github.com/Musish/Musish https://github.com/Musish/Musish

philips4350 7y ago
Thank you! Musish is what actually inspired me to create this project , its really awesome and i learned a great deal from it.

hereisdx 7y ago

Beautiful!

philips4350 7y ago
Thank you!

agumonkey 7y ago

What are your favorite vue related readings ?

philips4350 7y ago
https://madewithvuejs.com/blog/vue-3-roundup https://madewithvuejs.com/blog/vue-3-roundup The articles mentioned here were very interesting, and im actually looking forward to Vue 3
- agumonkey 7y ago
  thank you

zrules 7y ago

This looks good and functions very nicely. However, the playhead in the progress bar moves in discreet steps. It'd be better if its movement is smoother. the playhead inside https://beta.music.apple.com https://beta.music.apple.com unfortunately behaves the same way.

philips4350 7y ago
Now that you point it out it does look kind of weird... Maybe be i should create a new component for the play progress which increments in very tiny scale. Thank you for the feedback!
- ch_sm 7y ago
  The best way I’ve found is to update the DOM in an requestAnimationFrame loop, polling the Audio Element’s currentTime, since its events don’t fire reliably.

ch_sm 7y ago

Very nice, thanks for sharing! One suggestion: music player applications benefit greatly from virtual scrolling, since lists of songs or albums can potentially be very, very long. Nonetheless, fantastic job!