JSFiddle - React, Tailwind, and code Playground

michigan radio autoplay - Soundcloud jplayer stream

by dledle2

HTML

<script src='//connect.soundcloud.com/sdk.js'></script>
<script src='//cdnjs.cloudflare.com/ajax/libs/jplayer/2.9.2/jplayer/jquery.jplayer.min.js'></script>

<div id="jquery_jplayer_1" class="jp-jplayer"></div>
				<div id="jp_container_1" class="jp-audio tile-container span6">
					<div class="jp-type-single">
						<div class="jp-gui jp-interface">
							<ul class="jp-controls">
								<li>
									<a href="javascript:;" class="jp-play thumb" tabindex="1">
										<h3 class="jp-title sound-name">Title 11</h3>
									</a>
								</li>
								<li>
									<a href="javascript:;" class="jp-pause thumb" tabindex="1">
										<h3 class="sound-name">Pause</h3>
									</a>
								</li>
							</ul>
							<div class="jp-progress">
								<div class="jp-seek-bar">
									<div class="jp-play-bar"></div>
								</div>
							</div><!-- .jp-progress -->
							
							<div class="controls-wrap clearfix">
								<div class="jp-time-holder clearfix">
									<div class="jp-current-time"></div>
									<span class="time-sep"> / </span>
									<div class="jp-duration"></div>
								</div><!-- .jp-time-holder -->
								<ul class="jp-toggles">
									<li>
										<a href="javascript:;" class="jp-repeat icon-loop icon-alone" tabindex="1" title="repeat">
											<span class="visuallyhidden">repeat</span>
										</a>
									</li>
									<li>
										<a href="javascript:;" class="jp-repeat-off icon-loop icon-alone" tabindex="1" title="repeat off">
											<span class="visuallyhidden">repeat off</span>
										</a>
									</li>
								</ul><!-- .jp-toggles -->
								<ul class="downloads">
									<li class="dropdown clearfix">
										<a class="dropdown-toggle icon-download icon-alone" role="button" data-toggle="dropdown" href="#">
											<span class="visuallyhidden">download</span>
										</a>
										<ul class="submenu dropdown-menu" role="menu" aria-labelledby="dLabel">
											<li role="presentation"><a href="#"...

CSS

/* 
 * Soundboard Tiles
 * ---------------------------------------------------*/
 
.tile-container {
	/*background: #fafafa;*/
	background: rgb(179, 174, 243); /* is better to have to background declared globally. Avoids repeating and weird transition glitch */
	background: -moz-linear-gradient(top,  rgb(179, 174, 243) 0%, #ffff88 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgb(179, 174, 243)), color-stop(100%,#ffff88));
	background: -webkit-linear-gradient(top,  rgb(179, 174, 243) 0%,#ffff88 100%);
	background: -o-linear-gradient(top,  rgb(179, 174, 243) 0%,#ffff88 100%);
	background: -ms-linear-gradient(top,  rgb(179, 174, 243) 0%,#ffff88 100%);
	background: linear-gradient(to bottom,  rgb(179, 174, 243) 0%,#ffff88 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='rgb(179, 174, 243)', endColorstr='#ffff88',GradientType=0 );
	font-size: .64em;
	font-style: oblique;
	line-height: 1.8em;
	margin-bottom: 1rem;
	margin-top: 1rem;
	position: relative; /*for absolute positioning of children*/
}
.thumb {
	/*background: #eee;*/
	/*background: rgba(235, 235, 21, 0.36);*/
	/*background: yellow;*/
	
	color: #fff;
	display: table; /*to position the text centrally */
	font-size: 50px;
	height: 150px;
	padding: 10px;
	position: relative;
	text-align: center;
	width: 100%;
	-webkit-transition: all .3s ease-in-out;   
	   -moz-transition: all .3s ease-in-out;     
	    -ms-transition: all .3s ease-in-out;
	     -o-transition: all .3s ease-in-out;           
	        transition: all .3s ease-in-out;
}
.thumb:hover {
	box-shadow: 0px 0px 5px rgba(232, 139, 255, 0.5);
	/*color: transparent;*/
	/*text-shadow: 0px 0px 5px rgba(232, 139, 255, 0.1);*/
	/*text-shadow: 0px 0px 1px #fff, -3px 3px 3px rgba(0, 0, 0, 0.66);*/
	background-size: 30px 30px; 	/*gradient*/
	background-image: -webkit-linear-gradient(
		45deg, 
		rgba(0, 0, 0, 0.1)  25%, 
		transparent       25%, 
		transparent       50%, 
		rgba(0, 0, 0, 0.1)  50%,...

JavaScript

javascript:void(0);
var SOUNDCLOUD_API = 'http://api.soundcloud.com',
    CLIENT_ID = '?client_id=e39381c8d77830cdc5cc264ef318cfc4';

	$("#jquery_jplayer_1").jPlayer({
		ready: function() {
			$(this).jPlayer("setMedia", {
				mp3: "http://playerservices.streamtheworld.com/api/livestream-redirect/WUOMFM.mp3"
 /*			});  this will NOT autoplay like the method below */
			}).jPlayer("play");
		},
		play: function() { // To avoid both jPlayers playing together.
			/* $(this).jPlayer("pauseOthers"); */
		},
		swfPath: "../js",
		supplied: "mp3",
		cssSelectorAncestor: "#jp_container_1",
    
		autoplay: true,
    
    
		wmode: "window"
	});void(0);