Mixcloud Widget API Custom Player

mixcloud-player.html

<script src="//widget.mixcloud.com/media/js/widgetApi.js" type="text/javascript"></script>
 
<iframe width="100%" height="60" src="https://www.mixcloud.com/widget/iframe/?hide_cover=1&mini=1&light=1&hide_artwork=1&autoplay=1&feed=%2Fradioraheem_milano%2Fblack-sugar-puntata-01%2F" frameborder="0" allow="autoplay"></iframe>

<div class="controls">
  <button id="play">Play</button>
  <button id="pause">Pause</button>
  <button id="next">Next</button>
  <button id="load0">Load Track 1</button>
  <button id="load1">Load Track 2</button>
  <button id="load2">Load Track 3</button>
</div>

<p><span id="position">0</span>/<span id="duration">0</span></p>
  
<p id="status">Initializing...</p>

<p id="slot">Loaded initial track</p>

mixcloud-player.js

/* playlist */
let playlist = [
  '/radioraheem_milano/drang-x-radio-raheem-superbudda/',
  '/polaroidblog/polaroid-blog-x-radio-raheem-20180119/',
  '/radioraheem_milano/sohn-base-x-radio-raheem/'
];

/* get html elements */
let widgetEl = document.querySelector('iframe');
let positionEl = document.querySelector('#position');
let durationEl = document.querySelector('#duration');
let statusEl = document.querySelector('#status');
let trackEl = document.querySelector('#slot');

/* add listeners */
document.querySelector('#play').addEventListener('click',play);
document.querySelector('#pause').addEventListener('click',pause);
document.querySelector('#next').addEventListener('click',next);
document.querySelector('#load0').addEventListener('click',()=>{ load(0); });
document.querySelector('#load1').addEventListener('click',()=>{ load(1); });
document.querySelector('#load2').addEventListener('click',()=>{ load(2); });

/* mixcloud widget */
let widget = Mixcloud.PlayerWidget(widgetEl);
widget.ready.then(function() {
  status('Ready');
  
  widget.events.play.on(onPlay);
  widget.events.pause.on(onPause);
  widget.events.ended.on(onEnded);
  widget.events.progress.on(onProgress);
  widget.events.buffering.on(onBuffering);
  getDuration();
});

/* actions */
function play(){
  widget.play();
}

function pause(){
  widget.pause();
}

let current = 0;
function next(){
  current = current+1 >= playlist.length ? 0 : current+1;
  load( current );
}

function load( id ){
  status(`Loading new track ${id+1}`);
  positionEl.innerHTML = '0';
  widget.load( playlist[id], true ).then(()=>{
    status('Loaded');
    current = id;
    trackEl.innerHTML = `Track ${id+1} loaded`;
    setTimeout(()=>{
      getDuration();
    }, 500);
});
}

/* event handlers */
function onPlay(){
  status('Play');
}

function onPause(){
  status('Pause');
}

function onEnded(){
  status('Ended');
  next();
}

function onBuffering(){
  status('Buffering...');
}

function onProgress(pos, dur){
  positionEl.innerHTML = parseTime(pos);
  durationEl.innerHTML = parseTime(dur);
}

function getDuration(){
  widget.getDuration().then((dur)=>{
    durationEl.innerHTML = parseTime(dur);
  });
}

/* status */
function status( message ){
  statusEl.innerHTML = message;
}

/* utilities */
function parseTime( sec ){
    let min = Math.floor(sec / 60);
    sec = Math.floor(sec - min * 60);
    sec = '00' + sec;
    return `${min}:${sec.slice(-2)}`;
}

Demo: https://jsfiddle.net/yjh0z1vf/

Unfortunately it seems to be impossible to load the widget without a track and then fill in the first track via JS :(
That means, the iframe element can only be created when the initial track ID is already there.

To compose the iframe src programmatically, you can do something like:

let settings = {
  hide_cover: 1,
  mini: 1,
  light: 1,
  hide_artwork: 1,
  autoplay: 1
};

let query = Object.keys( settings ).map(key => key + '=' + settings[key]).join('&');

let track = '/radioraheem_milano/drang-x-radio-raheem-superbudda/';

let src = `https://www.mixcloud.com/widget/iframe/?${query}&feed=${encodeURIComponent(track)}`;