Build soundcloud player from share URL
HTML
<div class="js-player"></div>
JavaScript
/**
* get
* Tiny utility for making XHR requests for purpose of this example
* @param {String} url
* @param {Function} callback [description]
*/
function get(url, callback, errback) {
var req = new XMLHttpRequest();
req.open('GET', url, true);
req.onreadystatechange = function() {
if(req.readyState != 4) return;
if (req.status === 200) {
callback(req);
}
else {
errback(req);
}
};
req.send(null);
}
/**
* getTrack
* split the shareURL into segments and build up the soundcloud api /resolve URL
* this request requires that you have a `client_id` - which can be obtained
* by registering an app : http://soundcloud.com/you/apps
*
* @param {String} shareURL
* @return {Promise}
*/
function getTrack (shareURL) {
var parts = shareURL.split('/');
var artist = parts[3]
var track = parts[4]
var url = 'https://api.soundcloud.com/resolve.json?url=https%3A%2F%2Fsoundcloud.com%2F'
+ artist + '%2F' + track + '&client_id=8b1d7952a6b35614b4f31fa93a18e682';
return new Promise(function(resolve, reject) {
get(url, function(res){
resolve(JSON.parse(res.responseText))
});
})
}
/**
* renderPlayer
* build an iframe from the provided `id` param
* @param {Number} id
* @param {Node} target element
*/
function renderPlayer(id, target) {
var player = document.createElement('iframe');
var attrs = {
width: '100%',
height: '166',
scrolling: 'no',
frameborder: 'no'
}
// apply iframe attributes
for (var key in attrs) {
player.setAttribute(key, attrs[key])
}
var src = 'https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/' +
id + '&color=ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false'
player.setAttribute('src', src)
// append
target.appendChild(player)
}
// a sound cloud share URL
var soundcloudShareURL =...