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

JavaScript Object-Oriented JavaScript (2015) Constructor Functions and Prototypes Making the UI Work

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

Brandon Chong
Brandon Chong
4,238 Points

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

5 Answers

Greg Kaleka
Greg Kaleka
39,021 Points

Hi 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:

song.js
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
playlist.js
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
daviem
21,118 Points

Thanks for sharing your code and link Greg, nice job - this should have way more up votes!

Miguel Fernando
Miguel Fernando
12,850 Points

Appreciate you posting your extension. Thanks!

Jess Hines
Jess Hines
5,411 Points

He mentioned it right up front that "this won't actually play any music."

Jason Anders
MOD
Jason Anders
Treehouse Moderator 145,860 Points

This 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
Greg Kaleka
39,021 Points

Hey 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
Kathy Ho
16,221 Points

Don'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
Greg Kaleka
39,021 Points

Hey 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

Yes. Mp3. Why make a playlist if you can't play anything?

Greg Kaleka
Greg Kaleka
39,021 Points

Hey 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