Advertisement
  1. Code
  2. PhoneGap

Erstellen eines AudioPlayers mit PhoneGap: Anwendung-Logik

Scroll to top
Read Time: 11 min

German (Deutsch) translation by Alex Grigorovich (you can also view the original English article)

Dies ist der zweite Teil der Serie über Audero Audio Player. In diesem Artikel erstellen wir die Geschäftslogik unseres Players. Ich werde auch einige der Cordova-APIs erläutern, die im vorherigen Artikel vorgestellt wurden.


Serienübersicht


Player erstellen

In diesem Abschnitt zeige ich Ihnen die Klasse Player, mit der wir spielen, anhalten, zurückspulen und vorspulen können. Die Klasse stützt sich stark auf die Medien-API. Ohne seine Methoden wird unser Spieler völlig nutzlos sein. Zusätzlich zur Medien-API nutzt diese Klasse die alert()-Methode der Benachrichtigungs-API. Das Aussehen der Warnung variiert zwischen den Plattformen. Die meisten unterstützten Betriebssysteme verwenden ein natives Dialogfeld, andere, wie Bada 2.X, verwenden die Funktion alert() des klassischen Browsers, die weniger anpassbar ist. Die erstere Methode akzeptiert bis zu vier Parameter:

  1. message: Eine Zeichenfolge, die die anzuzeigende Nachricht enthält
  2. alertCallback: Ein Rückruf, der aufgerufen wird, wenn der Alarmdialog geschlossen wird
  3. title: Der Titel des Dialogfelds (der Standardwert ist "Alert").
  4. buttonName: Der im Dialogfeld enthaltene Text der Schaltfläche (der Standardwert ist "OK").

Beachten Sie, dass Windows Phone 7 den Namen der Schaltfläche ignoriert und immer die Standardeinstellung verwendet. Windows Phone 7 und 8 verfügen nicht über eine integrierte Browser-Warnung. Wenn Sie also alert('message'); verwenden möchten, müssen Sie window.alert = navigator.notification.alert zuweisen.

Nachdem ich die von Player verwendeten APIs erklärt habe, können wir uns ansehen, wie sie erstellt wurden. Wir haben drei Eigenschaften:

  • media: Der Verweis auf das aktuelle Soundobjekt
  • mediaTimer: Enthält eine eindeutige Intervall-ID, die mit der Funktion setInterval() erstellt wurde und an clearInterval() übergeben wird, um den Timer des Sounds zu stoppen
  • isPlaying: Eine Variable, die angibt, ob der aktuelle Sound abgespielt wird oder nicht. Zusätzlich zur Eigenschaft verfügt die Klasse über mehrere Methoden.

Die Methode initMedia() initialisiert die media-Eigenschaft mit einem Media objekt, das den vom Benutzer ausgewählten Ton darstellt. Letzterer wird im Fehlerfall über die Benachrichtigungs-API benachrichtigt. Das Ziel der Methoden playPause, stop() und seekPosition() sollte offensichtlich sein, also gehe ich weiter. Die Methoden resetLayout() und changePlayButton() sind sehr einfach. Sie werden verwendet, um das Layout des Players entsprechend der vom Benutzer ausgeführten Aktion zurückzusetzen oder zu aktualisieren. Die letzte verbleibende Methode ist updateSliderPosition(), die dem Zeitschieberegler ähnelt. Letzterer hat Null (den Anfang des Schiebereglers) als Standardwert für die aktuelle Position, der mit dem Attribut value="0" festgelegt wird. Dies muss während der Wiedergabe des Sounds entsprechend aktualisiert werden, um dem Benutzer ein visuelles Feedback zur verstrichenen Spielzeit zu geben.

Wir haben alle Details dieser Klasse aufgedeckt. Hier ist der Quellcode der Datei:


Verwalten der Audiodateien

Dieser Abschnitt zeigt die AppFile-Klasse, die zum Erstellen, Löschen und Laden der Sounds mithilfe der Web Storage-API verwendet wird. Diese API hat zwei Bereiche, Session und Local, aber Cordova verwendet letzteres. Alle Sounds werden in einem Element mit dem Titel "Dateien" gespeichert, wie Sie anhand der Eigenschaften von _tableName sehen können.

Bitte beachten Sie, dass diese API nur Basisdaten speichern kann. Daher verwenden wir das JSON-Format, um unseren Anforderungen an das Speichern von Objekten gerecht zu werden. JavaScript hat eine Klasse für dieses Format namens JSON. Es verwendet die Methoden parse(), um eine Zeichenfolge zu analysieren und die entsprechenden Daten neu zu erstellen, und stringify(), um das Objekt in eine Zeichenfolge zu konvertieren. Abschließend werde ich die Punktnotation der API nicht verwenden, da Windows Phone 7 sie nicht unterstützt. Daher verwenden wir die Methoden setItem() und getItem(), um die Kompatibilität für alle Geräte sicherzustellen.

Nachdem Sie einen Überblick darüber haben, wie die Daten gespeichert werden, sprechen wir über die Daten, die wir speichern müssen. Die einzigen Informationen, die wir für jeden gefundenen Sound benötigen, sind der Name (name-Eigenschaft) und ein absoluter Pfad (fullPath-Eigenschaft). Die AppFile-Klasse hat auch eine "Konstante" namens EXTENSIONS, in der wir die Erweiterungen festlegen, die für jede Datei getestet werden. Wenn sie übereinstimmen, wird die Datei von der Anwendung erfasst. Wir haben eine Methode zum Hinzufügen einer Datei (addFile()), eine Methode zum Löschen einer Datei (deleteFile()), eine Methode zum Löschen der gesamten Datenbank (deleteFiles()) und schließlich zwei Methoden zum Abrufen der Datei die Datenbank: getAppFiles() zum Abrufen aller Dateien und getAppFile() zum Abrufen nur einer. Die Klasse verfügt außerdem über vier Vergleichsmethoden, zwei statische (compare() und compareIgnoreCase()) und zwei nicht statische (compareTo() und compareToIgnoreCase()). Die letzte Methode ist die, mit der der Index einer bestimmten Datei, getIndex(), abgerufen wird. Mit der AppFile-Klasse können Sie alle grundlegenden Vorgänge ausführen, die Sie möglicherweise benötigen.

Der Code, der das implementiert, was wir besprochen haben, kann hier gelesen werden:


Die Utility-Klasse

Die Datei utility.js ist sehr kurz und leicht zu verstehen. Es gibt nur zwei Methoden. Eine wird verwendet, um Millisekunden in eine formatierte Zeichenfolge zu konvertieren, die im Player angezeigt wird, während die andere eine JavaScript-Implementierung der bekannten Java-Methode endsWith ist.

Hier ist die Quelle:


Alles zusammenfügen

In diesem Abschnitt wird die letzte JavaScript-Datei des Projekts, application.js, erläutert, die die Application-Klasse enthält. Ziel ist es, Ereignisse an die Elemente der App-Seite anzuhängen. Diese Ereignisse werden die Klassen nutzen, die wir bisher gesehen haben, und es dem Spieler ermöglichen, richtig zu arbeiten.

Der Code der abgebildeten Funktion ist unten aufgeführt:


Externe Links verwalten

Im vorherigen Teil dieser Serie habe ich erwähnt, dass ein interessanter Punkt auf der Credits-Seite das Attribut target="_blank" war, das auf die Links angewendet wurde. In diesem Abschnitt wird erläutert, warum die openLinksInApp()-Methode der Application-Klasse sinnvoll ist.

Es war einmal, als Cordova externe Links in derselben Cordova WebView öffnete, in der die Anwendung ausgeführt wurde. Wenn ein Link geöffnet war und der Benutzer auf die Schaltfläche "Zurück" klickte, wurde die zuletzt angezeigte Seite genau so angezeigt, wie sie war, bevor der Benutzer sie verlassen hatte. In der neueren Version hat sich dies geändert. Heutzutage werden die externen Links standardmäßig mit Cordova WebView geöffnet, wenn sich die URL in der Whitelist Ihrer App befindet. URLs, die nicht in Ihrer Whitelist enthalten sind, werden mithilfe der InAppBrowser-API geöffnet. Wenn Sie die Links nicht richtig verwalten oder wenn der Benutzer auf einen Link tippt, der im InAppBrowser oder im System angezeigt wird, und dann zurückkehrt, gehen alle Verbesserungen von jQuery Mobile verloren. Dieses Verhalten tritt auf, weil die CSS- und JavaScript-Dateien von der Hauptseite geladen werden und die folgenden mit AJAX geladen werden. Bevor wir die Lösung aufdecken, werfen wir einen Blick auf den InAppBrowser.

Der InAppBrowser ist ein Webbrowser, der in Ihrer App angezeigt wird, wenn Sie den Aufruf window.open verwenden.

Diese API verfügt über drei Methoden:

  • addEventListener(): Ermöglicht das Abhören von drei Ereignissen (loadstart, loadstop und exit) und Anhängen einer Funktion, die ausgeführt wird, sobald diese Ereignisse ausgelöst werden
  • removeEventListener(): Entfernt einen zuvor angehängten Listener.
  • close(): Zum Schließen des InAppBrowser-Fensters.

Also, was ist die Lösung? Das Ziel der openLinksInApp()-Funktion in Verbindung mit der in der Konfigurationsdatei angegebenen Whitelist besteht darin, die Klicks auf alle externen Links zu erfassen, die mithilfe des target="_blank"-Attributs erkannt wurden, und sie mit window.open()-Methode zu öffnen. Mit dieser Technik vermeiden wir das beschriebene Problem und unser Player wird weiterhin wie erwartet aussehen und arbeiten.


Nächster Teil

In der dritten und letzten Folge dieser Serie sehen wir die letzten verbleibenden Dateien, damit Sie das Projekt abschließen und damit herumspielen können.

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.