5.2 Audioplayer-Paket integrieren
Nachdem wir nun gesehen haben, wie ein einfaches Paket wie english_words funktioniert und wie es heruntergeladen und in ein Flutter-Projekt integriert wird, können wir nun ein Paket zum Abspielen von Audiodateien einbinden. Wir besuchen also wieder die Webseite https://pub.dev/flutter/packages und suchen dort nach audio player. Wir entscheiden uns für das Paket mit der höchsten Anzahl an Likes names just_audio.
Übung
Erstellen Sie ein neues Flutter-Projekt für Ihre Xylofon-App. Der automatisch erzeugte Quellcode in der main.dart Datei können Sie an dieser Stelle noch drin lassen. Integrieren Sie anschliessend das just_audio-Paket in Ihr Xylofon-Projekt, indem Sie die Schritte befolgen, die wir in der letzten Lektion durchgeführt haben.
Audiodateien herunterladen
Als nächstes müssen Sie die xylofon_sounds herunterladen. Erstellen Sie anschliessend in Ihrem Flutter-Projekt ein assets-Verzeichnis und kopieren Sie alle Audiodateien von note1.wav bis und mit note7.wav in dieses Verzeichnis.
Danach müssen Sie noch alle Audiodateien in Ihrer pubspec.yaml Datei unter assets verlinken. Ersetzen Sie dazu die Erklärungen zur Beschreibung wie man assets integriert mit dem folgenden Code. Achtung, die Einrückungstiefe ist hier relevant.
assets:
- note1.wav
- note2.wav
- note3.wav
- note4.wav
- note5.wav
- note6.wav
- note7.wav
Wechseln Sie nun in Ihre main.dart Datei und ersetzen Sie den gesamten Inhalt mit dem folgenden Code.
import 'package:flutter/material.dart';
import 'package:just_audio/just_audio.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: SafeArea(
child: Center(
child: TextButton(
onPressed: () {
final AudioPlayer player = AudioPlayer();
player.setAsset('assets/note1.wav');
player.play();
},
child: Text('Hier klicken'))),
),
),
);
}
}
Auf der zweiten Zeile erfolgt der Import des just_audio-Paket. Über ein TextButton-Widget erzeugen wir eine anklickbare Schaltfläche. In der Methode onPressed() integrieren wir den Audioplayer. In der Variable player wird eine Instanz der AudioPlayer-Klasse zwischengespeichert. Anschliessend greifen wir über die setAsset-Methode auf unsere Audiodatei note1.wav zu. Die play-Methode erlaubt player anschliessend das Abspielen dieses Audiosamples. Danach erhält unser TextButton noch eine passende Beschriftung. Wenn Sie die App anschliessend auf Ihrem Gerät ausführen und dort auf die Hier klicken-Schaltfläche klicken, sollte die erste Audiodatei abgespielt werden. Hinweis: Im Android-Simulator müssen Sie eventuell die Lautstärke erhöhen, damit der Sound gut hörbar ist.
Wir haben es geschafft mit sehr wenigen Codezeilen die erste Audiodatei abzuspielen. Und wir mussten nicht mal wirklich viel tun, damit das funktionierte. Und das alles dank der Integration eines Open-Source-Flutter-Pakets. In der nächsten Lektion werden wir lernen, wie wir alle unsere Sounds abspielen können, indem wir sie auf verschiedene Tasten mappen.