gilesdring/README.md

## README.md

      
    Raw
  

              README.md
            
          
    https://www.mixcloud.com/developers/widget/#footerwidget
The autostart.js script will cause the main feed to start playing. This is dependent on the browser settings.
Chrome - click on media preferences in location bar (next to site address) and select allow audio and video.
Firefox seems somewhat less willing to autoplay.
Unpack this to a directory. It'll need to be running from a webserver. Simple way to do this is
python -m SimpleHTTPServer 8000

This will be listening on http://localhost:8000/
How autostart works

Adds a listener to find the iframe that the widget loads into. Once found, sends a custom event shrfeedloaded.
This is handled by the defined event listener. Uses the mixcloud Widget API (initialised with the container), and plays once the widget is ready.

  
## autostart.js
window.addEventListener("shrfeedloaded", function (e) {
  var widget = Mixcloud.PlayerWidget(e.detail.container);
  widget.ready.then(function () {
    widget.play();
  })
});

window.addEventListener("load", function () {
  function getContainer() {
    var container = document.querySelector("iframe[src]");
    if (container === null) {
      setTimeout(getContainer, 100);
    } else {
      var event = new CustomEvent("shrfeedloaded", {
        detail: {
          container: container,
        }
      });
      window.dispatchEvent(event);
    }
  }
  getContainer();
});

## index.html
<!doctype html>
<html>
<head>
  </head>
<body>

  <div data-mixcloud-play-button="/sohoradio/anna-priors-beat-palace-29082019/" play="true" style="font-weight:bold; background-color:#FF0000;color:#FFFFFF;">LISTEN NOW</div>

  <script src="//widget.mixcloud.com/media/js/footerWidgetApi.js" async>
  {"feed": "/sohoradio/"}
  </script>

  <script src='./autostart.js'></script>
</body>
	window.addEventListener("shrfeedloaded", function (e) {
	var widget = Mixcloud.PlayerWidget(e.detail.container);
	widget.ready.then(function () {
	widget.play();
	})
	});

	window.addEventListener("load", function () {
	function getContainer() {
	var container = document.querySelector("iframe[src]");
	if (container === null) {
	setTimeout(getContainer, 100);
	} else {
	var event = new CustomEvent("shrfeedloaded", {
	detail: {
	container: container,
	}
	});
	window.dispatchEvent(event);
	}
	}
	getContainer();
	});
	<!doctype html>
	<html>
	<head>
	</head>
	<body>

	<div data-mixcloud-play-button="/sohoradio/anna-priors-beat-palace-29082019/" play="true" style="font-weight:bold; background-color:#FF0000;color:#FFFFFF;">LISTEN NOW</div>

	<script src="//widget.mixcloud.com/media/js/footerWidgetApi.js" async>
	{"feed": "/sohoradio/"}
	</script>

	<script src='./autostart.js'></script>
	</body>