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