schlingel/AzuraCastBeispiel.asciidoc

## AzuraCastBeispiel.asciidoc

      
    Raw
  

              AzuraCastBeispiel.asciidoc
            
          
    Azura Beispiel Code


Alle Daten die man benötigt sind schon im Station-Response drinnen. 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 azura_beispiel.js und definiert die Logik, die die Daten abruft und darstellt.


index.html

<!DOCTYPE html>
<html lang="de" >
    <meta charset="UTF-8">
    <head>
        <title>Simples Azura 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="azura_beispiel.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 Interval der die Daten aktualisiert und neu in die Datei schreibt.


azura_beispiel.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 azura_beispiel.js in eine Datei kopieren und die Datei azura_beispiel.js nennen. Sicher stellen, dass beide Dateien im selben Verzeichnis sind. Dann sollte es klappen.