Skip to content

Instantly share code, notes, and snippets.

@lenivene
Last active February 13, 2023 10:42
Show Gist options
  • Save lenivene/afb11929910b2dc8cb02 to your computer and use it in GitHub Desktop.
Save lenivene/afb11929910b2dc8cb02 to your computer and use it in GitHub Desktop.
Aqui exibe os resultados ;)
if(window.jQuery)
$(document).ready(function(){
/**
* More informations
* URI: http://api.vagalume.com.br/docs/radios/
*/
var radio = "coca-cola-fm", // Your webradio here
api_key = ""; // Get key here http://auth.vagalume.com.br/settings/api/
if(typeof "undefined" != radio
&& typeof "undefined" != api_key){
var vagalume = $.getJSON( "http://api.vagalume.com.br/radio.php?type=mus&radio=" + radio + "&apikey=" + api_key, {
_: new Date().getTime() //
}, function( r ){
if( r.status == "success" &&
typeof "undefined" != r.mus){
/*
* Hide Text erro ;)
*/
$(".alert.alert-danger");
r.mus = r.mus.reverse();
$.each(r.mus, function(i, musica){
/*
* @var artist return name artist
* @var music return name sound
* @object picture return the image medium or small of artist
*
*/
var artist = musica.art.name;
var music = musica.name;
var picture = {
medium : musica.art.pic_medium,
small : musica.art.pic_medium
};
/*
* Insert music in list.
*/
$(".historyMusic").prepend(
'<li class="list-group-item">' + music + ' - ' + artist +'</li>'
).hide().slideDown(1000);
});
/*
* Remove the last music from list
*/
if( $(".historyMusic li").length > 10 ){
$('.historyMusic li:last-child').slideDown(500, function(){
$(this).remove();
});
}
}else{
$(".alert.alert-danger").text("Ocorreu algum erro!").slideDown();
}
});
/*
* Check vagalume for two minutes
* More minutes? Edit the number lower
* You have questions about "setInterval"? Check here http://www.w3schools.com/jsref/met_win_setinterval.asp
*/
// setInterval(vagalume, 12E4);
}
});
<!doctype html>
<html>
<head>
<meta charset=UTF-8>
<title>TOP 10 Músicas - API Vagalume</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">
<style>
li.list-group-item {counter-increment: bootstrap-counter;}
li.list-group-item::before {
content:counter(bootstrap-counter);
-webkit-border-radius:3px;
-moz-border-radius:3px;
background-color:#ddd;
border-radius:3px;
font-weight:bold;
margin-right:5px;
padding:3px 8px;
font-size:80%;
color:#7b7b7b;
}
</style>
<script src="http://code.jquery.com/jquery-1.12.0.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="api.vagalume.config.js"></script>
</head>
<body>
<div class="container">
<div class="starter-template"><h1>Músicas mais tocadas</h1>
<!--
A ordem exibida não é a mesma que é mostrada no site do Vagalume.
Mas por que isso? Não sei, na documentação não diz nada sobre isso.
Para mais informações acesse http://api.vagalume.com.br/docs/radios/
-->
<div class="alert alert-danger" role="alert" style="display: none">
<span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
<span class="sr-only">Error:</span>
</div>
<ol class="list-group historyMusic">
</ol>
</div>
<footer class="footer">
<p>&copy; 2016 - <a href="http://www.vagalume.com.br/" rel="nofollow">Vaga-lume Mídia Ltda</a> & <a href="https://github.com/lenivene" rel="nofollow">Lenivene</a>.</p>
</footer>
</div><!-- /.container -->
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment