kig/scplayer.css

## scplayer.css
#music {
	opacity: 0;
	transition: 1s;
	position: absolute;
	left: 10px;
	bottom: 10px;
	color: white;
	height: 46px;
	width: 300px;
}
#music:hover {
	opacity: 1 !important;
}
#music a {
	text-decoration:none;
	color: white;
}
.music-play {
	font-size: 39px;
	position: absolute;
	left: 74px;
	top: 0px;
	white-space: nowrap;
	cursor: pointer;
	letter-spacing: 3px;
	width: 40px;
}
.music-author {
	font-size: 12px;
	position: absolute;
	left: 124px;
	top: 7px;
	white-space: nowrap;
}
.music-title {
	font-size: 12px;
	position: absolute;
	left: 124px;
	top: 25px;
	white-space: nowrap;
}
.music-link {
	position: absolute;
	left: 0px;
	top: 0px;
}

## scplayer.html
<html>
  <head>
    <link rel="stylesheet" href="scplayer.css">
  </head>
  <body>
    <div id="music"></div>
    <script src="scplayer.js"></script>
  </body>
</html>

## scplayer.js
(function() {
	var SCPlayer = function(trackURL, el, params) {
		var self = this;
		this.trackURL = trackURL;
		this.el = el;
		SC.get(trackURL, function(track){
			self.title = track.title;
			self.url = track.permalink_url;
			self.artist = track.user.username;
			self.artistURL = track.user.permalink_url;
			self.track = track;
			self.initializeDOM();
		});
		for (var i in params) this[i] = params[i];
		this.initializeDOM();
	};

	SCPlayer.prototype.onpause = function() {
		this.play.innerHTML = '&#9654;';
	};

	SCPlayer.prototype.onstop = function() {
		this.play.innerHTML = '&#9654;';
	};

	SCPlayer.prototype.onplay = function() {
		this.play.innerHTML = '&#10073;&#10073;';
	};

	SCPlayer.prototype.initializeDOM = function() {
		var self = this;
		this.el.style.opacity = 0.3;
		this.play = this.el.querySelector('.music-play');
		this.linkEl = this.el.querySelector('.music-link');
		this.authorEl = this.el.querySelector('.music-author');
		this.titleEl = this.el.querySelector('.music-title');

		this.streaming = false;
		this.play.onclick = function() {
			if (!self.streaming) {
				self.streaming = true;
				self.play.innerHTML = '';
				var c = document.createElement('canvas');
				c.width = 40;
				c.height = 46;
				var ctx = c.getContext('2d');
				ctx.fillStyle = 'white';
				var tick = function() {
					ctx.clearRect(0,0,c.width,c.height);
					var r = c.width/2 - 6;
					var t = Date.now();
					ctx.save();
					ctx.translate(c.width/2, c.height/2);
					ctx.beginPath();
					ctx.arc(Math.sin(t/1000)*r, Math.cos(t/1000)*r, 3, 0, 2*Math.PI, true);
					ctx.fill();
					ctx.beginPath();
					ctx.arc(Math.sin(Math.PI*(2/3)+t/1000)*r, Math.cos(Math.PI*(2/3)+t/1000)*r, 3, 0, 2*Math.PI, true);
					ctx.fill();
					ctx.beginPath();
					ctx.arc(Math.sin(Math.PI*(4/3)+t/1000)*r, Math.cos(Math.PI*(4/3)+t/1000)*r, 3, 0, 2*Math.PI, true);
					ctx.fill();
					ctx.restore();
					if (c.parentNode) {
						requestAnimationFrame(tick, c);
					}
				};
				self.play.appendChild(c);
				requestAnimationFrame(tick, c);
				SC.stream(self.trackURL, {
					autoPlay: true,
					onpause: self.onpause.bind(self),
					onplay: self.onplay.bind(self),
					onfinish: self.onstop.bind(self),
					onstop: self.onstop.bind(self)
				}, function(sound){
					self.sound = sound;
				});
			} else {
				self.sound.togglePause();
			}
		};
		self.authorEl.textContent = self.artist;
		self.authorEl.href = self.artistURL;
		self.titleEl.textContent = self.title;
		self.titleEl.href = self.url;
		self.linkEl.href = self.url;
	};

	SC.initialize({
	    client_id: "CLIENT_ID"
	});
	window.scplayer = new SCPlayer("/tracks/723", document.getElementById('music'));
})();
	#music {
	opacity: 0;
	transition: 1s;
	position: absolute;
	left: 10px;
	bottom: 10px;
	color: white;
	height: 46px;
	width: 300px;
	}
	#music:hover {
	opacity: 1 !important;
	}
	#music a {
	text-decoration:none;
	color: white;
	}
	.music-play {
	font-size: 39px;
	position: absolute;
	left: 74px;
	top: 0px;
	white-space: nowrap;
	cursor: pointer;
	letter-spacing: 3px;
	width: 40px;
	}
	.music-author {
	font-size: 12px;
	position: absolute;
	left: 124px;
	top: 7px;
	white-space: nowrap;
	}
	.music-title {
	font-size: 12px;
	position: absolute;
	left: 124px;
	top: 25px;
	white-space: nowrap;
	}
	.music-link {
	position: absolute;
	left: 0px;
	top: 0px;
	}
	<html>
	<head>
	<link rel="stylesheet" href="scplayer.css">
	</head>
	<body>
	<div id="music"></div>
	<script src="scplayer.js"></script>
	</body>
	</html>
	(function() {
	var SCPlayer = function(trackURL, el, params) {
	var self = this;
	this.trackURL = trackURL;
	this.el = el;
	SC.get(trackURL, function(track){
	self.title = track.title;
	self.url = track.permalink_url;
	self.artist = track.user.username;
	self.artistURL = track.user.permalink_url;
	self.track = track;
	self.initializeDOM();
	});
	for (var i in params) this[i] = params[i];
	this.initializeDOM();
	};

	SCPlayer.prototype.onpause = function() {
	this.play.innerHTML = '▶';
	};

	SCPlayer.prototype.onstop = function() {
	this.play.innerHTML = '▶';
	};

	SCPlayer.prototype.onplay = function() {
	this.play.innerHTML = '❙❙';
	};

	SCPlayer.prototype.initializeDOM = function() {
	var self = this;
	this.el.style.opacity = 0.3;
	this.play = this.el.querySelector('.music-play');
	this.linkEl = this.el.querySelector('.music-link');
	this.authorEl = this.el.querySelector('.music-author');
	this.titleEl = this.el.querySelector('.music-title');

	this.streaming = false;
	this.play.onclick = function() {
	if (!self.streaming) {
	self.streaming = true;
	self.play.innerHTML = '';
	var c = document.createElement('canvas');
	c.width = 40;
	c.height = 46;
	var ctx = c.getContext('2d');
	ctx.fillStyle = 'white';
	var tick = function() {
	ctx.clearRect(0,0,c.width,c.height);
	var r = c.width/2 - 6;
	var t = Date.now();
	ctx.save();
	ctx.translate(c.width/2, c.height/2);
	ctx.beginPath();
	ctx.arc(Math.sin(t/1000)r, Math.cos(t/1000)r, 3, 0, 2*Math.PI, true);
	ctx.fill();
	ctx.beginPath();
	ctx.arc(Math.sin(Math.PI(2/3)+t/1000)r, Math.cos(Math.PI(2/3)+t/1000)r, 3, 0, 2*Math.PI, true);
	ctx.fill();
	ctx.beginPath();
	ctx.arc(Math.sin(Math.PI(4/3)+t/1000)r, Math.cos(Math.PI(4/3)+t/1000)r, 3, 0, 2*Math.PI, true);
	ctx.fill();
	ctx.restore();
	if (c.parentNode) {
	requestAnimationFrame(tick, c);
	}
	};
	self.play.appendChild(c);
	requestAnimationFrame(tick, c);
	SC.stream(self.trackURL, {
	autoPlay: true,
	onpause: self.onpause.bind(self),
	onplay: self.onplay.bind(self),
	onfinish: self.onstop.bind(self),
	onstop: self.onstop.bind(self)
	}, function(sound){
	self.sound = sound;
	});
	} else {
	self.sound.togglePause();
	}
	};
	self.authorEl.textContent = self.artist;
	self.authorEl.href = self.artistURL;
	self.titleEl.textContent = self.title;
	self.titleEl.href = self.url;
	self.linkEl.href = self.url;
	};

	SC.initialize({
	client_id: "CLIENT_ID"
	});
	window.scplayer = new SCPlayer("/tracks/723", document.getElementById('music'));
	})();