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 trialDrake Shelton
9,138 PointsI just spent over an hour on this and the guy didn't even show us how to actually add the song files!!!!!!!!!!!!!
Why didn't he go over actually adding the song files!!!???????? Was this supposed to be for fun? Did I just waste hours on this course to do javascript for fun without actually being able to use it!!!!!!?????????? Biggest frustration so far. Unbelievable!
5 Answers
Greg Kaleka
39,021 PointsHi Drake!
Here's a working example on my website: http://www.gregkaleka.com/playlist/. Note I added a few extra bits of code to automatically skip to the next song, but that uses some more advanced stuff.
Here's a rundown of the changes I made to make this work:
function Song(title, artist, duration, path) { // added the path parameter
this.title = title;
this.artist = artist;
this.duration = duration;
this.isPlaying = false;
this.mp3 = new Audio(path); // created the mp3 property which is an HTMLAudioElement
}
Song.prototype.play = function() {
this.mp3.play(); // added this to actually play the audio
this.isPlaying = true;
};
Song.prototype.stop = function() {
this.mp3.pause(); // HTMLAudioElement doesn't have a stop() method,
this.mp3.currentTime = 0; // so we pause and reset the time instead.
this.isPlaying = false;
};
// the rest of this file can stay the same
var playlist = new Playlist();
// just adding the path parameter we defined in our object - you'll need to upload the files.
// I put them in an audio folder, but you don't have to. You'd just leave off the audio/ if not.
var hereComesTheSun = new Song("Here Comes the Sun", "The Beatles", "2:54", "audio/hereComesTheSun.mp3");
var walkingOnSunshine = new Song("Walking on Sunshine", "Katrina and the Waves", "3:43", "audio/walkingOnSunshine.mp3");
// the rest of the code in this file can remain unchanged
That's it! Now you have a real actual audio player! This really highlights the advantages of using object oriented programming. All we had to do was make a change to the implementation of the Song object, and then change the way we called it's constructor. Four new lines of code and three edited lines.
Read up on the HTMLAudioElement here.
Happy coding!
-Greg
daviem
21,118 PointsThanks for sharing your code and link Greg, nice job - this should have way more up votes!
Miguel Fernando
12,850 PointsAppreciate you posting your extension. Thanks!
Jess Hines
5,411 PointsHe mentioned it right up front that "this won't actually play any music."
Jason Anders
Treehouse Moderator 145,860 PointsThis is a JavaScript course which cannot add actual MP3 files. That would be done with backend programming and/or databases. So, Andrew, in a JavaScript course, is not going to show you what would actually be much more advanced coding done in either Ruby, or PHP, or Python, and/or MySQL.
This course was designed to show you how to design and code the User Interface for a "playlist" in the Front-end that would later be used and integrated into a Back-end language and/or database.
Greg Kaleka
39,021 PointsHey Jason,
No need to use any back-end programming. The same way you can display images on a website without storing the files in a database, you can play audio files on a website without storing them in a database either. Check out my answer to see how you can implement this purely with HTML and Javascript.
Cheers,
-Greg
Kathy Ho
16,221 PointsDon't think of it as a playlist, think of it as a simple app for plain-text.
This is just an intro course. Uploading/adding mp3 files is way too advanced. We'll need to extract data from the files (title, artist, duration), then use a player to read these files. Perhaps the files are corrupted, the program will need to throw an error. That's too much to learn in one hour! And I JUST understood prototype!
But you know, you can Google that if you're confident to learn it!
Greg Kaleka
39,021 PointsHey Kathy,
You're right - for a scalable app, you'd definitely want to extract the information from the file itself. For a demo, however, you can simply hard-code that info, as I've done in my example. This would be sufficient for, say, putting a few songs on your personal website :).
Cheers,
-Greg
Drake Shelton
9,138 PointsYes. Mp3. Why make a playlist if you can't play anything?
Greg Kaleka
39,021 PointsHey Drake,
I showed how to do this above. However, you should really embrace these kinds of exercises as great learning experiences. No you didn't learn how to make a fully functional playlist app, but you learned a heck of a lot of javascript, which is the point of this course.
Happy coding,
-Greg
Brandon Chong
4,238 PointsBrandon Chong
4,238 PointsAre you talking about actually adding some kind of audio file like mp3 and playing it or something? That sounds a little more intense.
He did show us how to add a song object to the songs.txt file both through the program and manually in the text file.