Tutorial Amazing Audio Player

von: amazingaudioplayer.com

Ich beschreibe hier die Version 2.1

Ladet Euch zunächst die .exe Datei von amazingaudioplayer.com herunter. In der freien Version gibt es etliche Einschränkungen, nicht alle Skins stehen zur Verfügung, die deutsche Sprache kann nicht gewählt und der Link zur Anwendung darf nicht entfernt werden. Zum Ausprobieren ist es aber optimal.

Startet das installierte Programm und fügt unter “Audios” (1) Eure Audio Dateien ein.

Hier habe ich meine mp3s eingefügt, bei “Image” jeweils ein Bild für den einzelnen Song angegeben und bei “Ogg audio” meine bereits in das .ogg Format konvertierte mp3 Datei, dies ist für das Abspielen in HTML5 für den Firefox-Browser notwendig. Hier könnt Ihr Euer mp3 in das .ogg Format konvertieren.

... wählt nun das Design Eures Players unter “Skins” (2)

... nachdem Ihre alle Eure Einstellungen vorgenommen habt, klickt auf den Button “Publish” (3), wählt ein lokales Verzeichnis Eurer Wahl. Für jeden weiteren Player in Eurem Projekt erhöht Ihr unten bei “Audio player id:” die ID des Players.

... nach dem lokalen Publizieren wird Euch der Player in einer Vorschau angezeigt - aber Achtung, dieser funktioniert erst, nachdem Ihr die Startdatei des Players “ - hier “audioplayer.html” - aufruft.

Bitte öffnet diese Startdatei “audioplayer.html” mit z.B. Eurem Windows-Editor. Kopiert nun die Verlinkungen zu den Skripten und CSS-Dateien in den <BODY> Eurer Seite. Wenn Ihr bereits eine jQuery-Datei von NOF verwendet, wie z.B. bei NOF 2013 in der HTML-Ausgabe “HTML5”, dann lasst Ihr die Verlinkung auf die relativ alte jQuery-Datei des Skriptes weg (hier rot markiert). Die .js Dateien des Players müssen unter jenen von NOF liegen.

> Layout markieren > Fenster “Layout-Eigenschaften” > Button “HTML” > “Beginn des Haupttextes” (<BODY>)

<!-- Beginn Audio Verlinkungen am Beginn des BODY wegen js Dateien von NOF -->
<script src="audioplayerengine/jquery.js"></script>
<script src="audioplayerengine/amazingaudioplayer.js"></script>
<link rel="stylesheet" type="text/css" href="audioplayerengine/initaudioplayer-1.css">
<script src="audioplayerengine/initaudioplayer-1.js"></script>
<!-- Ende Audio Verlinkungen -->

... nun zieht Ihr Euch ein Textfeld auf und fügt diesen vom “Amazing Audio Player” generierten Code in den HTML-Code Editor des Textfeldes ein.

> Fenster “Text-Eigenschaften” > mittlere Button oben “Text” > Button “HTML

<!-- Insert to your webpage where you want to display the audio player -->
<div id="amazingaudioplayer-1" style="display:block;position:relative;width:320px;height:auto;margin:0px auto 0px;">
        <ul class="amazingaudioplayer-audios" style="display:none;">
            <li data-artist="Thomas Langen" data-title="St. Peters Song" data-album="MusicFillingStation.de" data-info="" data-image="audios/peonie-klein.jpg" data-duration="226">
                <div class="amazingaudioplayer-source" data-src="audios/Bannockburn.mp3" data-type="audio/mpeg" />
                <div class="amazingaudioplayer-source" data-src="audios/Bannockburn.ogg" data-type="audio/ogg" />
            </li>
            <li data-artist="MusicFillingStation.de" data-title="Afro" data-album="" data-info="" data-image="audios/loewe.jpg" data-duration="232">
                <div class="amazingaudioplayer-source" data-src="audios/afrika.mp3" data-type="audio/mpeg" />
                <div class="amazingaudioplayer-source" data-src="audios/afrika.ogg" data-type="audio/ogg" />
            </li>
            <li data-artist="MusicFillingStation.de" data-title="Citylights" data-album="" data-info="" data-image="audios/sonnenuntergang.jpg" data-duration="204">
                <div class="amazingaudioplayer-source" data-src="audios/citylights.mp3" data-type="audio/mpeg" />
                <div class="amazingaudioplayer-source" data-src="audios/citylights.ogg" data-type="audio/ogg" />
            </li>
        </ul>
        <div class="amazingaudioplayer-engine" style="display:none;"><a href="http://amazingaudioplayer.com" title="jquery music player">html5 music player</a></div>
</div>
<!-- End of body section HTML codes -->

Kopiert nun die Verzeichnisse:

  • audioplayerengine
  • audios

in das Verzeichnis, wo sich die Seite von NOF befindet (lokal und auf den Server), auf der Ihr diesen Player einbaut. In diesen Verzeichnissen hat
“Amazing Audio Player” nun alle Dateien abgelegt.

 

Im Prinzip funktioniert der Einbau ganz genauso, wie bei der Visual Lightbox. Guckt Euch auch mein Video dazu mal an.

Viel Erfolg!

Tutorials von Thomas Frei-Herrmann

diese Seite weiter empfehlen


Counter Statistik