konsumer/app_assets_index.html

## app_assets_index.html
<!doctype html>
<!--[if lt IE 7]>      <html class="static no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="static no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="static no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="static no-js"> <!--<![endif]-->
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Sound Test</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
  </head>
  <body ng-cloak ng-app="app" ng-controller="MainCtl">

	<div class="jumbotron">
		<div class="container">
			<h1>soundtest</h1>
			<h2>{{info[currrentPlayer].artist}} - {{info[currrentPlayer].title}}</h2>
			<h3>
				<button class="btn btn-success btn-lg" ng-click="playpause()" ng-disabled="fading">
					<span ng-show="playing"><i class="glyphicon glyphicon-pause"></i></span>
					<span ng-show="!playing"><i class="glyphicon glyphicon-play"></i></span>
				</button>
				<button class="btn btn-info btn-lg" ng-click="next()" ng-disabled="fading"><i class="glyphicon glyphicon-forward"></i></button>
			{{current}} / {{total}}</h3>
		</div>
	</div>
    <!-- includes angular & buzz -->
    <script src="/js/vendor.js"></script>

	<script>
		var app = angular.module('app', []);
		app.controller('MainCtl', function($scope, $timeout){
			$scope.currrentPlayer = 0;
			$scope.fading = false;

			var tFade;
			var fadeTime = 2000;
			var oldPlayer = 1;
			var players = [
				new buzz.sound("https://mp3source.s3.amazonaws.com/mp3all/Barbarossa%20-%20The%20Load.mp3", {}),
				new buzz.sound("https://mp3source.s3.amazonaws.com/mp3all/Stevie%20Wonder%20-%20Uptight%20%28Everything%27s%20alright%29.mp3", {})
			];

			players[0].id = 0;
			players[1].id = 1;
			players[0].play();
			$scope.playing = true;

			function onupdate(e){
				if ($scope.currrentPlayer == this.id){
					var current = players[this.id].getTime();
					var total = players[this.id].getDuration();
					$scope.current = buzz.toTimer(current);
					$scope.total = buzz.toTimer(total);
					$scope.$apply();

					// do next when it gets to end
					if (current >= (total - (fadeTime/1000)) && !$scope.fading ){
						$scope.next();
					}
				}
			}

			players[0].bind("timeupdate", onupdate);
			players[1].bind("timeupdate", onupdate);

			$scope.next = function(){
				// disable button while fading
				$scope.fading = true;
				$timeout.cancel(tFade);


				// fade track
				oldPlayer = $scope.currrentPlayer;
				$scope.currrentPlayer = $scope.currrentPlayer ? 0: 1;
				players[oldPlayer].fadeWith( players[$scope.currrentPlayer], fadeTime);

				// re-enable button when fade is finished
				tFade = $timeout(function(){
					$scope.fading = false;
				}, fadeTime);
			}

			$scope.playpause = function(){
				$scope.playing = !$scope.playing;
				if ($scope.playing){
					players[$scope.currrentPlayer].play();
				}else{
					buzz.all().pause();
				}
			}

			//  just for nice display
			$scope.info=[
				{
					artist: 'Barbarossa',
					title: 'The Load'
				},
				{
					artist: 'Stevie Wonder',
					title: "Everything's Alright"
				}
			];
		});
	</script>

</body>
</html>

## bower.json
{
  "name": "testbuzz",
  "version": "0.0.0",
  "authors": [
    "David Konsumer <konsumer@jetboystudio.com>"
  ],
  "license": "MIT",
  "private": true,
  "ignore": [
    "**/.*",
    "node_modules",
    "bower_components",
    "test",
    "tests"
  ],
  "dependencies": {
    "buzz": "konsumer/buzz#~1.1.2",
    "angular": "~1.2.19"
  }
}

## config.js
/**
 * brunch config
 */

exports.config = {
	files: {
		javascripts: {
			defaultExtension: 'js',
			joinTo: {
				'js/vendor.js': /^bower_components[\\/](?!json3|es5-shim)/,
			}
		}
	}
};

## package.json
{
  "name": "testbuzz",
  "version": "0.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "brunch watch --server"
  },
  "author": "",
  "license": "MIT",
  "dependencies": {
    "brunch": "^1.7.14",
    "javascript-brunch": "^1.7.1",
    "ngmin-uglify-js-brunch": "^1.7.13"
  }
}
	<!doctype html>
	<!--[if lt IE 7]> <html class="static no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
	<!--[if IE 7]> <html class="static no-js lt-ie9 lt-ie8"> <![endif]-->
	<!--[if IE 8]> <html class="static no-js lt-ie9"> <![endif]-->
	<!--[if gt IE 8]><!--> <html class="static no-js"> <!--<![endif]-->
	<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>Sound Test</title>
	<meta name="description" content="">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
	<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
	</head>
	<body ng-cloak ng-app="app" ng-controller="MainCtl">

	<div class="jumbotron">
	<div class="container">
	<h1>soundtest</h1>
	<h2>{{info[currrentPlayer].artist}} - {{info[currrentPlayer].title}}</h2>
	<h3>
	<button class="btn btn-success btn-lg" ng-click="playpause()" ng-disabled="fading">
	<span ng-show="playing"><i class="glyphicon glyphicon-pause"></i></span>
	<span ng-show="!playing"><i class="glyphicon glyphicon-play"></i></span>
	</button>
	<button class="btn btn-info btn-lg" ng-click="next()" ng-disabled="fading"><i class="glyphicon glyphicon-forward"></i></button>
	{{current}} / {{total}}</h3>
	</div>
	</div>
	<!-- includes angular & buzz -->
	<script src="/js/vendor.js"></script>

	<script>
	var app = angular.module('app', []);
	app.controller('MainCtl', function($scope, $timeout){
	$scope.currrentPlayer = 0;
	$scope.fading = false;

	var tFade;
	var fadeTime = 2000;
	var oldPlayer = 1;
	var players = [
	new buzz.sound("https://mp3source.s3.amazonaws.com/mp3all/Barbarossa%20-%20The%20Load.mp3", {}),
	new buzz.sound("https://mp3source.s3.amazonaws.com/mp3all/Stevie%20Wonder%20-%20Uptight%20%28Everything%27s%20alright%29.mp3", {})
	];

	players[0].id = 0;
	players[1].id = 1;
	players[0].play();
	$scope.playing = true;

	function onupdate(e){
	if ($scope.currrentPlayer == this.id){
	var current = players[this.id].getTime();
	var total = players[this.id].getDuration();
	$scope.current = buzz.toTimer(current);
	$scope.total = buzz.toTimer(total);
	$scope.$apply();

	// do next when it gets to end
	if (current >= (total - (fadeTime/1000)) && !$scope.fading ){
	$scope.next();
	}
	}
	}

	players[0].bind("timeupdate", onupdate);
	players[1].bind("timeupdate", onupdate);

	$scope.next = function(){
	// disable button while fading
	$scope.fading = true;
	$timeout.cancel(tFade);


	// fade track
	oldPlayer = $scope.currrentPlayer;
	$scope.currrentPlayer = $scope.currrentPlayer ? 0: 1;
	players[oldPlayer].fadeWith( players[$scope.currrentPlayer], fadeTime);

	// re-enable button when fade is finished
	tFade = $timeout(function(){
	$scope.fading = false;
	}, fadeTime);
	}

	$scope.playpause = function(){
	$scope.playing = !$scope.playing;
	if ($scope.playing){
	players[$scope.currrentPlayer].play();
	}else{
	buzz.all().pause();
	}
	}

	// just for nice display
	$scope.info=[
	{
	artist: 'Barbarossa',
	title: 'The Load'
	},
	{
	artist: 'Stevie Wonder',
	title: "Everything's Alright"
	}
	];
	});
	</script>

	</body>
	</html>
	{
	"name": "testbuzz",
	"version": "0.0.0",
	"authors": [
	"David Konsumer <konsumer@jetboystudio.com>"
	],
	"license": "MIT",
	"private": true,
	"ignore": [
	"*/.",
	"node_modules",
	"bower_components",
	"test",
	"tests"
	],
	"dependencies": {
	"buzz": "konsumer/buzz#~1.1.2",
	"angular": "~1.2.19"
	}
	}
	/**
	* brunch config
	*/

	exports.config = {
	files: {
	javascripts: {
	defaultExtension: 'js',
	joinTo: {
	'js/vendor.js': /^bower_components[\\/](?!json3\|es5-shim)/,
	}
	}
	}
	};
	{
	"name": "testbuzz",
	"version": "0.0.0",
	"description": "",
	"main": "index.js",
	"scripts": {
	"start": "brunch watch --server"
	},
	"author": "",
	"license": "MIT",
	"dependencies": {
	"brunch": "^1.7.14",
	"javascript-brunch": "^1.7.1",
	"ngmin-uglify-js-brunch": "^1.7.13"
	}
	}