Hey folks! I've been working on this playlist site where I post 7 new songs each week for my friends (or anyone else) to explore. It started as a simple design experiment, then turned into a coding test, and then with some JS help from a buddy, it became a real thing!
It was designed and optimized for desktop viewing, so tech nerds like me can check it out while working. There are definitely some responsive issues (don't even dare viewing it in mobile landscape mode) and autoplay is blocked on mobile devices so you'll have to press play each time. But other than that, would love any and all feedback!
I've been meaning to do the same thing! I dig when people share small things like this. Another project that started in a similar way is Noon Pacific. Nice selections too.
When clicking on a date range it stops the current song and does nothing else. Maybe change that behaviour to select the first song in that week? Deep-linking to specific weeks would be handy too. Lastly, volume control would be neat as even with my Mac on only 1 volume bar, it's still a bit loud.
I love the Noon Pacific site! Definitely more complex than mine, but would love to evolve it into something similar.
Thanks for the valuable feedback...I had forgotten that the date was even clickable, so I'll definitely do something with that. And good to know about the .volume..Shouldn't be too hard to add in (famous last words, I know). Cheers!
I had a similar side project in mind, but.. you won me by a touch! :P
Don't tell anyone... but I like more your selection, than the most recent NoonPacific playlists.
Btw I think that transitions of the songs descriptions can soften.
Thanks Hanu, glad you like the songs! Do you think the items are shifting too much on hover?
I coded this example, and I feel that here the transitions are more fluid!
Looking good :) I had a quick look into the code, please consider blocking direct access to your /data directory as you are openly exposing copyrighted music there.
Ah, yes need to do that. Thanks for the reminder!
Dig your selection this week. Got a way to subscribe to your playlists?
Glad you like it! That's a fantastic idea...I'll look into adding that.
but until then, I plan on updating every Wednesday morning :)
This is awesome, Erik! Great selection of songs as well. I'll definitely be checking back in every Wednesday. You should start an email list that goes out every Wednesday morning announcing the new playlist, just in case people forget to check back. I'd sign up for that!
Thanks Adam! Someone else also suggested adding a subscription service, so I'll definitely be looking into that! Glad you enjoyed the tunes!
Where are the songs coming from? Soundcloud, spotify, mp3?
currently from mp3
I like it. A Lot. Well done =)
This is beautiful, great work! Love that rubik typeface.
Thanks Darren. I almost didn't find rubik because it's buried pretty deep in Google Fonts. I was surprised because it seems pretty fun to me.
Hmm, nice looking site, but there is no way this is legal, right?
This is a really neat idea, I'd love to know if it is. If it isn't , is there a way to make something like this using spotify/soundcloud?
I haven't figured out a way to stream directly from those services yet, and I'm not sure it's possible at all. I would love to make this as legit as possible if it continues, that's for sure.
This is really great, Love the style of it, very modern. works well! great coding and design work!
Thanks so much!
Great music! thank you for that. The site looks ok too but when I view it on my mac book pro I'm having trouble seeing the playback controls unless I make it full screen.
Thanks Martin. I am aware that when the browser window is too small, the layout starts to break down...I will continue to optimize the responsiveness.
Looking nice! Maybe would look better with a transition animation when changing the song
Thanks! And I definitely agree. I tried fading one into the other, but it wasn't quite working as expected because of how I was loading them (I think). Will look into other options
The layout of this is top notch, and I'm really impressed how it scales down for different browser sizes. My only criticism is the blurred image in the background is restricting animation performance in other areas. When I turned off the blur in the inspector everything ran a lot more smoothly. Is there another way to achieve this blur?
Hi David, thanks so much. I'm curious what other animations you noticed performance issues on. What browser are you using?
The animating hover states I should've said, on the icons and playlist items.
I'm using Chrome 48.
Love it. Great concept.
This is awesome man, congrats!
I've been thinking of doing something like this too. I don't want my music preferences to be buried in some music service's DB.
What is your workflow for adding songs to your lists? Do you have to dig up the album artwork from somewhere, and are the links to Spotify / itunes are entered manually?
I manage all the songs manually right now. So yeah, I grab the artwork from the web and go through Spotify/AppleMusic to copy the artist links
FINALLY! I was looking all over for this. I should have know that DN has all the answers!
BOOKMARKING THIS FOR SURE!