Bubble.io Tutorial - Audio Recording Feature (Deutsch)

In diesem Video lernst Du das Feature Audio Recording zu entwickeln, um Sprachmemos mit dem Mikrofon aufzunehmen, zu speichern und abzuspielen. Hierfür verwenden wir das offizielle und kostenlose Bubble Plugin Audio Recorder & Visualizer

Javascript Snippet für Audio abspielen

var audio = new Audio('urltomp3');
audio.play();

Video Transkript

Hallo, mein Name ist Chris Strobl. Ich zeige euch heute, wie wir eine Audio Recorder App in Bubble entwickeln können. Geht zunächst mal auf Plugins. Add Plugin. Und ihr nimmt das vom Bubble Original selbst entwickelte kostenlose Plugin, Audio Recorder & Visualizer. Ihr installiert dieses. Und dazu die Toolbox. Damit wir auch Javascript in Bubble benutzen können. Auch dieses Plugin ist kostenlos und eines der meist genutzten Plugins. Mit 193.000 Installationen. Als nächstes gehen wir in das Design Tab. Und ihr nehmt eine Gruppe. Und eine maximale Breite von 100 prozent. 20 Pixel Abstand und als erstes und als erstes nehmen wir ein Icon. Achtzig mal achtzig Pixel. Und wählen hier einen Kreis aus. Als Farbe wählen wir ein Rot. Zentrieren horizontal. Das wird nämlich unser Aufnahme Button.

Darüber eine Gruppe. Diese machen wir 460 Pixel, zentrieren das horizontal. Und als Hintergrundfarbe einen dunklen Ton. Da rein. Dann fügen wir es nächstes unter Input den Audio Recorder hinzu. Auch hier die gleiche Farbe. Ihr könnt das Ganze auch ändern in weiß z.B.. Ich finde aber dieses Dunkle gar nicht schlecht. Darüber füge ich jetzt eine Gruppe hinzu. Und diese Gruppe hat einerseits ein Input Field. Und daneben ein Icon, um das Ganze zu speichern. Als nächstes gehen wir in die Datenbank und erstellen Audio Recordings. Als neuen Typ. Und hier stellen wir das neue Feld Datei. Und daneben Dateiname.

Und den User haben wir verlinkt über das Creator Field. Danach gehen wir ins Design Tab. Wir erstellen eine Repeating Group. Type of content ein Audio Recording als Data source Do Search for aAudio Recordings und der Creator ist der Current user. Anschließend machen wir das Feld current cell's Audio Recordings Dateiname. Und daneben einen Play Button. Auch diesen geben wir wieder die Farbe Grau. Bei Layout Style machen wir Full List und wir machen keinen Separator. Als nächstes geht es jetzt um die Funktion.

Ihr geht auf den Button und wir machen ein Conditional. Wenn. Audio Recorder A ist Recording. Dann ändern wir das Icon auf ein Stop Icon. Start/edit workflow. Element actions Start Stop Audio Recorder und er wählt automatisch Audio Recorder A aus. Als nächstes ändern wir den Namen des Input Field Initial Content ist "Datei"... Und wir wollen die Nummer der Datei, das heißt, wir machen Repeating Group. Audio List of Audio Count + 1. Das heißt, wenn wir 0 haben, ist es Datei 1. Wenn wir 1 haben Datei 2 und so weiter. Input Field Dateiname. Wenn wir jetzt auf das Speichern Symbol gehen Start/edit workflow Element actions Upload Content. Data. Create a new thing. Audio Recordings.

Die Datei ist result of Step 1 und der Dateiname ist das Input Field Dateiname. Anschließend geht ihr auf Clear Content, damit auch der Audio Recorder wieder resettet wurde. Wenn wir jetzt den Play Button drücken, dann seht ihr, wenn wir unter Element actions gehen, um Play Stop machen, dann können wir leider keinen Value setzen für diesen Audio Recorder. Das heißt, wir müssen das anders lösen. Stattdessen gehen wir auf Plugiins. Run Javascript. Und ich habe etwas vorbereitet. Das heißt, die Variable Audio, die ein neues Audiofile ist mit der URL zu dem Wave File, was wir gerade hochgeladen haben, und dann lassen wir diese Variable abspielen. Auf die URL machen wir insert Dynamic data und nehmen Current users Audio Recordings Datei  URL.

Und wir gehen jetzt einmal auf Preview. Hallo, das ist ein Test. Wir nehmen jetzt einmal unser Audiofile auf. Ihr seht, wie wir nun hier unsere Spur haben. Wir drücken auf Speichern. Ihr seht, wie wir jetzt Datei 2 haben. Und wir lassen jetzt einmal die Datei abspielen. Hallo! Das ist ein Test. Wir nehmen jetzt einmal unser Audio auf. Und so konnten wir sehen, wie wir relativ einfach im Bubble auch die Funktionalität von einer Audio Recording App abbilden können. Ich wünsche euch weiterhin viel Erfolg und auf bald.