Ajax albumart
Ik heb een script, waarmee ik de nummerinformatie en albumart van het draaiende nummer ophaal van de shoutcastserver. De uiteindelijke output word geregeld door een javascript/Ajax script.
Klik voor het script.
De code is:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
<html>
<head>
<meta http-equiv="Content-Type" content="text/html"; charset="utf-8">
<title>Widget</title>
<script type="text/javascript">
function capitalize(str) {
val = str;
newVal = '';
val = val.split(' ');
for(var c=0; c < val.length; c++) {
newVal += val[c].substring(0,1).toUpperCase() +
val[c].substring(1,val[c].length) + ' ';
}
return newVal;
}
//Check if it is nummeric (song number)
function is_numeric(input){
return !isNaN(input);
}
function loadXMLDoc()
{
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
var file=xmlhttp.responseText;
var info=file.split(",");
var luisteraars=info[0];
var unieke=info[1];
var hoogstluisteraars = info[2];
var maxluisteraars = info [3];
var kbps = info [5];
var nummer=info [6];
songarray = nummer.split("-");
if (is_numeric(songarray [0])){
var artist=songarray [1];
var song=songarray[2];
}else{
var artist=songarray [0];
var song=songarray[1];
}
numcheck = artist.split(" ");
if (is_numeric(numcheck[0])){
artist = artist.replace(numcheck[0],"");
}
artist = capitalize(artist);
song = capitalize(song);
var url="albumart/albumart.php?song="+song+"&artist="+artist;
var wannabealbum="<img width='70' height='70' src='"+url+"' />";
if(document.getElementById("albumart").innerHTML!=wannabealbum){
document.getElementById("albumart").innerHTML=wannabealbum;
}else{
//d
}
document.getElementById("artist").innerHTML=artist;
document.getElementById("song").innerHTML=song;
document.getElementById("listeners").innerHTML="Huidige luisteraars: "+luisteraars;
reload_ext();
}
}
xmlhttp.open("GET","stats.php",true);
xmlhttp.send();
}
function reload_ext(){
setTimeout('loadXMLDoc()',3000);
}
loadXMLDoc();
</script>
</head>
<body bgcolor="#FFFFFF">
<table border="0" width="340"
background="shoutcastbg.jpg">
<tr>
<td width="25%"><div id="albumart">Albumart laden...</div></td>
<td width="75%"><font color="#FFFFFF" face="Arial"><strong><div id=artist>Artiest word geladen</div><br>
</strong></font><font color="#FFFFFF" size="2"
face="Arial"><div id=song>Nummer word geladen</div></font><br>
<font color="#FFFFFF" size="1"
face="Arial"><div id=listeners>Aantal luisteraars word geladen</div></font>
</td>
</tr>
</table>
</body>
</html>
<head>
<meta http-equiv="Content-Type" content="text/html"; charset="utf-8">
<title>Widget</title>
<script type="text/javascript">
function capitalize(str) {
val = str;
newVal = '';
val = val.split(' ');
for(var c=0; c < val.length; c++) {
newVal += val[c].substring(0,1).toUpperCase() +
val[c].substring(1,val[c].length) + ' ';
}
return newVal;
}
//Check if it is nummeric (song number)
function is_numeric(input){
return !isNaN(input);
}
function loadXMLDoc()
{
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
var file=xmlhttp.responseText;
var info=file.split(",");
var luisteraars=info[0];
var unieke=info[1];
var hoogstluisteraars = info[2];
var maxluisteraars = info [3];
var kbps = info [5];
var nummer=info [6];
songarray = nummer.split("-");
if (is_numeric(songarray [0])){
var artist=songarray [1];
var song=songarray[2];
}else{
var artist=songarray [0];
var song=songarray[1];
}
numcheck = artist.split(" ");
if (is_numeric(numcheck[0])){
artist = artist.replace(numcheck[0],"");
}
artist = capitalize(artist);
song = capitalize(song);
var url="albumart/albumart.php?song="+song+"&artist="+artist;
var wannabealbum="<img width='70' height='70' src='"+url+"' />";
if(document.getElementById("albumart").innerHTML!=wannabealbum){
document.getElementById("albumart").innerHTML=wannabealbum;
}else{
//d
}
document.getElementById("artist").innerHTML=artist;
document.getElementById("song").innerHTML=song;
document.getElementById("listeners").innerHTML="Huidige luisteraars: "+luisteraars;
reload_ext();
}
}
xmlhttp.open("GET","stats.php",true);
xmlhttp.send();
}
function reload_ext(){
setTimeout('loadXMLDoc()',3000);
}
loadXMLDoc();
</script>
</head>
<body bgcolor="#FFFFFF">
<table border="0" width="340"
background="shoutcastbg.jpg">
<tr>
<td width="25%"><div id="albumart">Albumart laden...</div></td>
<td width="75%"><font color="#FFFFFF" face="Arial"><strong><div id=artist>Artiest word geladen</div><br>
</strong></font><font color="#FFFFFF" size="2"
face="Arial"><div id=song>Nummer word geladen</div></font><br>
<font color="#FFFFFF" size="1"
face="Arial"><div id=listeners>Aantal luisteraars word geladen</div></font>
</td>
</tr>
</table>
</body>
</html>
Het probleem
Het plaatje word ook vernieuwd na de shoutcastopdracht. Dat zorgt ervoor dat het plaatje knippert. het vernieuwen is wel nodig als er een nieuw nummer gaat draaien.
Wat kan ik er dus aan doen om te verkomen dat het plaatje gaat knipperen?
Groetjes Max
Gewijzigd op 15/12/2011 13:51:15 door Jaron T
Jaron T op 15/12/2011 13:50:50:
een tijdelijke ajax-loader image weergeven (deze moet je wel pre-loaden natuurlijk anders krijg je hetzelfde effect). Zodra de afbeelding klaar is met laden (bijvoorbeeld met een $.get(), die heeft een event zodra hij klaar is.. kan je een nette $.fadeIn() doen).
Ik bedoelde eigenlijk iets anders...
Het plaatje mag wel knipperen tussen de verandering van afbeelding, maar bij 2 ajaxoproepen kan het ook dat het plaatje hetzelfde blijft. Omdat de ajax refresh om de 10 seconden komt en het liedje 2 minuten duurt, krijg je het effect dat de afbeelding knippert. Hoe kan ik dat voorkomen?
Quote:
Code (php)
1
2
3
4
5
6
7
2
3
4
5
6
7
var wannabealbum="<img width='70' height='70' src='"+url+"' />";
if(document.getElementById("albumart").innerHTML!=wannabealbum){
document.getElementById("albumart").innerHTML=wannabealbum;
}else{
//d
}
if(document.getElementById("albumart").innerHTML!=wannabealbum){
document.getElementById("albumart").innerHTML=wannabealbum;
}else{
//d
}
Gewijzigd op 15/12/2011 18:37:13 door Max van den Bosch