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

Posted by Thomas Bullock
Thomas Bullock
16,339 Points

How to make Tree Tunes music player play/stop audio files (Object orientated javascript)

Hello Peoples

I've been fiddling with the Tree Tunes music player from the OOJ lesson and am having a little trouble getting it to actually function properly with audio files. I've added another argument to the song function containing the link to an mp3. I've tried a few different things in the playlist app - putting the audio file into different variables etc but in short I can start the song playing but pause and next don't work as they should and the player ends up playing another song until several songs are playing all at once!!

I obviously I haven't got this set up right - any ideas on how I should structure this and get the stop / next buttons functioning properly?

https://w.trhou.se/61hemid5ws

1 Answer

Balázs Buri
Balázs Buri
8,799 Points
Balázs Buri
Balázs Buri
8,799 Points

Hi,

I'll try and use part of your code to explain what I think the problem is:

Playlist.prototype.play = function() {
  var currentSong = this.songs[this.nowPlayingIndex];
  var musicStream = new Audio(this.songs[this.nowPlayingIndex].file); //1: new Audio
  currentSong.play();
  musicStream.play();
//  console.log(musicStream);

};

Playlist.prototype.stop = function() {
  var currentSong = this.songs[this.nowPlayingIndex];
  var musicStream = new Audio(this.songs[this.nowPlayingIndex].file); //2: another new Audio
  currentSong.stop();
  musicStream.pause();
//  console.log(musicStream);
};

when you call play you create a new Audio object and start to play it (comment 1). But when you call stop you also create a new Audio which is the same song, but a new instance of it (comment 2). Like another channel on a sound mixer. When you call pause on that nothing happens because that instance of the song isn't playing. However the original instance is not affected so it continues playing. To really stop the song you should refer to the original audio object created on play.

I would create a separate handler for this that you can call from your playlist. Something like this, haven't tested it:

function AudioHandler(){
  this.stream = undefined;
}

AudioHandler.prototype.play = function(file){
  this.stop();
  this.stream = new Audio(file);
  this.stream.play();
}

AudioHandler.prototype.stop = function(){
  if (this.stream){
    this.stream.stop();
  }
}

Hope this helps

Thomas Bullock
Thomas Bullock
16,339 Points

Thanks Balázs for your reply

I can see how I was going wrong with continually creating new Audio instances.

I've tried implementing a separate handler as you say - but am having difficulty getting it working

I can start a song playing but next / stop dont work

How do should I call the AudioHandler??

https://w.trhou.se/osy6ftixhl