Wie eine Google Flutter App sprechen lernt

von

Um eine besonders benutzerfreundliche App umzusetzen, reicht es manchmal nicht aus, sich nur auf das Design und Layout der Benutzeroberfläche zu konzentrieren. Die Ausgabe von Signalen und Sprache kann von ganz entscheidendem Vorteil sein.

Nachfolgend beschreibe ich, wie ich in meinem aktuellen App Projekt basierend auf Google Flutter mit Hilfe von 2 Plugins sowohl Audio-Signale als auch Sprache ausgeben kann – für eine Fitness App sehr nützlich!

Zu Beginn erläutere ich, wie man mit dem Plugin assets_audio_player Audio zu einer Flutter-App hinzufügen kann. Im zweiten Teil des Blogpost werde ich das Plugin flutter_tts anhand eines Beispiels vorstellen, welches es ermöglicht Buchstaben, Zeichen oder Zahlen vorlesen zu lassen.

In der Fitness-App kann man zum einen verschiedene Trainingseinheiten konfigurieren und zum anderen diese Übungen dann mit Unterstützung der App ausführen. Bei der Konfiguration liegt der Fokus auf der Benennung von Übungen, dem Einstellen verschiedener Zeiten der Übungen und der Festlegung der Reihenfolge. Der assets_audio_player wird in der Fitness App benötigt, um zum Beispiel einen Beep Sound bei einem Wechsel zur nächsten Übung oder Audio im Hintergrund abspielen zu lassen. Das flutter_tts Plugin verwende ich zum Vorlesen der Namen der Übungen beim jeweiligen Start der Übung.

Ein kurzer Ausschnitt der Fitness-App ist in dem unten stehenden Video zu sehen. Der Einsatz der beiden Plugins ist ab der 30. Sekunde des Videos zu hören.

assets_audio_player

Durch den assets_audio_player ist es möglich, Audio in Assets-Dateien abzuspeichern und direkt aus Flutter abspielen zu lassen. Alternativ können Audiodateien aus dem Netzwerk wiedergegeben werden, indem man deren URL, Radio/Livestream oder lokale Dateien verwendet. Darüber hinaus können Bluetooth-Aktionen verarbeitet werden oder eine zum Songtitel passende Anzeige erzeugt werden, wie man es aus verschiedenen Musikplayern kennt.

Vor der Implementierung des Plugins sollte man überprüfen, ob das Flutter Projekt mit Swift Support gebaut worden ist. Falls das nicht der Fall ist, sollte man die Swift Unterstützung nachträglich aktivieren.

Pubspec

In der pubspec.yaml Datei ist es erforderlich, alle Abhängigkeiten zu definieren, welche bei der Implementierung im lib Ordner Verwendung finden. Somit muss man die pubspec.yaml Datei um eine der zwei Varianten erweitern:

  • Variante 1 - Dependencies erweitern durch:
    dependencies:
    	assets_audio_player: ^3.0.3+1
  • Variante 2 - Git repository durch URL laden:
    assets_audio_player:
    git:
    url: https://github.com/florent37/Flutter-AssetsAudioPlayer.git
    ref: master
    
    ref can be latest commit id.

Import von Asset Files

Um eigene Audio Dateien zu seinem Projekt hinzuzufügen, muss man folgende Schritte durchführen:

  1. Anlegen eines Unterverzeichnisses im Assets Directory für die Audio Dateien (bspw. mit dem Namen „audios“)
  2. Abspeichern der Audio Dateien in dem neu angelegten Verzeichnis
  3. Hinzufügen des Verzeichnisses für Audio Dateien in der Konfigurationsdatei pubspec.yaml wie folgt:
    flutter:
      assets:
        - assets/audios/

Abspielen von Audio

Folgende Schritte müssen befolgt werden, um Audio abspielen lassen zu können:

  1. Deklarieren des AssetsAudioPlayer:
    final assetsAudioPlayer = AssetsAudioPlayer();
  1. Um Audio abspielen zu lassen, muss die initState() Methode erweitert werden, sodass Lieder oder Sounds für jeden neuen State geöffnet werden können. Folgende Codezeilen dienen dem Öffnen von Audiodateien aus
    • den Assets Files von Flutter:
      @override
        void initState() {
          assetsAudioPlayer.open(Audio('assets/audios/beepSound.mp3'),
          );
          super.initState();
        }
    • dem Netzwerk:
      try {
          await assetsAudioPlayer.open(
              Audio.network("http://www.mysite.com/myMp3file.mp3"),
          );
      } catch (t) {
          //mp3 unreachable
      }
    • einem Livestream oder Radio:
      try {
          await assetsAudioPlayer.open(
              Audio.liveStream(MY_LIVESTREAM_URL),
          );
      } catch (t) {
          //stream unreachable
      }
    • den Files:
      assetsAudioPlayer.open(
          Audio.file(FILE_URI),
      );
  1. Um den Song im Anschluss abspielen zu lassen, hat man folgende zwei Möglichkeiten:
    • Setzt man wie in dem unten stehenden Beispiel autoStart: true, wird der Song direkt abgespielt, sobald er durch die initState() Methode geöffnet wurde.
      assetsAudioPlayer.open(Audio('assets/audios/beepSound.mp3'),
            autoStart: true,
          );
    • Möchte man den Song zu einem späteren Zeitpunkt abspielen, muss man autoStart: false setzen. Dann hat man die Möglichkeit, den Song durch folgende Befehle zu einem beliebigen Zeitpunkt zu stoppen oder zu starten.
      assetsAudioPlayer.playOrPause();
      assetsAudioPlayer.play();
      assetsAudioPlayer.pause();

Fazit assets_audio_player

Das assets_audio_player Plugin ist ein sehr einfach gehaltenes Plugin, womit man sehr schnell aus verschiedenen Quellen Audio abspielen lassen kann. In meinem Fall war dies ausreichend, da ich nur einen Sound abspielen lassen und stoppen muss. Darüber hinaus hat das Plugin allerdings weitaus mehr Konfigurationsmöglichkeiten, welche vor allem genutzt werden können, wenn man einen Musikplayer entwickeln möchte.

flutter_tts

Das flutter_tts Plugin ermöglicht es, Text von einer Navigationsstimme vorlesen zu lassen. Dabei werden viele Konfigurationsmöglichkeiten geboten, wie zum Beispiel das Einstellen der Sprache, die Geschwindigkeit der Sprache, die Lautstärke oder die Tonhöhe.

Pubspec

In der pubspec.yaml Datei ist es erforderlich alle Abhängigkeiten zu definieren, welche bei der Implementierung im lib Ordner Verwendung finden. Somit muss man die dependencies in der pubspec.yaml Datei um folgende Zeile erweitern:

dependencies:
  flutter_tts: ^3.0.0

Zu Beachten

Zwei Dinge müssen bei der Einbindung des Plugins beachtet werden.

  • Die Android SDK Version muss 21 oder höher sein. Um dies zu überprüfen oder festzulegen, muss man die build.gradle Datei öffnen: android/app/build.gradle. Dort ändert man folgenden Parameter:
    minSdkVersion 21
  • Bei IOS gibt es ein bekanntes Problem bei der Integration von Plugins, die in einem Flutter Projekt Swift verwenden, welches mit dem Objective-C Template erstellt wurde. Dazu gibt es folgende Lösungen: https://github.com/flutter/flutter/issues/16049.

Text vorlesen lassen

Folgende Schritte müssen durchgeführt werden, um Text von einer Navigationsstimme vorlesen zu lassen:

  1. Deklarieren von FlutterTts:
    FlutterTts flutterTts = FlutterTts();
  1. Definieren einer speak() Methode. Innerhalb dieser Methode wird der übergebende Text vorgelesen und es können weitere Konfigurationen getätigt werden. Die Methode kann wie folgt aussehen:
    Future speak(String name)async{
        await flutterTts.setLanguage('de-DE');
        await flutterTts.setPitch(1);
        await flutterTts.setSpeechRate(1);
        await flutterTts.speak(name);
      }
  1. Stoppen und starten der Sprachausgabe durch folgende Befehle:
    await flutterTts.speak('Text');
    await flutterTts.stop();
  1. Konfigurieren der Ausgabe. Es gibt zahlreiche Konfigurationsmöglichkeiten, welche genutzt werden können, um die Sprachausgabe des Textes zu verändern. Die wichtigsten Einstellungen sind folgende:
    • Einstellen der Sprache:
      await flutterTts.setLanguage('de-DE');
    • Festlegung der Tonhöhe:
      await flutterTts.setPitch(1);
    • Einstellen der Geschwindigkeit der Sprachausgabe:
      await flutterTts.setSpeechRate(1);
    • Einstellen der Lautstärke:
      await flutterTts.setVolume(30);

Fazit flutter_tts

Das flutter_tts Plugin ist sehr einfach gehalten und somit sehr schnell und einfach verwendbar. Ich hätte nicht gedacht, dass es so schnell möglich ist, eine „text to speech“ Ausgabe zu implementieren. In meinem Projekt ist die Anwendung des Plugins auf die Ausgabe der Namen der Übungen beschränkt, wodurch die Implementierung sehr übersichtlich und leicht verständlich ist. Flutter_tts bietet aber auch Handler Methoden, wodurch eine genauere Kontrolle der Sprachausgabe möglich ist. Die Nutzung von Handlern wäre beispielweise hilfreich, wenn mehrere verschiedene Texte – wie beispielsweise der Übungsname gefolgt von einer kurzen Erläuterung der Übung - hintereinander ausgegeben werden müssten.

Kategorien: DartFlutter

Zurück