OnAir SHOUTrdio

Shoutcast Stats via HTTPS

by Cristiano Oliveira

HTML

<script src="https://fonts.googleapis.com/css?family=Oswald"></script>
<div style="width:100%; height:45px;">
<div class="markuee">
  <p class="text-26 uppercase" id="currentSong"></p>
  <p class="text-26 uppercase" id="nextSong"></p>
</div>
</div>

CSS

.text-26 {
  font-family: Oswald;
  font-size: 26px;
  line-height: 48px;
}

.markuee:hover {
  animation-play-state: paused;
}

p.uppercase {
  text-transform: uppercase;
}

p.lowercase {
  text-transform: lowercase;
}

p.capitalize {
  text-transform: capitalize;
}

.onair {
  color: #F5DF27;
}

.markuee {
  white-space: normal;
  width: 100%;
  height: 100%;
  margin: 0px auto;
  overflow: hidden;
  position: relative;
  -webkit-transition: background-color 350ms;
  -moz-transition: background-color 350ms;
  transition: background-color 350ms;
}

.markuee p {
  position: absolute;
  font-family: Oswald, Tahoma, Arial, sans-serif;
  width: 100%;
  height: 100%;
  margin: 0;
  line-height: 50px;
  text-align: center;
  color: #333333;
  text-shadow: 1px 1px 0px #282828;
  filter: dropshadow(color=#282828, offx=1, offy=1);
  transform: translateX(100%);
  -moz-transform: translateX(100%);
  -webkit-transform: translateX(100%);
}

.markuee p:nth-child(1) {
  animation: left-one 20s ease infinite;
  -moz-animation: left-one 20s ease infinite;
  -webkit-animation: left-one 20s ease infinite;
}

.markuee p:nth-child(2) {
  animation: left-two 20s ease infinite;
  -moz-animation: left-two 20s ease infinite;
  -webkit-animation: left-two 20s ease infinite;
}

.markuee.down p {
  transform: translateY(-100%);
  -moz-transform: translateY(-100%);
  -webkit-transform: translateY(-100%);
}

.markuee.down p:nth-child(1) {
  animation: down-one 20s ease infinite;
  -moz-animation: down-one 20s ease infinite;
  -webkit-animation: down-one 20s ease infinite;
}

.markuee.down p:nth-child(2) {
  animation: down-two 20s ease infinite;
  -moz-animation: down-two 20s ease infinite;
  -webkit-animation: down-two 20s ease infinite;
}

.markuee.up p {
  transform: translateY(100%);
  -moz-transform: translateY(100%);
  -webkit-transform: translateY(100%);
}

.markuee.up p:nth-child(1) {
  animation: up-one 20s ease infinite;
  -moz-animation: up-one 20s ease infinite;
 ...

JavaScript

function OnAir(url) {
$.getJSON(url)
  .done(function(data) {
    //console.log("second success");
    console.log(data);
    var obj = JSON.parse(data);
    $('#currentSong').html('<span class="onair">TOCANDO AGORA |</span> ' + obj.songtitle);
    $('#nextSong').html('<span class="onair">DAQUI A POUCO |</span> ' + obj.nexttitle);
  })
  .fail(function(error) {
    //console.log("error");
    //console.log(error);
    $('#currentSong').html('<span class="onair">NO AR |</span> AUTODJ');
    $('#nextSong').html('<span class="onair">PROGRAMA |</span> AO VIVO');
  })
}
var $url = 'https://radio.stmsrv.com:16614/stats?json=1';
OnAir($url);setInterval(function(){ OnAir($url); }, 18000);