/*!
* jQuery UI Touch Punch 0.2.3
*
* Copyright 2011–2014, Dave Furfero
* Dual licensed under the MIT or GPL Version 2 licenses.
*
* Depends:
* jquery.ui.widget.js
* jquery.ui.mouse.js
*/
!function(a){function f(a,b){if(!(a.originalEvent.touches.length>1)){a.preventDefault();var c=a.originalEvent.changedTouches[0],d=document.createEvent("MouseEvents");d.initMouseEvent(b,!0,!0,window,1,c.screenX,c.screenY,c.clientX,c.clientY,!1,!1,!1,!1,0,null),a.target.dispatchEvent(d)}}if(a.support.touch="ontouchend"in document,a.support.touch){var e,b=a.ui.mouse.prototype,c=b._mouseInit,d=b._mouseDestroy;b._touchStart=function(a){var b=this;!e&&b._mouseCapture(a.originalEvent.changedTouches[0])&&(e=!0,b._touchMoved=!1,f(a,"mouseover"),f(a,"mousemove"),f(a,"mousedown"))},b._touchMove=function(a){e&&(this._touchMoved=!0,f(a,"mousemove"))},b._touchEnd=function(a){e&&(f(a,"mouseup"),f(a,"mouseout"),this._touchMoved||f(a,"click"),e=!1)},b._mouseInit=function(){var b=this;b.element.bind({touchstart:a.proxy(b,"_touchStart"),touchmove:a.proxy(b,"_touchMove"),touchend:a.proxy(b,"_touchEnd")}),c.call(b)},b._mouseDestroy=function(){var b=this;b.element.unbind({touchstart:a.proxy(b,"_touchStart"),touchmove:a.proxy(b,"_touchMove"),touchend:a.proxy(b,"_touchEnd")}),d.call(b)}}}(jQuery);
function WaveForm(waveformPngUrl) {
$('.track_waveform').append("<img src=\""+waveformPngUrl+"\" />");
$('.track_waveform').append("<div class='wvprogress'></div>")
this.setProgress = function (newProgress) {
var width = $('.track_waveform').width();
var progressPoint = width - ((1 - newProgress) * width);
$('.wvprogress').css({ width: "" + progressPoint + "px" });
}
}
var player, mTrack, audio, seekBarInterval, waveForm;
var updatingSeekBar = false;
var clientId = 'cUa40O3Jg3Emvp6Tv4U6ymYYO50NUGpJ';
$(function () {
SC.initialize({
client_id: clientId
});
player = document.getElementById("SoundCloudPlayer");
checkQueryURLForTrackId();
loadTrackEnteredInInput();
$("form button").button();
});
function loadTrackEnteredInInput() {
loadTrack(getTrackId());
}
function loadTrack(trackId) {
SC.get('/tracks/' + trackId).then(function (track) {
// Inspect for info on track you want:
console.log(track);
mTrack = track;
renderTrack(track);
streamTrack(track);
waveForm = new WaveForm(track.waveform_url);
}, function () {
alert("Sorry no track found for track id: "+ trackId)
});
}
function renderTrack(track) {
$(player).find(".track_artist").text(track.user.permalink);
$(player).find(".track_title").text(track.title);
$(player).find(".track_artwork").attr('src', track.artwork_url);
$(player).find(".track_seek_bar").slider(
{
orientation: "horizontal",
range: "min",
max: track.duration,
value: 0,
change: seek
});
}
function streamTrack(track) {
var trackUrl = track.stream_url + "?client_id=" + clientId;
audio = new Audio(trackUrl);
console.log(trackUrl);
if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
// Sorry can not auto play on mobile =_(
// https://stackoverflow.com/questions/26066062/autoplay-html5-audio-player-on-mobile-browsers
$(player).find(".track_pause").hide();
$(player).find(".track_play").fadeIn();
} else {
play();
}
}
function play() {
$(player).find(".track_play").hide();
$(player).find(".track_pause").fadeIn();
audio.play();
seekBarInterval = setInterval(updateSeekBar, 500);
}
function pause() {
$(player).find(".track_pause").hide();
$(player).find(".track_play").fadeIn();
audio.pause();
clearInterval(seekBarInterval);
}
function seek(event) {
if (event.originalEvent) {
audio.currentTime = $(player).find(".track_seek_bar").slider("value") / 1000;
}
waveForm.setProgress((audio.currentTime * 1000) / mTrack.duration);
}
function updateSeekBar() {
var time = (audio.currentTime * 1000);
$(player).find(".track_seek_bar").slider("value", time);
}
/**
* Loads a different track id based on
* url query
*/
function checkQueryURLForTrackId() {
var query = getUrlVars();
if (query.trackId) {
$('[name=trackId]').val(query.trackId);
}
}
//https://stackoverflow.com/questions/4656843/jquery-get-querystring-from-url
// Read a page's GET URL variables and return them as an associative array.
function getUrlVars()
{
var vars = {}, hash;
var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
for(var i = 0; i < hashes.length; i++)
{
hash = hashes[i].split('=');
vars[hash[0]] = hash[1];
}
return vars;
}
function getTrackId() {
return trackId = $('[name=trackId]').val();
}
body {
font-family: 'Raleway', sans-serif;
}
#SoundCloudPlayer .track_artwork {
float:left;
margin-right: 6px;
}
#SoundCloudPlayer .track_artist {
font-size: small;
margin-bottom: 4px;
}
#SoundCloudPlayer .track_title {
margin-top: 0px;
font-weight: bold;
}
#SoundCloudPlayer .track_control {
cursor: pointer;
display: none;
}
#SoundCloudPlayer .track_seek_bar .ui-slider-range { background: orange; }
#SoundCloudPlayer .track_seek_bar .ui-slider-handle { border-color: orange; }
#SoundCloudPlayer .track_waveform {
width: 100%;
height: 80px;
margin-top: 5px;
margin-bottom: 5px;
position: relative;
}
#SoundCloudPlayer .track_waveform img {
left: 0;
top: 0;
width: 100%;
height: 100%;
position: absolute;
z-index: 0;
}
#SoundCloudPlayer .track_waveform .wvprogress{
height: 100%;
position: absolute;
opacity: 0.25;
background-color: #ed970e;
width: 0px;
z-index: 1;
left: 0;
top: 0;
}
<html>
<head>
<meta name="viewport" content="initial-scale=1, maximum-scale=1">
<title>SoundCloud API Web Player Demo</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.0/themes/smoothness/jquery-ui.css" />
<script src="jquery.ui.touch-punch.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.0/jquery-ui.min.js"></script>
<script src="https://connect.soundcloud.com/sdk/sdk-3.1.2.js"></script>
<script src="waveformImage.js"></script>
<script src="player.js"></script>
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet" />
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
<link href="style.css" rel="stylesheet" />
</head>
<body>
<form method="get">
<label for="trackId">Load Track:</label>
<input name="trackId" type="text" value="271188615" />
<button>GO</button>
</form>
<section id="SoundCloudPlayer">
<img class="track_artwork" />
<p class="track_artist"></p>
<p class="track_title"></p>
<i class="material-icons track_play track_control" onClick="play()">play_circle_filled</i>
<i class="material-icons track_pause track_control" onClick="pause()">pause_circle_filled</i>
<br style="clear:both"/>
<div class="track_waveform"></div>
<div class="track_seek_bar" ></div>
</section>
</body>
</html>