Was ist LUNA AUDIO PLAYER?
Audio verdient einen festen Platz.
Ein einzelner Play-Button reicht für eine ganze Audiosammlung oft nicht aus.
LUNA AUDIO PLAYER ergänzt die Wiedergabe um eine Playlist-Übersicht, Titelinformationen und eine anpassbare Darstellung. Besucher können zwischen Sammlungen wechseln und einzelne Titel auswählen.
Das eignet sich für Musikportfolios, Podcast-Websites und Seiten mit Hörproben. Die Audiodateien bleiben bei der jeweils eingerichteten Quelle; der Player übernimmt ihre Darstellung und Wiedergabe auf Ihrer Website.
Was der Player leistet
Ein HTML5 Audioplayer. Mehr als Wiedergabe.
Von der Titelauswahl bis zur Darstellung, die Funktionen im Überblick.
01
Playlists im Überblick.
Mehrere Sammlungen in einer Oberfläche. Die aktuelle Titelliste lässt sich nach Interpret, Titel oder angegebener Dauer auf- und absteigend sortieren.
Playlist-Übersicht
Sortierung
02
Wiedergabe steuern.
Starten, pausieren, Titel wechseln und zur gewünschten Stelle springen. Wiederholung und Zufallswiedergabe ergänzen die Navigation durch eine Playlist.
Fortschrittsanzeige
Repeat & Shuffle
03
Mehr zum Titel zeigen.
Interpret, Titel, Cover und Dauer lassen sich in der Playlist hinterlegen. Fehlen Interpret und Titel, versucht der Player, eingebettete ID3-Metadaten einschließlich Cover auszulesen.
ID3-Metadaten
Coverbilder
04
Zur Website passend.
Hintergrund, Schrift und Akzentfarben sind einstellbar. Der Player passt seine Anordnung an die verfügbare Breite an und bietet eine große sowie eine kompakte Ansicht.
Responsive Anordnung
Kompaktansicht
05
Klang visualisieren.
Acht Visualizer-Darstellungen und eine ausgeschaltete Ansicht stehen zur Verfügung. Der Modus nutzt echte Frequenzdaten oder eine simulierte Animation – abhängig von Einstellung und Browser.
Web Audio API
Farbe & Deckkraft
06
Titel gezielt verlinken.
Optionales Deep Linking bildet Playlist und Titel in der URL ab. Für HTML- und XML-Einträge können außerdem Download, Teilen und ein externer Kauflink hinterlegt werden.
Direktlinks
Optionale Titelaktionen
Unterstützte Audioquellen
Ihre Inhalte. Fünf Wege hinein.
Audio kann direkt auf der Seite definiert, als Playlist geladen oder aus einem passenden Feed übernommen werden.
Die Quellen werden beim Laden im Browser verarbeitet. Ein Upload- oder Redaktionssystem gehört nicht zum Player.
UL
HTML-Listen
Titel direkt im Seitenquelltext pflegen. Dateiadresse und Zusatzinformationen werden über data-*-Attribute übergeben.
XML
XML-Playlists
Eine separate XML-Datei mit ul- und li-Einträgen laden. So bleibt die Titelliste vom Seitenaufbau getrennt.
RSS
RSS-Podcasts
Feed-Einträge mit einem Audio-Enclosure vom Typ audio/mpeg übernehmen. Titel, Autor, Dauer und Bild werden aus passenden Feed-Feldern gelesen.
PHP
MP3-Ordner
Die PHP-Hilfsdatei durchsucht einen lesbaren Serverordner einschließlich Unterordnern nach MP3-Dateien und liefert daraus eine Titelliste.
URL
Einzelne Audiodateien
Eine direkt erreichbare Audiodatei einbinden. Im Einzeldatei-Modus werden die Playlist-Navigation und Shuffle deaktiviert.
Von der Audioquelle auf Ihre Website.
So funktioniert die Einbindung
01
Quelle festlegen
Audiodateien, eine Playlist oder einen RSS-Feed bereitstellen. Titelinformationen und Cover ergänzen, soweit sie in der Quelle vorhanden sind.
02
Player konfigurieren
Das Player-Script einbinden, einen Player-Bereich anlegen und Quelle, passenden Token sowie Darstellung in JavaScript einstellen.
03
Im Browser abspielen
Der Player lädt die gewählte Quelle und stellt die Titel bereit. Besucher starten die Wiedergabe und wechseln innerhalb der eingerichteten Sammlung.
Auch über eigene Bedienelemente steuerbar.
Die JavaScript-API stellt unter anderem play(), pause(), stepforward() und den Wechsel zwischen Player-Ansichten bereit. Damit lässt sich der Player mit eigenen Schaltflächen auf der Website verbinden.
Was die Einbindung braucht.
Technik & Rahmenbedingungen
Die technische Grundlage
Browser & JavaScript
HTML5-Audio und Javascript. Für echte Frequenzvisualisierung zusätzlich die Web Audio API.
Passender Token
Der Player prüft einen Token gegen die aktuelle Seitenadresse. Die Einbindung muss dazu passend eingerichtet werden.
Erreichbare Quellen
Audio, Cover und Playlists müssen erreichbar sein. Bei fremden Domains können CORS-Freigaben oder ein passend eingerichteter Proxy nötig sein.
PHP für MP3-Ordner
Die Ordnerquelle benötigt die PHP-Hilfsdatei und einen lesbaren Serverpfad. Der Zugriff auf erlaubte Ordner muss serverseitig abgesichert werden. Andere Quelltypen benötigen diese Hilfsdatei nicht.
Gut zu wissen, bevor es losgeht.
Autoplay bleibt eine Browserentscheidung.
Die Option ist vorhanden; ein automatischer Start ist nicht garantiert.
Safari und iOS nutzen simulierte Visualisierung.
Die vorliegende Version schaltet dort den echten Analyzer um. Unter iOS wird die eigene Lautstärkeregelung ausgeblendet.
Quellen gezielt prüfen.
RSS wird für audio/mpeg verarbeitet. SoundCloud ist im Beispiel genannt, im Player aber nicht als Quelle implementiert.
Kein fertiges WordPress-Plugin.
Es gibt keine WordPress-Administration oder Shortcodes. Eine Verwendung in WordPress erfordert eine individuelle Einbindung.
Welche Daten werden verarbeitet?
Der Player lädt Audiodateien, Playlist-Daten und Cover. Fehlende Titelinformationen können aus Dateimetadaten ergänzt werden. Im vorhandenen Player-Code gibt es keine eigene Datenbank oder Hörerstatistik. Er lädt jedoch Google Fonts und gegebenenfalls externe Medien; beim Teilen öffnet er Dienste Dritter. Die verwendeten Quellen und die Einbindung müssen deshalb projektspezifisch geprüft werden.
Ein Musikportfolio, ein Podcast oder eine Sammlung von Hörproben: Der Player lässt sich in ein passendes Webprojekt einbinden.
Sprechen Sie mit Sodah über Ihre Inhalte und die vorhandene Website. Gemeinsam lässt sich klären, welche Quelle, Darstellung und technische Einbindung für Ihr Projekt sinnvoll sind.
Häufige Fragen
Gut zu wissen.
Konkrete Antworten zu Funktionen, Quellen und Einbindung.
Inhalt
Fragen Sie Ihre KI nach Sodah Webdesign
Verlassen Sie sich nicht nur auf unser Wort. Fragen Sie Ihre bevorzugte KI, was sie über Sodah Webdesign denkt.
Wählen Sie den klugen Weg
Wir arbeiten direkt mit Geschäftsführern, Marketingverantwortlichen und Projektleitern zusammen. Dabei integrieren wir uns in bestehende Abläufe und übernehmen die technische sowie inhaltliche Umsetzung der anstehenden Aufgaben.
