player.js

/**
 *  	js module:
 *  		player.js
 *
 * 		desc:
 *  		Persistent audio player using soundmanager2.
 */

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

define(

	// what does this module rely on?
	[
		"jquery",
		"app/debug",
		"soundmanager"

	],

	// let's pass in aliases for the dependencies
	function(
		$,
		Debug,
		SM
	){
		// define any private variables
		var _name = 'Player',
			debug = Debug.log,
			tracks = [],
			sm_initilaized = false,
			consumer_key = '1228398e369fe2fe50fd14f8c81f89d7',
			url,
			track
		;

		/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

		function init() {

			if ( sm_initilaized === false ) {
				_initilaize_sm();
			}

			debug( _name + ': initialized' );

			_listen_for_click();

		}

		/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

		function _listen_for_click() {

			/**
			 * Inline / Nav Player Button Clicks
			 */

			$('.player .play').on('click', function () {
				var $player = $(this).closest(".player");

				// Play selected track
				_play_selected_track($player);
			});

			$('.player .pause').on('click', function () {

				// Pause currently playing tracks
				_pause_tracks(function () {});
			});

			$(".player .scrubber").draggable({
				axis: "x",
				containment: "parent",

				drag: function () {
					var $player = $(this).closest(".player");

					_find_mouse_cursor($player);

				},

				start: function () {
					_pause_tracks(function () {
					});
				},

				stop: function () {
					var $player = $(this).closest(".player");

					_find_mouse_cursor($player, function (position) {
						track.setPosition(position); // Set position of selected track
						_play_selected_track($player);
					});
				}
			});

			/**
			 * Nav Bar Button Clicks
			 */

			$('.nav_player_button .play').on('click', function () {
				var $button = $(".nav_player_button");

				$button.find(".play").addClass("hide"); // Hide Play button
				$button.find(".pause").removeClass("hide"); // Show Pause button
			});

			$('.nav_player_button .pause').on('click', function () {
				var $button = $(".nav_player_button");

				$button.find(".pause").addClass("hide"); // Hide Pause button
				$button.find(".play").removeClass("hide"); // Show Play button
			});
		}

		/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

		function _initilaize_sm() {

			SM.setup({
				url: '/swf/',
				flashVersion: 9,
				debugMode: true
			});

			sm_initilaized = true;
			debug("SM: initialized");
		}

		/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

		function _play_selected_track($player) {

			var $soundcloud = $player.data('soundcloud'),
				$button = $(".episode .player[data-soundcloud='" + $soundcloud + "'] .button"),
				$nav_button = $(".nav_player").find(".button")
			;

			// Pause currently paying tracks
			_pause_tracks(function () {
				$button.children('.pause').removeClass('hide'); // Show Pause button
				$button.children('.play').addClass('hide'); // Hide Play button

				$nav_button.children('.pause').removeClass('hide'); // Show Pause button
				$nav_button.children('.play').addClass('hide'); // Hide Play button

				// Create track in SoundManager2
				_create_sound($soundcloud, $player);
			});
		}

		/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

		function _create_sound($soundcloud, $player) {
			url = $soundcloud;

			// Check if the returned URL has a secret_token
			// If so, add ?, else add &
			if ( url.indexOf("secret_token") == -1 ) {
				url = url + '?';
			} else {
				url = url + "&";
			}

			// Add on the consumer_key
			url = url + 'consumer_key=' + consumer_key;

			// Use SoundManager to load track
			track = SM.createSound({
				id: 'track_' + $soundcloud,
				url: url,

				onload: function  () {
					tracks.push($soundcloud);
				},

				onfinish: function  () {
					_set_position(this.position, $player);
					$player.children(".button").children(".pause").addClass('hide'); // Hide Pause button
					$player.children(".button").children(".play").removeClass('hide'); // Show Play button
					this.destruct();
				},

				whileplaying: function () {
					_set_position(this.position, $player);
				}
			});

			if ( $player.parent().hasClass("episode") ) {
				_set_nav_player($player);
			}

			track.play();
		}

		/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

		function _pause_tracks(callback) {

			// Pause all tracks
			$(tracks).each(function (index, value) {

				// Pause current track in loop
				SM.pause( "track_" + value );
			});

			$(".pause").addClass('hide'); // Hide all Pause buttons
			$(".play").removeClass('hide'); // Show all Play buttons

			callback();
		}

		/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

		function _set_position(position, $player) {
			var $nav_player = $(".nav_player .now_playing .player"),
				$inline_player = $(".episode .player[data-soundcloud='" + $player.data("soundcloud") + "']"),
				length = $player.data("length"),
				width = (position / length) * 100,
				duration = (position) / 1000,

				hours = 0,
				minutes = Math.floor(duration / 60),
				seconds = Math.floor(duration % 60)
			;

			if ( minutes > 59 ) {
				hours = Math.floor(minutes / 60);
				minutes = minutes % 60;
			}

			if ( hours < 10 ) {
				hours = "0" + hours.toString();
			}

			if ( minutes < 10 ) {
				minutes = "0" + minutes.toString();
			}

			if ( seconds < 10 ) {
				seconds = "0" + seconds.toString();
			}

			$inline_player.find(".progress").css("width", width + "%");
			$inline_player.find(".scrubber").css("left", width + "%");
			$nav_player.find(".scrubber").css("left", width + "%");

			if ( hours === "00" ) {
				$inline_player.find(".current_time").text(minutes + ":" + seconds);
				$nav_player.find(".current_time").text(minutes + ":" + seconds);
			} else {
				$inline_player.find(".current_time").text(hours + ":" + minutes + ":" + seconds);
				$nav_player.find(".current_time").text(hours + ":" + minutes + ":" + seconds);
			}
		}

		/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

		function _find_mouse_cursor( $player , callback ) {

			var mouse_pos = event.pageX,
				wave_pos = $player.find(".wave").offset().left,

				scrub_pos = mouse_pos - wave_pos,
				wave_width = $player.find(".wave").width(),
				percent = scrub_pos / wave_width,

				length = $player.data("length")
			;

			if ( percent >= 1 ) {
				percent = 1;
			} else if ( percent <= 0 ) {
				percent = 0;
			}

			var position = percent * length;

			_set_position(position, $player); // Set Visualizer position

			if (callback) {
				callback(position);
			}
		}

		/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

		function _set_nav_player( $player )  {
			var $nav_player = $(".nav_player"),
				$sub_player = $nav_player.find(".player"),

				coverart = $player.data("artwork"),
				length = $player.data("length"),
				soundcloud = $player.data("soundcloud"),

				meta = $player.parent().find(".source").text(),
				title = $player.parent().find(".title-with-spans").clone(),
				title_color = title.find(".title-num").css('color')
			;

			if ( title.find(".title-main").text().length > 16) {
				var title_main = title.find(".title-main");
				title_main.text(title_main.text().substr(0, 16).concat("..."));
			}

			coverart = coverart.replace("large", "t200x200");

			$nav_player.find(".cover_art").css("background", "url(" + coverart + ")");
			$sub_player.attr("data-artwork", coverart).attr("data-length", length).attr("data-soundcloud", soundcloud);
			$nav_player.find(".now_playing .meta").empty().text(meta);
			$nav_player.find(".now_playing .meta").css('color', title_color);
			$nav_player.find(".now_playing .title").empty().append(title);
			$nav_player.find(".now_playing .title .title-num").css('color', title_color);
		}

		/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

		// return any public methods
		return {
			init : init
		};
	}
);