Inhaltsverzeichnis
AzuraCast - API
Bild des Musikstücks
<?php
$station = "1"; //ID der Station bei Azuracast
$json_station = file_get_contents("https://demo.azuracast.com/api/nowplaying/".$station);
$obj_station = json_decode($json_station);
$live = $obj_station->live->streamer_name;
$pls = $obj_station->now_playing->playlist;
?>
<img src="//Pfad zum /img/<?php if(empty($live)) {echo $pls;}else{echo $live;}
;?>.jpg" alt="<?php if(empty($live)) {echo $pls;}else{echo $live;}
?>" style="width:250; height:auto;"><br>
<?php
$station = "1"; //ID der Station bei Azuracast
$json_station = file_get_contents("https://demo.azuracast.com/api/nowplaying/".$station);
$obj_station = json_decode($json_station);
$live = $obj_station->live->streamer_name;
$pls = $obj_station->now_playing->playlist;
?>
Name des Künstlers
<?php
$station = "1"; //ID der Station bei Azuracast
$json_station = file_get_contents("https://demo.azuracast.com/api/nowplaying/".$station);
$obj_station = json_decode($json_station);
$live = $obj_station->live->streamer_name;
$pls = $obj_station->now_playing->playlist;
?><?php if(empty($live)) {echo $pls;}else{echo $live;}
?>
Aktuell laufender Titel / Now playing
<?php
$station = "1";
$json_station = file_get_contents("https://demo.azuracast.com/api/nowplaying/".$station);
$obj_station = json_decode($json_station);
echo "Aktuell läuft: " . $obj_station->now_playing->song->text
?>
Nächster Titel
<?php
$station = "1";
$json_station = file_get_contents("https://demo.azuracast.com/api/nowplaying/".$station);
$obj_station = json_decode($json_station);
echo "Als nächstes läuft: " . $obj_station->playing_next->song->text
?>
Beispiel
Alle Daten die man benötigt sind bereits im Station-Response. In diesem Beispiel nehmen wir einfach die Daten daraus und wiederholen den Aufruf alle 1,5 Sekunden um aktuell zu bleiben. Das Beispiel besteht aus zwei Dateien. Einem HTML-File namens index.html. Dieses definiert nur eine sehr grobe Grundstruktur in der die Daten dargestellt werden. Das zweite File heißt azuracastbeispiel.js und definiert die Logik, die die Daten abruft und darstellt.
index.html
<!DOCTYPE html>
<html lang="de" >
<meta charset="UTF-8">
<head>
<title>Azuracast Beispiel</title>
</head>
<body>
<div>
<h2 id="streamer"></h2>
</div>
<table border="2">
<tr>
<th>Letztes Lied</th>
<th>Aktuelles Lied</th>
<th>Nächstes Lied</th>
</tr>
<tr>
<td id="prev-song"></td>
<td id="current-song"></td>
<td id="next-song"></td>
</tr>
</table>
<script type="application/javascript" src="azuracastbeispiel.js"></script>
</body>
</html>
Die Grundstruktur zeigt oben den Namen des DJs an und das Bild. Das Bild hängt vom Namen ab und muss noch den passenden Pfad bekommen. (Code dazu ist in der Funktion updateStreamer). Das Javascript-File definiert die Parameter, ruft die Daten auf und definiert einen Intervall der die Daten aktualisiert und neu in die Datei schreibt.
azuracastbeispiel.js
var serviceUrl = 'https://demo.azuracast.com/api/';
var stationID = '1';
var apiKey = '';
var updateIntervalMs = 1500;
updateDisplay();
setInterval(updateDisplay, updateIntervalMs);
function updateDisplay() {
getData(stationID, serviceUrl, apiKey)
.then(function (resp) {
var streamer = resp.live
var currentSong = resp.now_playing.song;
var songHistory = resp.song_history || [];
var previousSong = !!songHistory[0] ? songHistory[0].song : null;
var nextSong = resp.playing_next.song;
updateStreamer('#streamer', streamer);
updateSong('#prev-song', previousSong);
updateSong('#current-song', currentSong);
updateSong('#next-song', nextSong);
})
.catch(function(err) {
console.error(err);
});
}
function getData(stationID, serviceUrl, apiKey) {
var httpReqParams = {
method: 'GET',
headers: {
'Content-Type' : 'application/json'
},
redirect: 'follow'
};
var targetUrl = serviceUrl + 'nowplaying/' + stationID;
if (!!apiKey) {
headers['X-API-Key'] = apiKey;
}
return fetch(targetUrl, httpReqParams)
.then(function(resp) {
return resp.json();
});
}
function updateStreamer(selector, data) {
var $element = document.querySelector(selector);
$element.innerHTML = '';
if (!!data) {
var $nameLabel = document.createElement('p');
$nameLabel.innerText = 'DJ: ' + data.streamer_name;
var $img = document.createElement('img');
$img.src = '<Pfad zum Img>/' + data.streamer_name;
$img.style.width = '120px';
$img.style.height = '120px';
$element.appendChild($img);
$element.appendChild($nameLabel);
} else {
var $errorLabel = document.createElement('p');
$errorLabel.innerText = 'Konnte keine Daten finden';
$element.appendChild($errorLabel);
}
}
function updateSong(selector, data) {
var $element = document.querySelector(selector);
$element.innerHTML = '';
if (!!data) {
var $img = document.createElement('img');
$img.src = data.art;
$img.style.width = '120px';
$img.style.height = '120px';
var $songText = document.createElement('p');
$songText.innerText = data.text;
$element.appendChild($img);
$element.appendChild($songText);
}
}
Einfach den Code von index.html in eine HTML-Datei kopieren und index.html nennen. Den Code von azuracastbeispiel.js in eine Datei kopieren und die Datei azuracastbeispiel.js nennen. Sicher stellen dass beide Dateien im selben Verzeichnis sind.
