Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Richard Nash
24,862 PointsHow do I create a music playing web site/app? (a la Spotify, rdio, etc...)
I want to create a web app/site that plays music. To be specific, I want it to work like most music player web sites/apps do. It needs the following features:
It has a persistent music player control section, which is sometimes called a transport (which contains the play, pause, back, forward buttons, as well as a track title, timeline, volume control, playlist button, etc...)
It has a grid of album covers that when clicked will make the persistent music player play the most recently clicked song.
If I navigate to somewhere else in the app the music will keep playing and the persistent music player will remain, well, persistent.
I can design the layout using HTML and CSS but my javascript knowledge is lacking, although I have taken most of the javascript courses on treehouse.
My understanding is that I will need an audio file that is connected to a play button on the song artwork, and when that button is pressed the javascript will tell the persistent music player to play that song, and if another songs play button is clicked then the persistent music player will be told to play the newly liked song and stop playing the old song. I just do not know how to set this up in javascript.
So, are there any resources on the internet or treehouse that can help me with this? When I search for this kind of thing I seem to end up with a bunch of tutorials from 2009 regarding creating a music player, but not anything modern in regards to creating a full site/app with this sort of functionality.
I found this thing:
...which is a start, but my limited javascript knowledge makes it hard to follow what's going on. I'm also starting to learn about the Web Audio API, which may answer all of my questions, but I don't know yet...
Any help in this matter will be very appreciated :-)
Thank you very much!!!
1 Answer
Andrew Kiernan
26,892 PointsHey Richard:
I know that there is a video on youtube where Erik Bryn prototypes an Rdio Ember App. Might be worth a watch, although it moves pretty fast so I'm not sure how much you can glean from it (I know I didn't get too much).
Rdio also has an API that you could look at, which allows you to stream music from Rdio to your app. There may be similar APIs from Spotify/Pandora/etc. but I seem to have Rdio on my mind right now.
I would start by picking a JS framework and study up on it. Then start with a focus on just building it out piece by piece. Start with one page (maybe the player at full screen) and build that up. Then build up the grid/gallery of albums, then you can link them together. Build out the next piece, etc.
Good luck, it is quite the undertaking but sounds like a fun project!
-Andrew