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![](https://ecs-static.teamtreehouse.com/assets/views/marketing/shared/community-banner-white-47072046c51352fe6a69f5e691ff5700b28bb11d45197d7bdf066d9ea3f72d0c.webp)
![lesak](https://secure.gravatar.com/avatar/39b17bea57e504b883c6fb2568a8d9f4?s=96&d=https%3A%2F%2Fecs-static.teamtreehouse.com%2Fassets%2Fcontent%2Fdefault_avatar-445fbbabfc8dc9188fb5967fe43322ee0c3e0dd1e10f378bf8343784af5a13eb.webp&r=pg)
lesak
6,260 PointsOut of curiosity, what does adding songs to listen to the program involve?
Is that where backend programming /database work comes in?
3 Answers
![Jason Anello](https://secure.gravatar.com/avatar/d1304e75238ff7f216f55adc03e08ea1?s=96&d=https%3A%2F%2Fecs-static.teamtreehouse.com%2Fassets%2Fcontent%2Fdefault_avatar-445fbbabfc8dc9188fb5967fe43322ee0c3e0dd1e10f378bf8343784af5a13eb.webp&r=pg)
Jason Anello
Courses Plus Student 94,610 PointsHi Lesak,
If you kept it simple then you should be able to do it entirely on the front end. If you were going to have a big site with user accounts and users could upload mp3's and create their own playlists, etc.. then you'd have to go backend and databases to store everything.
You would need an audio player to do the actual playing of the music similar to how you need a video player to play a video on your page. To start off with you could use the html5 audio element and rely on the native ui controls that each browser provides.
Treehouse has a course to get you familiar with that: https://teamtreehouse.com/library/html-video-and-audio
The other thing you need is the audio files. Here's a link to caniuse showing support for the various audio formats: http://caniuse.com/#search=audio%20format
It looks to me like mp3 covers everything the other 2 formats cover plus some extra. So with modern browsers you could probably get away with mp3 only. Usually a couple formats are needed for videos in order to have fuller coverage because not all browsers support the same formats.
I haven't implemented this before but I would imagine that you would want to modify your javascript so that when a song changes in the ui you would update the src
attribute for the audio element to the current song.
![lesak](https://secure.gravatar.com/avatar/39b17bea57e504b883c6fb2568a8d9f4?s=96&d=https%3A%2F%2Fecs-static.teamtreehouse.com%2Fassets%2Fcontent%2Fdefault_avatar-445fbbabfc8dc9188fb5967fe43322ee0c3e0dd1e10f378bf8343784af5a13eb.webp&r=pg)
lesak
6,260 PointsThat's really interesting. Thanks for answering my question in such detail. I'll check out the html video and audio course. I must admit I postponed this course in the frontend track because I wanted to go on with learning javascript. I like javascript because I find the language challenging but this course is great. Thanks for your help!
![lesak](https://secure.gravatar.com/avatar/39b17bea57e504b883c6fb2568a8d9f4?s=96&d=https%3A%2F%2Fecs-static.teamtreehouse.com%2Fassets%2Fcontent%2Fdefault_avatar-445fbbabfc8dc9188fb5967fe43322ee0c3e0dd1e10f378bf8343784af5a13eb.webp&r=pg)
lesak
6,260 PointsAnd yes Steven, nice to pick up on that one.
Steven Parker
230,688 PointsSteven Parker
230,688 PointsWhile unrelated to the question, I thought it was funny that one of the "students likely to have the answer you're looking for" shown on this page is "Random Whoisthis" with a lifetime total of 1646 points.![:stuck_out_tongue_winking_eye: :stuck_out_tongue_winking_eye:](https://image-proxy-cdn.teamtreehouse.com/5f2215b87833561b28b25d1e13b8f6d692e0904d/68747470733a2f2f7374617469632e7465616d74726565686f7573652e636f6d2f696d616765732f656d6f6a692f756e69636f64652f31663631632e706e67)