Skip to content

Instantly share code, notes, and snippets.

@stacietaylorcima

stacietaylorcima/player-js-analysis.md

Forked from R-V-S/player-js-analysis.md
Created October 13, 2017 01:09
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save stacietaylorcima/455f6f1a249fdc4530735c7c45c2abd1 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save stacietaylorcima/455f6f1a249fdc4530735c7c45c2abd1 to your computer and use it in GitHub Desktop.
Download ZIP
player.js analysis
Raw
player-js-analysis.md
  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. 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.
@stacietaylorcima
Copy link
Author

stacietaylorcima commented Oct 13, 2017 •
edited
Loading

Analysis of player.js

Player class

This file declares a class, Player, instantiates it, and assigns it to a global player variable.

The Player class contains six methods:
- constructor()
- getDuration()
- getTime()
- playPause()
- skipTo()
- setVolume()

constructor() Method

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.

getDuration() Method

Based solely on the name of this method and the property referenced, I presume it allows the player to display the length of the song.

The getDuration() method accesses the object soundObject and returns the value of the property getDuration.

getTime() Method

Based solely on the name of this method and the property referenced, I presume it allows the player to display the place in the length of the song that it is at in its duration.

The getTime() method accesses the object soundObject and returns the value of the property getTime.

playPause() Method

Based solely on the name of this method, I presume (at a high-level) it allows the player to start and stop the playing of songs.

The playPause() method accepts one argument, song. It sets it to this.currentlyPlaying by default. Then executes the following code:

  • If this.currentlyPlaying is different from song, execute the following code:

    • Stops the soundObject even if nothing is playing.
    • 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".
    • The soundObject instantiates a new buzz.sound object using the soundFileUrl property of this.currentlyPlaying.

  • If the playState is 'paused' or 'stopped'

    • setVolume
    • Begin playing
    • Set the playState to 'playing'`
    • Removes the "paused" classes from the element property of this.currentlyPlaying and adds the "playing" class.

  • If the playState is anything else besides the aforementioned "paused" or "stopped", execute the following code:

    • pause the 'soundObject'
    • Set playState to 'paused'
    • Remove 'playing' class and add 'paused' class

skipTo() Method

Based solely on the name of this method, I presume it allows the user to select any point in the song to start playing from.

The skipTo() method takes an argument percent and executes the following code:

  • If the playState is not "playing"` return that and execute the following code:
    • Set the setTime to the percent argument that was passed through and something with getDuration. I don't fully understand what that does yet.

setVolume() Method

Based solely on the name of this method and the property referenced, I presume it allows the player to display the current volume level and the user to select a new volume level.

The setVolume() method takes one argument percent and sets the volume
- GET the value of the volume
- In the soundObject object, SET the value of the property setVolume to the percent argument that was passed through

player Variable

The player variable instantiates a new Player something. I don't fully understand what that does yet.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment