JSFiddle - React, Tailwind, and code Playground

by trkli

HTML

<script src="http://w.soundcloud.com/player/api.js"></script>

<iframe id="so" width="100%" height="160" scrolling="no" src="https://w.soundcloud.com/player/?url=http://api.soundcloud.com/users/1539950/favorites" frameborder="0" ></iframe>

<div class="play"></div>
<div id="stopSound"></div>

CSS

#so{
    position: absolute;
    top: 20px;
    left: 20px;
}

#playSound{
    position: absolute;
    top: 200px;
    left: 20px;
    width: 20px;
    height: 20px;
    background-color: blue;
}

#stopSound{
    position: absolute;
    top: 200px;
    left: 50px;
    width: 20px;
    height: 20px;
    background-color: green;
}

JavaScript

var widget1 = SC.Widget("so");


$('.play').on(click() {

});
	this.toggle = !this.toggle;
	
  if( this.toggle ) {
  
	} else {
  
	}
  
  
  
$(function(){
    $("#playSound").click(function() {
        widget1.play();

    });

    $("#stopSound").click(function() {
        widget1.pause()
    });
})