Player Popup

HTML5 Player Popup (Simulcast)

HTML

<div id="player">
  <div id="player-topo">

    <!-- Station ID -->
    <div id="player-titulo" class="texto_titulo">
    FUNX Amsterdam
    <span class="texto_url_site">Icecast</span></div>

    <!-- Player Links -->
    <div id="player-links"></div>

  </div>

 

    <!-- Current Song -->
    <div id="player-conteudo-musica">
      <span id="musica_atual" class="texto_musica"></span>
    </div>


  <!-- Player Controls -->
  <div id="player-controles">

    <!-- HTML5 Audio Tag -->
    <div id="audio_player"></div>

    <!-- Play -->
    <div id="btnPlay" class="btnPlayer">
      <img src="http://res.cloudinary.com/cdowebcast/image/upload/v1456063405/player/play.png" width="35" height="35" align="middle" onclick="stmPlay()" />
    </div>

    <!-- Stop -->
    <div id="btnStop" class="btnPlayer hidden">
      <img src="http://res.cloudinary.com/cdowebcast/image/upload/v1456063387/player/stop.png" width="35" height="35" align="middle" onclick="stmStop()" />
    </div>

    <!-- Pause -->
    <div id="btnPause" class="btnPlayer">
      <img src="http://res.cloudinary.com/cdowebcast/image/upload/v1456063405/player/pause.png" width="30" height="30" align="middle" onclick="stmPause()" />
    </div>

    <!-- Volume Up -->
    <div id="btnVolUp" class="btnPlayer">
      <img src="http://res.cloudinary.com/cdowebcast/image/upload/v1456028173/player/mais.png" width="18" height="45" align="middle" onclick="stmVolUp()" />
    </div>

    <!-- Volume Down -->
    <div id="btnVolDn" class="btnPlayer">
      <img id="btnVolDn" src="http://res.cloudinary.com/cdowebcast/image/upload/v1456028173/player/menos.png" width="18" height="45" align="middle" onclick="stmVolDn()" />
    </div>

    <!-- VU Fake -->
    <div id="player-vu-meter">
      <img src="http://res.cloudinary.com/cdowebcast/image/upload/v1456028174/player/vumeter.gif" width="245" height="30" />
    </div>
  </div>
</div>

CSS

#player {
  width: 400px;
  height: 200px;
  margin: 0px auto;
}

#player-topo {
  background-color: #000000;
  width: 100%;
  height: 30px;
  margin: 0px auto;
}

#player-titulo {
  height: 30px;
  margin: 0px auto;
  text-align: center;
  float: left;
}

#player-links {
  width: 50%;
  height: 30px;
  margin: 0px auto;
  text-align: right;
  float: right;
}

#player-conteudo {
  background: url() repeat-x;
  width: 100%;
  height: 190px;
  margin: 0px auto;
  text-align: center;
}

#player-conteudo-capa {
  width: 100%;
  height: 160px;
  margin: 0px auto;
  text-align: center;
}

#player-conteudo-musica {
  width: 100%;
  height: 30px;
  margin: 0px auto;
  text-align: center;
}

#player-controles {
  background-color: #000000;
  width: 400px;
  height: 45px;
  margin: 0px auto;
  text-align: center;
  float: left
}

#player-vu-meter {
  padding: 10px 0 5px 0;
  background-color: #000000;
  width: 250px;
  height: 30px;
  margin: 0px auto;
  text-align: center;
  float: right
}

.texto_titulo {
  color: #FFFFFF;
  font-family: Geneva, Arial, Helvetica, sans-serif;
  font-size: 15px;
  font-weight: normal;
}

.texto_url_site {
  color: #FFFFFF;
  font-family: Geneva, Arial, Helvetica, sans-serif;
  font-size: 10px;
  font-weight: normal;
}

.texto_musica {
  color: #FFFFFF;
  font-family: Geneva, Arial, Helvetica, sans-serif;
  font-size: 12px;
  font-weight: normal;
  text-shadow: #000000 1px 1px 1px;
  cursor: pointer;
}

.texto_padrao {
  color: #000000;
  font-family: Geneva, Arial, Helvetica, sans-serif;
  font-size: 11px;
  font-weight: normal;
}

.btnPlayer {
  cursor: pointer;
  float: left;
}

#btnPlay {
  padding-left: 5px;
  padding-top: 5px;
  width: 35px;
  height: 35px;
}

#btnStop {
  padding-left: 5px;
  padding-top: 5px;
  width: 35px;
  height: 35px;
}

#btnPause {
  padding-top: 7px;
  width: 30px;
  height: 30px;
}

#btnVolUp {
  padding-left: 15px;
  width: 18px;
  height: 45px;
}

#btnVolDn {
  padding-left: 5px;
  width: 18px;
  height:...

JavaScript

var audio_src = 'http://icecast.omroep.nl/funx-amsterdam-bb-mp3';

var musica_atual = document.getElementById('musica_atual');
musica_atual_players('FUNX AMSTERDAM');

var audio_player = document.getElementById('audio_player');
audio_player.innerHTML = '<audio id="player_html5" preload="none" src="' + audio_src + '" type="audio/mp3">Seu navegador n&atilde;o tem suporte a HTML5</audio>';

var player_html5 = document.getElementById('player_html5');
player_html5.volume = 2.0; // Volume

stmPlay(); // Autoplay

var tmr = setTimeout(function() {
  musica_atual_players('PLAYING');
}, 7000);

function stmPlay() {
  musica_atual_players('PLAYING');
  player_html5.play();

  document.getElementById('btnPlay').style.display = 'none';
  document.getElementById('btnStop').style.display = 'inline';
  document.getElementById('player-vu-meter').style.display = 'inline';

  clearTimeout(tmr);
  tmr = setTimeout(function() {
    musica_atual_players('LOCUTOR AO VIVO');
  }, 7000);
}

function stmPause() {
  player_html5.pause();

  document.getElementById('btnPlay').style.display = 'inline';
  document.getElementById('btnStop').style.display = 'none';
  document.getElementById('player-vu-meter').style.display = 'none';

  musica_atual_players('PAUSADO. Aperte Play para continuar!');
}

function stmStop() {
  player_html5.pause();
  player_html5.src = player_html5.src;

  document.getElementById('btnPlay').style.display = 'inline';
  document.getElementById('btnStop').style.display = 'none';
  document.getElementById('player-vu-meter').style.display = 'none';

  musica_atual_players('PARADO. Aperte Play para iniciar!');
}

function stmVolUp() {
  var vol = player_html5.volume;
  vol += 0.1;
  vol = (vol > 1) ? 1 : vol;
  player_html5.volume = vol;
  musica_atual_players('Volume ' + Math.ceil(Math.abs(vol) * 10));
  clearTimeout(tmr);
  tmr = setTimeout(function() {
    musica_atual_players('LOCUTOR AO VIVO');
  }, 3000);
}

function stmVolDn() {
  var vol = player_html5.volume;
 ...