Skip to content

Instantly share code, notes, and snippets.

@DamianRivas
Forked from R-V-S/player-js-analysis.md
Last active December 7, 2017 21:10
Show Gist options
  • Save DamianRivas/18e1933706124b22767e3e15c4703602 to your computer and use it in GitHub Desktop.
Save DamianRivas/18e1933706124b22767e3e15c4703602 to your computer and use it in GitHub Desktop.
player.js analysis
  1. This file declares a class, Player, instantiates it, and assigns it to a global player variable.

  2. The Player class contains four methods:

    • constructor()
    • playPause()
    • skipTo()
    • setVolume()
  3. The constructor() method sets initial values for the currentlyPlaying, playState, volume, and soundObject properties.

    • currentlyPlaying is set to the first item in album.songs.
    • The initial playState is "stopped".
    • The volume is set to the number 80.
    • The soundObject instantiates a new buzz.sound object using the soundFileUrl property of this.currentlyPlaying. The buzz variable doesn't appear to be initialized here, so presumably it's a dependency loaded elsewhere.
  4. The playPause() method accepts one parameter, song. It sets it to this.currentlyPlaying by default.

    1. It checks to see if this.currentlyPlaying is different from song, and if so, it:
      • Stops the soundObject property.
      • Removes the "playing" and "paused" classes from the element property of this.currentlyPlaying.
      • Sets this.currentlyPlaying to the function's parameter, song.
      • Changes the playState property to "stopped".
      • Instantiates a new sound object using this.currentlyPlaying, which was just updated to song.
    2. It checks to see if this.playState is equal to paused or stopped, if so, it starts playing by doing the following:
      • Calls the setVolume method of this.soundObject and passes this.volume as a parameter.
      • Calls the play method of this.soundObject.
      • Sets this.playState to "playing".
      • Removes the class "paused" from this.currentlyPlaying.element and adds the class "playing".
    3. Else it pauses playback by doing the following:
      • Calls the pause method in this.soundObject.
      • Sets this.playState to "paused".
      • Removes the "playing" class from this.currentlyplaying.element and adds the "paused" class.
  5. The skipTo() method accepts one parameter, percent. It skips the song to the percentage value of percent.

    • It checks if this.playState !== "playing" and exits skipTo if true.
    • The setTime method of this.soundObject is called with a parameter: (percent/100) * this.soundObject.getDuration().
  6. The setVolume() method accepts one parameter, percent. It sets the volume of the player to the passed percentage:

    • It sets this.volume to percent.
    • It calls the setVolume method of this.soundObject and passes percent as a parameter.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment