
Show HN: Vusic – A Simple Web Player for Apple Music Built with Vue and Vuex - philips4350
https://github.com/falcon78/Vusic
======
tomhallett
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
Thank you for the kind words !

------
AlphaWeaver
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
Thank you! Musish is what actually inspired me to create this project , its
really awesome and i learned a great deal from it.

------
ljm
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
Doesn't it only work in a browser? And so does that count as "native Linux
support"?

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

------
jph
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
Thank you ! I had a lot of fun making it and im glad that you fell that way :)

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

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

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

~~~
philips4350
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

------
Kiro
Looking good. A few questions about the toolchain:

What do you use PostCSS for?

How are the the scss files actually compiled?

~~~
philips4350
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 )

------
agumonkey
What are your favorite vue related readings ?

~~~
philips4350
[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
thank you

------
hereisdx
Beautiful!

~~~
philips4350
Thank you!

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

~~~
dang
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)

