Add files via upload
Este commit está contenido en:
Joey
GitHub
1584
css/animate.css
vendido
Archivo normal
1584
css/animate.css
vendido
Archivo normal
La diferencia del archivo ha sido suprimido porque es demasiado grande
Cargar Diff
7
css/bootstrap.min.css
vendido
Archivo normal
7
css/bootstrap.min.css
vendido
Archivo normal
Las diferiencias del archivo han sido suprimidas porque una o mas lineas son muy largas
4
css/font-awesome.min.css
vendido
Archivo normal
4
css/font-awesome.min.css
vendido
Archivo normal
Las diferiencias del archivo han sido suprimidas porque una o mas lineas son muy largas
400
css/style.css
Archivo normal
400
css/style.css
Archivo normal
@@ -0,0 +1,400 @@
|
||||
@charset 'utf-8';
|
||||
|
||||
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@1,300;1,800&display=swap');
|
||||
@import url('bootstrap.min.css');
|
||||
|
||||
html, body {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
display: flex;
|
||||
flex-flow: row;
|
||||
justify-content: center;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.cover-site {
|
||||
min-width: 100%;
|
||||
min-height: 100%;
|
||||
position: fixed;
|
||||
background: url('../img/bg_site.jpg') no-repeat;
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
transition: background-image 1s;
|
||||
background-attachment: fixed;
|
||||
}
|
||||
|
||||
/* FONDO DESENFOQUE */
|
||||
|
||||
#bgCover {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
background-position: center 20%;
|
||||
filter: blur(20px);
|
||||
-webkit-filter: blur(20px);
|
||||
transition: all .5s linear;
|
||||
transform: scale(2.2);
|
||||
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.bg-mask {
|
||||
min-width: 100%;
|
||||
min-height: 100%;
|
||||
position: absolute;
|
||||
background-color: rgba(0,0,0,0.0);
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.web-player {
|
||||
height: 100%;
|
||||
color: #fff;
|
||||
padding: 5px;
|
||||
position: relative;
|
||||
z-index: 3;
|
||||
margin-top: 25px;
|
||||
}
|
||||
|
||||
.cover-album {
|
||||
max-width: 80%;
|
||||
margin: auto;
|
||||
background: url('https://ucarecdn.com/3c5f4be1-fa66-4d75-b241-2573dc43f8a3/-/preview/-/quality/smart/-/format/auto/') no-repeat;
|
||||
background-size: cover;
|
||||
border: 2px solid #fefefe;
|
||||
box-shadow: 0px 5px 10px 3px rgba(0, 0, 0, 0.4);
|
||||
transition: background-image 1s;
|
||||
border-radius: 10px;
|
||||
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
#currentCoverArt {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
border-radius: 10px;
|
||||
|
||||
transition: background-image 1s;
|
||||
}
|
||||
|
||||
.logo {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.info-current-song {
|
||||
font-family: 'Poppins', sans-serif;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.info-current-song h2 {
|
||||
font-size: 46px;
|
||||
text-transform: uppercase;
|
||||
font-weight: 800;
|
||||
|
||||
}
|
||||
|
||||
.info-current-song h3 {
|
||||
font-size: 22px;
|
||||
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.play-pause {
|
||||
font-size: 65px;
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
.play-pause i {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.volume-icon {
|
||||
font-size: 28px;
|
||||
margin-top: -5px;
|
||||
}
|
||||
|
||||
.volume-slide {
|
||||
|
||||
}
|
||||
|
||||
.volume-control {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.vagalume a {
|
||||
color: #fff;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.lyrics {
|
||||
text-transform: uppercase;
|
||||
text-decoration: underline;
|
||||
color: #fff;
|
||||
font-size: 1em;
|
||||
font-weight: 400;
|
||||
outline: none;
|
||||
transition: .3s;
|
||||
}
|
||||
|
||||
.lyrics:active {
|
||||
text-decoration: none;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.lyrics:visited {
|
||||
text-decoration: none;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
background-color: rgba(0, 0, 0, 0.8);
|
||||
color: #fff !important;
|
||||
border-radius: 20px;
|
||||
}
|
||||
|
||||
.modal-content .btn {
|
||||
border-radius: 20px;
|
||||
background-color: #00E1E7;
|
||||
}
|
||||
|
||||
/* Chrome */
|
||||
input[type=range] {
|
||||
-webkit-appearance: none;
|
||||
background: transparent;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
input[type=range]:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
input[type=range]::-webkit-slider-runnable-track {
|
||||
width: 100%;
|
||||
height: 5px;
|
||||
cursor: pointer;
|
||||
animate: 0.2s;
|
||||
box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
input[type=range]::-webkit-slider-thumb {
|
||||
box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
border-radius: 50%;
|
||||
background: #fff;
|
||||
cursor: pointer;
|
||||
-webkit-appearance: none;
|
||||
margin-top: -8px;
|
||||
}
|
||||
|
||||
/* Firefox */
|
||||
input[type=range]::-moz-range-track {
|
||||
width: 100%;
|
||||
height: 5px;
|
||||
cursor: pointer;
|
||||
animate: 0.2s;
|
||||
box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
input[type=range]::-moz-range-thumb {
|
||||
box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
|
||||
border: 0px solid #000000;
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
border-radius: 50%;
|
||||
background: #fff;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* IE e Edge */
|
||||
input[type=range]::-ms-track {
|
||||
width: 100%;
|
||||
height: 5px;
|
||||
cursor: pointer;
|
||||
animate: 0.2s;
|
||||
background: transparent;
|
||||
border-color: transparent;
|
||||
border-width: 10px 0;
|
||||
top: -10px;
|
||||
color: transparent;
|
||||
}
|
||||
|
||||
input[type=range]::-ms-fill-lower {
|
||||
background: #fff;
|
||||
border: 0px solid #000101;
|
||||
box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
|
||||
}
|
||||
|
||||
input[type=range]::-ms-fill-upper {
|
||||
background: #fff;
|
||||
border: 0px solid #000101;
|
||||
box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
|
||||
}
|
||||
|
||||
input[type=range]::-ms-thumb {
|
||||
box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
|
||||
border: 0px solid #000000;
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
border-radius: 50%;
|
||||
background: #fff;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
|
||||
.historic h2 {
|
||||
color: #fff;
|
||||
border-bottom: 2px solid #fff;
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
text-transform: uppercase;
|
||||
margin: 10px 0;
|
||||
|
||||
}
|
||||
|
||||
|
||||
/* ZONA FONDO CANCIONES SONADAS */
|
||||
|
||||
.historic article {
|
||||
margin: 5px 0;
|
||||
padding: 10px;
|
||||
background-color: none;
|
||||
}
|
||||
|
||||
.historic .cover-historic {
|
||||
width: 95px;
|
||||
height: 95px;
|
||||
margin-right: 15px;
|
||||
float: left;
|
||||
border-radius: 10px;
|
||||
background: url('https://ucarecdn.com/3c5f4be1-fa66-4d75-b241-2573dc43f8a3/-/preview/-/quality/smart/-/format/auto/') no-repeat;
|
||||
background-size: cover;
|
||||
border: 2px solid #fefefe;
|
||||
|
||||
box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.3);
|
||||
transition: background-image 1s;
|
||||
}
|
||||
|
||||
/* COLOR TEXTO INFO ARTISTA */
|
||||
.historic .music-info {
|
||||
color: white;
|
||||
font-family: 'Poppins', sans-serif;
|
||||
}
|
||||
|
||||
|
||||
/* COLOR TEXTO CANCION */
|
||||
|
||||
.historic .music-info .song {
|
||||
width: 100%;
|
||||
font-weight: bold;
|
||||
font-size: 20px;
|
||||
text-transform: uppercase;
|
||||
margin-bottom: -5px;
|
||||
color: white;
|
||||
}
|
||||
|
||||
@media(max-width: 370px) {
|
||||
.cover-album {
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@media(min-width: 576px) {
|
||||
.volume-control {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.call-lyrics {
|
||||
margin-top: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
@media(min-width: 768px) {
|
||||
body {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.h1-logo {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.logo {
|
||||
display: block;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.logo img {
|
||||
max-width: 200px;
|
||||
}
|
||||
|
||||
.web-player {
|
||||
height: auto;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.cover-album {
|
||||
margin: 10px auto;
|
||||
min-width: 320px;
|
||||
height: 320px;
|
||||
}
|
||||
|
||||
.logo img {
|
||||
max-width: 300px;
|
||||
margin: 65px 0;
|
||||
}
|
||||
|
||||
.info-current-song {
|
||||
margin-top: 20px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.volume-control {
|
||||
margin-top: 10%;
|
||||
}
|
||||
}
|
||||
|
||||
#buttonPlay {
|
||||
padding-left: 10px;
|
||||
}
|
||||
#playerButton {
|
||||
color: black;
|
||||
}
|
||||
.play-pause i {
|
||||
cursor: pointer;
|
||||
}
|
||||
.btn-play {
|
||||
background-color: white;
|
||||
border: none;
|
||||
color: black;
|
||||
padding: 12px 25px;
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
cursor: pointer;
|
||||
border-radius: 25px;
|
||||
width: 100%;
|
||||
transition: transform .2s;
|
||||
box-shadow: 1px 3px #30303022;
|
||||
}
|
||||
.btn-play:focus {outline:0;}
|
||||
.btn-play:hover {
|
||||
box-shadow: 1px 5px #30303022;
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
BIN
fonts/FontAwesome.otf
Archivo normal
BIN
fonts/FontAwesome.otf
Archivo normal
Archivo binario no mostrado.
BIN
fonts/fontawesome-webfont.eot
Archivo normal
BIN
fonts/fontawesome-webfont.eot
Archivo normal
Archivo binario no mostrado.
2671
fonts/fontawesome-webfont.svg
Archivo normal
2671
fonts/fontawesome-webfont.svg
Archivo normal
La diferencia del archivo ha sido suprimido porque es demasiado grande
Cargar Diff
|
Después Anchura: | Altura: | Tamaño: 434 KiB |
BIN
fonts/fontawesome-webfont.ttf
Archivo normal
BIN
fonts/fontawesome-webfont.ttf
Archivo normal
Archivo binario no mostrado.
BIN
fonts/fontawesome-webfont.woff
Archivo normal
BIN
fonts/fontawesome-webfont.woff
Archivo normal
Archivo binario no mostrado.
BIN
fonts/fontawesome-webfont.woff2
Archivo normal
BIN
fonts/fontawesome-webfont.woff2
Archivo normal
Archivo binario no mostrado.
BIN
img/103-fundo-escuro.jpg
Archivo normal
BIN
img/103-fundo-escuro.jpg
Archivo normal
Archivo binario no mostrado.
|
Después Anchura: | Altura: | Tamaño: 20 KiB |
BIN
img/background.jpg
Archivo normal
BIN
img/background.jpg
Archivo normal
Archivo binario no mostrado.
|
Después Anchura: | Altura: | Tamaño: 26 KiB |
BIN
img/bg-capa.jpg
Archivo normal
BIN
img/bg-capa.jpg
Archivo normal
Archivo binario no mostrado.
|
Después Anchura: | Altura: | Tamaño: 190 KiB |
BIN
img/bg_album_art_bg.png
Archivo normal
BIN
img/bg_album_art_bg.png
Archivo normal
Archivo binario no mostrado.
|
Después Anchura: | Altura: | Tamaño: 226 KiB |
BIN
img/bg_site.jpg
Archivo normal
BIN
img/bg_site.jpg
Archivo normal
Archivo binario no mostrado.
|
Después Anchura: | Altura: | Tamaño: 238 KiB |
BIN
img/cover.jpg
Archivo normal
BIN
img/cover.jpg
Archivo normal
Archivo binario no mostrado.
|
Después Anchura: | Altura: | Tamaño: 12 KiB |
BIN
img/fondito.png
Archivo normal
BIN
img/fondito.png
Archivo normal
Archivo binario no mostrado.
|
Después Anchura: | Altura: | Tamaño: 120 KiB |
BIN
img/logo.png
Archivo normal
BIN
img/logo.png
Archivo normal
Archivo binario no mostrado.
|
Después Anchura: | Altura: | Tamaño: 14 KiB |
BIN
img/logo_retinablack-2-2.png
Archivo normal
BIN
img/logo_retinablack-2-2.png
Archivo normal
Archivo binario no mostrado.
|
Después Anchura: | Altura: | Tamaño: 6.5 KiB |
146
index.html
Archivo normal
146
index.html
Archivo normal
@@ -0,0 +1,146 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en-US">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
|
||||
<title>Box Radio</title>
|
||||
|
||||
|
||||
<link rel="icon" type="image/png" href="img/cover.png" />
|
||||
<link rel="stylesheet" href="css/font-awesome.min.css">
|
||||
<link rel="stylesheet" type="text/css" href="css/animate.css">
|
||||
<link rel="stylesheet" href="css/style.css?v2322">
|
||||
|
||||
<!-- Pixel Code for https://analytics.streamafrica.net/ -->
|
||||
<!-- END Pixel Code -->
|
||||
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div class="cover-site">
|
||||
<div id="bgCover"></div>
|
||||
<div class="bg-mask"></div>
|
||||
</div>
|
||||
<main>
|
||||
<section id="player">
|
||||
<div class="container">
|
||||
<div class="row web-player">
|
||||
<div class="col-12 col-lg-10">
|
||||
<div class="row">
|
||||
<div class="col-12 col-md-5">
|
||||
<div class="cover-album">
|
||||
<div id="currentCoverArt"></div>
|
||||
<div class="watermark"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 ml-md-auto col-md-6">
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<div class="info-current-song">
|
||||
<h2 id="currentSong" class="current-song text-uppercase">Song</h2>
|
||||
<h3 id="currentArtist" class="current-artist text-captalize">Artist</h3>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<!--
|
||||
<div class="row">
|
||||
<div class="play-pause col-12 col-md-2 text-center">
|
||||
<i id="playerButton" class="fa fa-play-circle" onclick="togglePlay()"></i>
|
||||
</div>
|
||||
<div class="col-12 col-md-10 text-center">
|
||||
<div class="row volume-control">
|
||||
<div class="volume-icon col-1"><i class="fa fa-volume-up"></i></div>
|
||||
<div class="volume-slide col-10 text-center"><input type="range" id="volume"
|
||||
step="1" min="0" max="100" value="80"></div>
|
||||
<div class="percentual-volume col-12">Volume <span id="volIndicator">...</span>%</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 text-center call-lyrics">
|
||||
<a href="#" class="lyrics" style="" data-target="#modalLyrics">VER LETRA</a>
|
||||
</div>
|
||||
</div>-->
|
||||
|
||||
<div class="row">
|
||||
<div class="play-pause col-12 col-md-6 text-center">
|
||||
<button class="btn-play" onclick="togglePlay()"><i id="playerButton" class="fa fa-play"></i> <span id="buttonPlay">PLAY</span></button>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-12 col-md-6 text-center">
|
||||
<div class="row volume-control">
|
||||
<div class="volume-icon col-1"><i class="fa fa-volume-up"></i></div>
|
||||
<div class="volume-slide col-10 text-center"><input type="range" id="volume"
|
||||
step="1" min="0" max="100" value="80"></div>
|
||||
<div class="percentual-volume col-12">Volume <span id="volIndicator">...</span>%</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-12 col-md-6 text-center call-lyrics">
|
||||
<a href="#" class="lyrics" style="" data-target="#modalLyrics">LYRICS</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row historic">
|
||||
<div class="col-12">
|
||||
<h2>RECENTLY PLAYED</h2>
|
||||
<div class="row" id="historicSong">
|
||||
<article class="col-12 col-md-6">
|
||||
<div class="cover-historic"></div>
|
||||
<div class="music-info">
|
||||
<div class="song">No Song</div>
|
||||
<div class="artist">No Artist</div>
|
||||
</div>
|
||||
|
||||
</article>
|
||||
<article class="col-12 col-md-6">
|
||||
<div class="cover-historic"></div>
|
||||
<div class="music-info">
|
||||
<div class="song">No Title</div>
|
||||
<div class="artist">No Artist</div>
|
||||
</div>
|
||||
|
||||
|
||||
</article>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
<div class="modal fade" id="modalLyrics" tabindex="-1" role="dialog" aria-labelledby="lyricsSong" aria-hidden="true">
|
||||
<div class="modal-dialog" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title" id="lyricsSong">Lyrics</h5>
|
||||
<button type="button" style="color: #fff" class="close" data-dismiss="modal" aria-label="Fechar">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="modal-body" id="lyric"></div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-success" data-dismiss="modal">Close</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
|
||||
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js"></script>
|
||||
<script type="text/javascript" src="js/bootstrap.min.js"></script>
|
||||
<script type="text/javascript" src="js/script.js?3892920001992"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
8
js/bootstrap.min.js
vendido
Archivo normal
8
js/bootstrap.min.js
vendido
Archivo normal
Las diferiencias del archivo han sido suprimidas porque una o mas lineas son muy largas
593
js/script.js
Archivo normal
593
js/script.js
Archivo normal
@@ -0,0 +1,593 @@
|
||||
|
||||
|
||||
const RADIO_NAME = 'Game! Radio 1';
|
||||
|
||||
|
||||
var zenoid = 'cfhkm5fs1uhvv'
|
||||
|
||||
// URL of SHOUTCast streaming without / on the final, eg: http://streaming.com:8080
|
||||
const URL_STREAMING = 'https://stream-51.zeno.fm/cfhkm5fs1uhvv?zs=HOu6hxV1SG-7iGi9WGVTqQ';
|
||||
|
||||
// Visit https://api.vagalume.com.br/docs/ to get your API key
|
||||
const API_KEY = "18fe07917957c289983464588aabddfb";
|
||||
|
||||
// Set HISTORIC to true to get the last songs played
|
||||
const HISTORIC = true;
|
||||
|
||||
window.onload = function () {
|
||||
var page = new Page;
|
||||
page.changeTitlePage();
|
||||
page.setVolume();
|
||||
|
||||
var player = new Player();
|
||||
player.play();
|
||||
|
||||
getStreamingData();
|
||||
// Interval to get streaming data in miliseconds
|
||||
setInterval(function () {
|
||||
getStreamingData();
|
||||
}, 7000);
|
||||
|
||||
var coverArt = document.getElementsByClassName('cover-album')[0];
|
||||
|
||||
coverArt.style.height = coverArt.offsetWidth + 'px';
|
||||
}
|
||||
|
||||
// DOM control
|
||||
function Page() {
|
||||
this.changeTitlePage = function (title = RADIO_NAME) {
|
||||
document.title = title;
|
||||
};
|
||||
|
||||
this.refreshCurrentSong = function (song, artist) {
|
||||
var currentSong = document.getElementById('currentSong');
|
||||
var currentArtist = document.getElementById('currentArtist');
|
||||
|
||||
if (song !== currentSong.innerHTML) {
|
||||
// Animate transition
|
||||
currentSong.className = 'animated flipInY text-uppercase';
|
||||
currentSong.innerHTML = song;
|
||||
|
||||
currentArtist.className = 'animated flipInY text-capitalize';
|
||||
currentArtist.innerHTML = artist;
|
||||
|
||||
// Refresh modal title
|
||||
document.getElementById('lyricsSong').innerHTML = song + ' - ' + artist;
|
||||
|
||||
// Remove animation classes
|
||||
setTimeout(function () {
|
||||
currentSong.className = 'text-uppercase';
|
||||
currentArtist.className = 'text-capitalize';
|
||||
}, 2000);
|
||||
}
|
||||
}
|
||||
|
||||
this.refreshHistoric = function (info, n) {
|
||||
var $historicDiv = document.querySelectorAll('#historicSong article');
|
||||
var $songName = document.querySelectorAll('#historicSong article .music-info .song');
|
||||
var $artistName = document.querySelectorAll('#historicSong article .music-info .artist');
|
||||
|
||||
// Default cover art
|
||||
var urlCoverArt = 'img/cover.png';
|
||||
|
||||
// Get cover art for song history
|
||||
var xhttp = new XMLHttpRequest();
|
||||
xhttp.onreadystatechange = function () {
|
||||
if (this.readyState === 4 && this.status === 200) {
|
||||
var data = JSON.parse(this.responseText);
|
||||
var artworking = data.results;
|
||||
var gotit = artworking.artwork;
|
||||
|
||||
document.querySelectorAll('#historicSong article .cover-historic')[n].style.backgroundImage = 'url(' + gotit + ')';
|
||||
}
|
||||
// Formating characters to UTF-8
|
||||
var music = info.song.replace(/'/g, '\'');
|
||||
var songHist = music.replace(/&/g, '&');
|
||||
|
||||
var artist = info.artist.replace(/'/g, '\'');
|
||||
var artistHist = artist.replace(/&/g, '&');
|
||||
|
||||
$songName[n].innerHTML = songHist;
|
||||
$artistName[n].innerHTML = artistHist;
|
||||
|
||||
// Add class for animation
|
||||
$historicDiv[n].classList.add('animated');
|
||||
$historicDiv[n].classList.add('slideInRight');
|
||||
}
|
||||
xhttp.open('GET', 'https://api.streamafrica.net/search.php?query=' + info.artist + ' ' + info.song);
|
||||
xhttp.send();
|
||||
|
||||
setTimeout(function () {
|
||||
for (var j = 0; j < 2; j++) {
|
||||
$historicDiv[j].classList.remove('animated');
|
||||
$historicDiv[j].classList.remove('slideInRight');
|
||||
}
|
||||
}, 2000);
|
||||
}
|
||||
|
||||
this.refreshCover = function (song = '', artist) {
|
||||
// Default cover art
|
||||
var urlCoverArt = 'img/cover.png';
|
||||
|
||||
var xhttp = new XMLHttpRequest();
|
||||
xhttp.onreadystatechange = function () {
|
||||
var coverArt = document.getElementById('currentCoverArt');
|
||||
var coverBackground = document.getElementById('bgCover');
|
||||
|
||||
// Get cover art URL on iTunes API
|
||||
if (this.readyState === 4 && this.status === 200) {
|
||||
var data = JSON.parse(this.responseText);
|
||||
var artworkUrl100 = data.results;
|
||||
var urlCoverArt = artworkUrl100.artwork;
|
||||
var urlCoverArt2 = artworkUrl100.artwork_cdn;
|
||||
|
||||
if (urlCoverArt == null){
|
||||
return urlCoverArt2;
|
||||
}
|
||||
|
||||
coverArt.style.backgroundImage = 'url(' + urlCoverArt + ')';
|
||||
coverArt.className = 'animated bounceInLeft';
|
||||
|
||||
coverBackground.style.backgroundImage = 'url(' + urlCoverArt + ')';
|
||||
|
||||
setTimeout(function () {
|
||||
coverArt.className = '';
|
||||
}, 2000);
|
||||
|
||||
if ('mediaSession' in navigator) {
|
||||
navigator.mediaSession.metadata = new MediaMetadata({
|
||||
title: song,
|
||||
artist: artist,
|
||||
artwork: [{
|
||||
src: urlCoverArt,
|
||||
sizes: '96x96',
|
||||
type: 'image/png'
|
||||
},
|
||||
{
|
||||
src: urlCoverArt,
|
||||
sizes: '128x128',
|
||||
type: 'image/png'
|
||||
},
|
||||
{
|
||||
src: urlCoverArt,
|
||||
sizes: '192x192',
|
||||
type: 'image/png'
|
||||
},
|
||||
{
|
||||
src: urlCoverArt,
|
||||
sizes: '256x256',
|
||||
type: 'image/png'
|
||||
},
|
||||
{
|
||||
src: urlCoverArt,
|
||||
sizes: '384x384',
|
||||
type: 'image/png'
|
||||
},
|
||||
{
|
||||
src: urlCoverArt,
|
||||
sizes: '512x512',
|
||||
type: 'image/png'
|
||||
}
|
||||
]
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
xhttp.open('GET', 'https://api.streamafrica.net/search.php?query=' + artist + ' ' + song);
|
||||
xhttp.send();
|
||||
}
|
||||
|
||||
this.changeVolumeIndicator = function (volume) {
|
||||
document.getElementById('volIndicator').innerHTML = volume;
|
||||
|
||||
if (typeof (Storage) !== 'undefined') {
|
||||
localStorage.setItem('volume', volume);
|
||||
}
|
||||
}
|
||||
|
||||
this.setVolume = function () {
|
||||
if (typeof (Storage) !== 'undefined') {
|
||||
var volumeLocalStorage = (!localStorage.getItem('volume')) ? 80 : localStorage.getItem('volume');
|
||||
document.getElementById('volume').value = volumeLocalStorage;
|
||||
document.getElementById('volIndicator').innerHTML = volumeLocalStorage;
|
||||
}
|
||||
}
|
||||
|
||||
this.refreshLyric = function (currentSong, currentArtist) {
|
||||
var xhttp = new XMLHttpRequest();
|
||||
xhttp.onreadystatechange = function () {
|
||||
if (this.readyState === 4 && this.status === 200) {
|
||||
var data = JSON.parse(this.responseText);
|
||||
|
||||
var openLyric = document.getElementsByClassName('lyrics')[0];
|
||||
|
||||
if (data.type === 'exact' || data.type === 'aprox') {
|
||||
var lyric = data.mus[0].text;
|
||||
|
||||
document.getElementById('lyric').innerHTML = lyric.replace(/\n/g, '<br />');
|
||||
openLyric.style.opacity = "1";
|
||||
openLyric.setAttribute('data-toggle', 'modal');
|
||||
} else {
|
||||
openLyric.style.opacity = "0.3";
|
||||
openLyric.removeAttribute('data-toggle');
|
||||
|
||||
var modalLyric = document.getElementById('modalLyrics');
|
||||
modalLyric.style.display = "none";
|
||||
modalLyric.setAttribute('aria-hidden', 'true');
|
||||
(document.getElementsByClassName('modal-backdrop')[0]) ? document.getElementsByClassName('modal-backdrop')[0].remove(): '';
|
||||
}
|
||||
} else {
|
||||
document.getElementsByClassName('lyrics')[0].style.opacity = "0.3";
|
||||
document.getElementsByClassName('lyrics')[0].removeAttribute('data-toggle');
|
||||
}
|
||||
}
|
||||
xhttp.open('GET', 'https://api.vagalume.com.br/search.php?apikey=' + API_KEY + '&art=' + currentArtist + '&mus=' + currentSong.toLowerCase(), true);
|
||||
xhttp.send()
|
||||
}
|
||||
}
|
||||
|
||||
var audio = new Audio(URL_STREAMING);
|
||||
|
||||
// Player control
|
||||
function Player() {
|
||||
this.play = function () {
|
||||
audio.play();
|
||||
|
||||
var defaultVolume = document.getElementById('volume').value;
|
||||
|
||||
if (typeof (Storage) !== 'undefined') {
|
||||
if (localStorage.getItem('volume') !== null) {
|
||||
audio.volume = intToDecimal(localStorage.getItem('volume'));
|
||||
} else {
|
||||
audio.volume = intToDecimal(defaultVolume);
|
||||
}
|
||||
} else {
|
||||
audio.volume = intToDecimal(defaultVolume);
|
||||
}
|
||||
document.getElementById('volIndicator').innerHTML = defaultVolume;
|
||||
};
|
||||
|
||||
this.pause = function () {
|
||||
audio.pause();
|
||||
};
|
||||
}
|
||||
|
||||
// On play, change the button to pause
|
||||
audio.onplay = function () {
|
||||
var botao = document.getElementById('playerButton');
|
||||
var bplay = document.getElementById('buttonPlay');
|
||||
if (botao.className === 'fa fa-play') {
|
||||
botao.className = 'fa fa-pause';
|
||||
bplay.firstChild.data = 'PAUSE';
|
||||
}
|
||||
}
|
||||
|
||||
// On pause, change the button to play
|
||||
audio.onpause = function () {
|
||||
var botao = document.getElementById('playerButton');
|
||||
var bplay = document.getElementById('buttonPlay');
|
||||
if (botao.className === 'fa fa-pause') {
|
||||
botao.className = 'fa fa-play';
|
||||
bplay.firstChild.data = 'PLAY';
|
||||
}
|
||||
}
|
||||
|
||||
// Unmute when volume changed
|
||||
audio.onvolumechange = function () {
|
||||
if (audio.volume > 0) {
|
||||
audio.muted = false;
|
||||
}
|
||||
}
|
||||
|
||||
audio.onerror = function () {
|
||||
var confirmacao = confirm('Stream Down / Network Error. \nClick OK to try again.');
|
||||
|
||||
if (confirmacao) {
|
||||
window.location.reload();
|
||||
}
|
||||
}
|
||||
|
||||
document.getElementById('volume').oninput = function () {
|
||||
audio.volume = intToDecimal(this.value);
|
||||
|
||||
var page = new Page();
|
||||
page.changeVolumeIndicator(this.value);
|
||||
}
|
||||
|
||||
function togglePlay() {
|
||||
if (!audio.paused) {
|
||||
audio.pause();
|
||||
} else {
|
||||
audio.load();
|
||||
audio.play();
|
||||
}
|
||||
}
|
||||
|
||||
function volumeUp() {
|
||||
var vol = audio.volume;
|
||||
if(audio) {
|
||||
if(audio.volume >= 0 && audio.volume < 1) {
|
||||
audio.volume = (vol + .01).toFixed(2);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function volumeDown() {
|
||||
var vol = audio.volume;
|
||||
if(audio) {
|
||||
if(audio.volume >= 0.01 && audio.volume <= 1) {
|
||||
audio.volume = (vol - .01).toFixed(2);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function mute() {
|
||||
if (!audio.muted) {
|
||||
document.getElementById('volIndicator').innerHTML = 0;
|
||||
document.getElementById('volume').value = 0;
|
||||
audio.volume = 0;
|
||||
audio.muted = true;
|
||||
} else {
|
||||
var localVolume = localStorage.getItem('volume');
|
||||
document.getElementById('volIndicator').innerHTML = localVolume;
|
||||
document.getElementById('volume').value = localVolume;
|
||||
audio.volume = intToDecimal(localVolume);
|
||||
audio.muted = false;
|
||||
}
|
||||
}
|
||||
|
||||
function getStreamingData() {
|
||||
var xhttp = new XMLHttpRequest();
|
||||
xhttp.onreadystatechange = function () {
|
||||
|
||||
if (this.readyState === 4 && this.status === 200) {
|
||||
|
||||
if(this.response.length === 0) {
|
||||
console.log('%cdebug', 'font-size: 22px')
|
||||
}
|
||||
|
||||
var data = JSON.parse(this.responseText);
|
||||
|
||||
var page = new Page();
|
||||
|
||||
// Formating characters to UTF-8
|
||||
let song = data.currentSong.replace(/'/g, '\'');
|
||||
currentSong = song.replace(/&/g, '&');
|
||||
|
||||
let artist = data.currentArtist.replace(/'/g, '\'');
|
||||
currentArtist = artist.replace(/&/g, '&');
|
||||
|
||||
// Change the title
|
||||
document.title = currentSong + ' - ' + currentArtist + ' | ' + RADIO_NAME;
|
||||
|
||||
if (document.getElementById('currentSong').innerHTML !== song) {
|
||||
page.refreshCover(currentSong, currentArtist);
|
||||
page.refreshCurrentSong(currentSong, currentArtist);
|
||||
page.refreshLyric(currentSong, currentArtist);
|
||||
|
||||
for (var i = 0; i < 2; i++) {
|
||||
page.refreshHistoric(data.songHistory[i], i);
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
var d = new Date();
|
||||
|
||||
// Requisition with timestamp to prevent cache on mobile devices
|
||||
xhttp.open('GET', 'https://api.streamafrica.net/zeno/index.php?z='+zenoid);
|
||||
xhttp.send();
|
||||
}
|
||||
|
||||
// Player control by keys
|
||||
document.addEventListener('keydown', function (k) {
|
||||
var k = k || window.event;
|
||||
var key = k.keyCode || k.which;
|
||||
|
||||
var slideVolume = document.getElementById('volume');
|
||||
|
||||
var page = new Page();
|
||||
|
||||
switch (key) {
|
||||
// Arrow up
|
||||
case 38:
|
||||
volumeUp();
|
||||
slideVolume.value = decimalToInt(audio.volume);
|
||||
page.changeVolumeIndicator(decimalToInt(audio.volume));
|
||||
break;
|
||||
// Arrow down
|
||||
case 40:
|
||||
volumeDown();
|
||||
slideVolume.value = decimalToInt(audio.volume);
|
||||
page.changeVolumeIndicator(decimalToInt(audio.volume));
|
||||
break;
|
||||
// Spacebar
|
||||
case 32:
|
||||
togglePlay();
|
||||
break;
|
||||
// P
|
||||
case 80:
|
||||
togglePlay();
|
||||
break;
|
||||
// M
|
||||
case 77:
|
||||
mute();
|
||||
break;
|
||||
// 0
|
||||
case 48:
|
||||
audio.volume = 0;
|
||||
slideVolume.value = 0;
|
||||
page.changeVolumeIndicator(0);
|
||||
break;
|
||||
// 0 numeric keyboard
|
||||
case 96:
|
||||
audio.volume = 0;
|
||||
slideVolume.value = 0;
|
||||
page.changeVolumeIndicator(0);
|
||||
break;
|
||||
// 1
|
||||
case 49:
|
||||
audio.volume = .1;
|
||||
slideVolume.value = 10;
|
||||
page.changeVolumeIndicator(10);
|
||||
break;
|
||||
// 1 numeric key
|
||||
case 97:
|
||||
audio.volume = .1;
|
||||
slideVolume.value = 10;
|
||||
page.changeVolumeIndicator(10);
|
||||
break;
|
||||
// 2
|
||||
case 50:
|
||||
audio.volume = .2;
|
||||
slideVolume.value = 20;
|
||||
page.changeVolumeIndicator(20);
|
||||
break;
|
||||
// 2 numeric key
|
||||
case 98:
|
||||
audio.volume = .2;
|
||||
slideVolume.value = 20;
|
||||
page.changeVolumeIndicator(20);
|
||||
break;
|
||||
// 3
|
||||
case 51:
|
||||
audio.volume = .3;
|
||||
slideVolume.value = 30;
|
||||
page.changeVolumeIndicator(30);
|
||||
break;
|
||||
// 3 numeric key
|
||||
case 99:
|
||||
audio.volume = .3;
|
||||
slideVolume.value = 30;
|
||||
page.changeVolumeIndicator(30);
|
||||
break;
|
||||
// 4
|
||||
case 52:
|
||||
audio.volume = .4;
|
||||
slideVolume.value = 40;
|
||||
page.changeVolumeIndicator(40);
|
||||
break;
|
||||
// 4 numeric key
|
||||
case 100:
|
||||
audio.volume = .4;
|
||||
slideVolume.value = 40;
|
||||
page.changeVolumeIndicator(40);
|
||||
break;
|
||||
// 5
|
||||
case 53:
|
||||
audio.volume = .5;
|
||||
slideVolume.value = 50;
|
||||
page.changeVolumeIndicator(50);
|
||||
break;
|
||||
// 5 numeric key
|
||||
case 101:
|
||||
audio.volume = .5;
|
||||
slideVolume.value = 50;
|
||||
page.changeVolumeIndicator(50);
|
||||
break;
|
||||
// 6
|
||||
case 54:
|
||||
audio.volume = .6;
|
||||
slideVolume.value = 60;
|
||||
page.changeVolumeIndicator(60);
|
||||
break;
|
||||
// 6 numeric key
|
||||
case 102:
|
||||
audio.volume = .6;
|
||||
slideVolume.value = 60;
|
||||
page.changeVolumeIndicator(60);
|
||||
break;
|
||||
// 7
|
||||
case 55:
|
||||
audio.volume = .7;
|
||||
slideVolume.value = 70;
|
||||
page.changeVolumeIndicator(70);
|
||||
break;
|
||||
// 7 numeric key
|
||||
case 103:
|
||||
audio.volume = .7;
|
||||
slideVolume.value = 70;
|
||||
page.changeVolumeIndicator(70);
|
||||
break;
|
||||
// 8
|
||||
case 56:
|
||||
audio.volume = .8;
|
||||
slideVolume.value = 80;
|
||||
page.changeVolumeIndicator(80);
|
||||
break;
|
||||
// 8 numeric key
|
||||
case 104:
|
||||
audio.volume = .8;
|
||||
slideVolume.value = 80;
|
||||
page.changeVolumeIndicator(80);
|
||||
break;
|
||||
// 9
|
||||
case 57:
|
||||
audio.volume = .9;
|
||||
slideVolume.value = 90;
|
||||
page.changeVolumeIndicator(90);
|
||||
break;
|
||||
// 9 numeric key
|
||||
case 105:
|
||||
audio.volume = .9;
|
||||
slideVolume.value = 90;
|
||||
page.changeVolumeIndicator(90);
|
||||
break;
|
||||
}
|
||||
});
|
||||
|
||||
function intToDecimal(vol) {
|
||||
return vol / 100;
|
||||
}
|
||||
|
||||
function decimalToInt(vol) {
|
||||
return vol * 100;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/* CREATIVO AGENCIA DE PUBLICIDAD */
|
||||
/* DERECHOS RESERVADOS 2021 */
|
||||
Referencia en una nueva incidencia
Block a user