Mobile Audio Player mit JavaScript-APIs und HTML5
Kommentare

Um einen einfach zu handhabenden Audio Player zu erstellen, der gleichzeitig für eine gute User Experience beim Nutzer sorgt, gibt es verschiedene Möglichkeiten, die sich je nachdem ob er für Desktop oder Mobile Devices genutzt werden soll, unterscheiden.

Gerade User von Mobile Devices haben oft andere Ansprüche an einen Audio Player – insbesondere was den Datenverbrauch und die Akku-Laufzeit angeht. Mit verschiedenen JavaScript-APIs und HTML5 lässt sich ein einfacher Audio Player erstellen, der die User Experience von Mobile-Usern verbessern soll. Aurelio De Rosa erklärt in einem Tutorial, wie man beim Erstellen vorgehen sollte.

Erstellen des JavaScript-API-basierten Audio Players

Zum Einsatz kommen beim Erstellen des mobilen JavaScript-betriebenen Audio Players verschiedene JavaScript-APIs wie etwa das Ambient-Light-, Proximity-, Battery-Status-, Web-Notifications- und Vibration-API. Dazu kommt zudem das native HTML5-audio-Element, mit dem die Audio-Datei abgespielt wird. Entwickelt wird der Audio-Player ohne Fallback-Lösungen; allerdings funktioniert er dank Progressive Enhancement auch, wenn ein Browser eines der verwendeten APIs nicht unterstützt.

Das HTML-Markup des Audio-Players ist simpel und umfasst neben dem audio-Element mit den aktivierten nativen Steuerungselementen sowohl ein link– als auch ein script-Element für die CSS- und die JavaScript-Datei. Mithilfe von CSS werden mehrere Regeln für das body-Element sowie drei unterschiedliche Themes – dark, normal und light – definiert.

Bevor es an die Implementierung der JavaScript-APIs geht, wird zunächst getestet, welche APIs der Browser der Wahl unterstützt. Hat man die Ergebnisse als Properties gespeichert und das audio-Element abgerufen, werden die einzelnen APIs nacheinander implementiert. Den genauen Vorgang erklärt Aurelio De Rosa ausführlicher und mit Code-Beispielen in seinem Tutorial. Der komplette Code steht auf GitHub zur Verfügung; dort gibt es auch eine Demo, die den fertigen Audio Player in Aktion zeigt

Aufmacherbild: Modern portable audio earphones isolated on wood background von Shutterstock / Urheberrecht: somchai rakin

Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -