Whats app Sprachnachrichten nachbauen für Chat

basti1012 · 10. November 2018

Ihr kennt ja alle von Whatsapp die Funktion das man das Microfon gedrückt hält und beim loslassen wird die Sprachnachricht gesendet.Das würde ich gerne nachbauen und im Chat einfügen.

Ich habe zwar schon ein JS gefunden womit man nachrichten aufnehmen kann,aber die Nachrichten muß man durch einen speicher Button auf Festplatte speichern.

Das soll direkt versendet werden , was irgendwie so nicht klappt.

Deswegen muß ich wohl erstmal anders anfangen.

Hat das schon mal einer von euch gemacht ?

Wie funktioniert sowas überhaupt? Auch mit js ? Oder sind da irgendwie noch andere Sprachen mit beschäftigt ?

Kennt einer ein Script der sowas schon kann ?

Ich habe bis jetzt noch nix passendes gefunden , nur das mit speichern https://sebastian1012.bplaced.…vember2018/web-record.php

Wenn man da den speicher Button direkt als sende Button umbauen könnte könnte es ja vieleicht gehen , oder bin ich da auch den Holzweg ?

Stef · 11. November 2018

Hey,

bisher habe ich sowas noch nicht gemacht. Du sagtest, dass die Sprachnachricht beim loslassen des Buttons gesendet werden soll.

Dann würde ich wie folgt vorgehen:

Auf den Button den Event Listener Mouseover intialisieren
Function, welche beim Maus drüber fahren auf den Button ausgeführt wird, zeichnet das Sprechen auf
Beim Maus runter gehen sendest du diese Sprachnachricht via Ajax an ein PHP-Script
Im PHP Script führst du dann ein HTTP-Request aus und bietest dem User diese Sprachnachricht zum Download an.

Grüße,

Stef

Arne Drews · 11. November 2018

Wenn ich Dein Script auf die Schnelle richtig interpretiert habe, wird bei Klick auf das Mikrofon die Aufnahme begonnen und bei einem weiteren Klick beendet.

Dann muss man auf Speichern klicken, um die Aufnahme als Datei zu speichern.

Du willst jetzt also, dass man das Mikrofon solange gedrückt hält, bis man fertig gesprochen hat und wenn man loslässt soll die Sprachnachricht verschickt werden?

Die Aufnahme beginnt/endet mit dem click-Event. Schreibe dies so um, dass diese bei mousedown beginnt und bei mouseup endet.

Dirty aber einfacher Weg, dies direkt zu versenden ist, hier das click-Event des Speichern Button anzustoßen und hinterher mit einem kleinen hübschen Symbol die Datei zum Abspielen per JS anzubieten.

basti1012 · 11. November 2018

Ich glaube das ich irgendwie einen gewaltigen denk Fehler mache.

Das mit der Taste loslassen zum versenden lassen wir mal jetzt außen vor. Das ist eigentlich nicht das problem das bekomme ich wohl hin.

Wie im Beispiel zu sehen klickt man,

man redet und läßt los.

Dann kann man speichern wenn man will.

Das will ich ja nicht und soll versendet wird.

Wo wird die Sprachdatei den gecacht btw zwischen gespeichert bevor man sie Speichern kann ?. Versteht ihr was ich meine ? Wenn ich weiß wie und wo die gespeichert ist kann ich sie ja beim Taste loslassen direkt in Ajax anhängen zum verschicken. Aber ich glaube das ich irgendwie was falsch bedenke bzw es wieder nicht erklärt bekomme. Mist.

Stef · 11. November 2018

Hey,

Zeig uns doch mal deinen Code dazu. Dann können wir mehr sagen.

Sempervivum · 12. November 2018

Sieh dir die Funktion doneEncoding an. Die hat als Parameter das Blob mit dem Audio. Damit kannst Du dann weiter arbeiten.

basti1012 · 12. November 2018

Zitat von Stef

Hey,

Zeig uns doch mal deinen Code dazu. Dann können wir mehr sagen.

Eigentlich nicht weil bis jetzt nur Mist ist https://sebastian1012.bplaced.…ember2018/web-record1.php

Mitlerweile habe ich es ja so das beim Maus drücken die Aufnahme startet und beim los lassen auch beendet. Das ist schon mal gut.

Dann geht es wohl so weiter

Zitat von Sempervivum

Sieh dir die Funktion doneEncoding an. Die hat als Parameter das Blob mit dem Audio. Damit kannst Du dann weiter arbeiten.

Ja jetzt wo du es sagst fält mir das ein das da irgendwas mit den blob wahr. Im Code wird ja nachdem man die Maus los läßt ein normaler Link <a id="save" href="#"><img src="save.svg"></a> in ein download blob url umgewandet.

Code

<a id="save" href="blob:https://sebastian1012.bplaced.net/38bb0a03-540a-40f7-955d-e83e3a8f3571" download="myRecording00.wav"><img src="save.svg"></a>

Sehe ich das jetzt richtig das ich mit der Url und mit den doneEncoding weiter arbeiten muß?.

Aber ich gehe erstmal Googeln weil doneEncoding sagt mir gerade gar nix ?

Mal ne frage zwischen durch. Habe jetzt im Beispiel die Aufnahme auf 10 Sekunden begrenzt. Wenn man die offen läßt und einer würde nee halbe Stunden quatschen ,könnte man so große Datein trotzdem mit Javascript ( ajax und co ) ans Php Script senden ohne das es probleme gibt ?

AB HIER UNWICHTIG.

Wenn ich jetzt noch weiter denke und größere Datein beim hochladen unterbrochen würden, müßte man beim aktualiesieren oder so die Datei da weiter laden können wo sie aufgehöhrt hat. Aber das lasse ich erstmal weg das wird mir sonst zu kompliziert.

Arne Drews · 12. November 2018

Ihr wollt jetzt aber nicht ernsthaft Binärdaten durch einen Chat ballern?! Btw. besagt das blob: in der url, dass sich auf ein Objekt im Speicher bezogen wird.

Das Prinzip der Software ist korrekt: Erst einmal physikalisch speichern! Über den Chat darf nur ein Link zu der Datei sein, die bei Klick ein JS auslöst, was wiederum die Datei Audio-Datei abspielt.

Zitat von basti1012

Wenn man die offen läßt und einer würde nee halbe Stunden quatschen ,könnte man so große Datein trotzdem mit Javascript ( ajax und co ) ans Php Script senden ohne das es probleme gibt ?

Sorry, Deine Probleme liegen ganz woanders, wenn Du über sowas überhaupt nachdenkst...

Sempervivum · 12. November 2018

Zitat

Aber ich gehe erstmal Googeln weil doneEncoding sagt mir gerade gar nix ?

Diese Funktion ist nichts Allgemeines, sondern sie ist spezisch in deinem Skript definiert. Beim Googeln wirst Du vermutlich auch nicht anderes als dieses Skript finden.

basti1012 · 12. November 2018

Zitat von Sempervivum

Diese Funktion ist nichts Allgemeines, sondern sie ist spezisch in deinem Skript definiert. Beim Googeln wirst Du vermutlich auch nicht anderes als dieses Skript finden.

Ja da habe ich mal wieder nachgedacht.Schön blöd von mir.Sollte vieleicht mal um solche Uhrzeiten schlafen gehen.

Zitat von Arne Drews

Über den Chat darf nur ein Link zu der Datei sein, die bei Klick ein JS auslöst, was wiederum die Datei Audio-Datei abspielt.

Genau so wollte ich es auch haben. Zb mit Bilder ist das genau so .Wenn einer ein Bild verschickt wird ein kleiner Icon angezeigt und dann kann da jeder drauf klicken wie und ob er will und bekommt die Bilder im Fancy angezeigt.

Bei der Sprachnachricht soll das genau so sein das zb ein Play Button abgebildet ist und beim klick die Nachrich abgespielt wird.

Mit den abspielen und co sehe ich eigentlich auch kein problem.

Muß jetzt irgendwie den Blob auf den Server kriegen.

Vieleicht sollte ich erstmal Goggen wie,wo,was,blob ist und macht. Es gab ja mal ein der blob urls von Youtube sich runterladen wollte was auch nicht richtig geklappt hat.

Fals einer ein Guten Link hat der selbst für mich verständlich erklärt was BLOB tut und macht dann bitte her damit .

Arne Drews · 12. November 2018

Du brauchst doch nur nachsehen, was die save-Methode macht und das adaptieren...

Sempervivum · 12. November 2018

Zitat

Muß jetzt irgendwie den Blob auf den Server kriegen.

Das wird hier diskutiert:
https://stackoverflow.com/ques…-javascript-upload-a-blob

Weil es mich interessierte, habe ich es mal getestet und dies funktioniert bei mir:

Code

        function doneEncoding(blob) {
            var fd = new FormData();
            fd.append('data', blob);
            $.ajax({
                method: 'POST',
                url: 'saveblob.php',
                data: fd,
                processData: false,
                contentType: false,
                success: function (output) {
                    console.log("done");
                    document.getElementById("outpt").innerHTML = output;
                }
            });

            // Recorder.setupDownload(blob, "myRecording" + ((recIndex < 10) ? "0" : "") + recIndex + ".wav");
            // recIndex++;
        }

Alles anzeigen

saveblob.php

PHP

<?php

error_reporting(E_ALL);
ini_set('display_errors', '1');

var_dump($_FILES);
$file = 'test.wav';
move_uploaded_file ($_FILES['data']['tmp_name'], $file);
?>

basti1012 · 12. November 2018

Zitat von Sempervivum

Weil es mich interessierte, habe ich es mal getestet und dies funktioniert bei mir:

Bei mir natürlich wieder nicht. Weiß noch nicht was falsch läuft.

https://sebastian1012.bplaced.…ember2018/web-record1.php

Wenn man micro drückt und nach kurzer Zeit los läst geht der Request raus . Dann wir er im Ordner audios gespeichert und ein andere Ajax fragt den Ordner ab und zeigt den Inhalt an. Das klappt alles. Nur jede Datei die erstellt wird ist 44 byts groß und ohne Inhalt.

Wo muß ich den Fehler suchen. Ich renne gerade vor einer Wand weil das wieder mal nicht in mein Kopt will.

Mir kommt es so vor das das Script die Datei erstelt aber keinen Inhalt rein packt.Wie ein leeres Js nur als wave

Sempervivum · 12. November 2018

Bei mir scheint dein letzter Link aber zu funktionieren. Ton wird aufgezeichnet und korrekt abgespielt.

basti1012 · 12. November 2018

jetzt verstehe ich gar nix mehr. Wenn ich jetzt in den Ordner schaue sind da Datein drine die größer als 44 byts sind und auch Inhalt haben. Ich werde mal gerade andere Browser testen weil der jetzige Browser erstellt immer genau eine leere 44 byts Datei und bei jeden anderen scheint es ja zu klappen.

Melde mich gleich nochmal

Sempervivum · 12. November 2018

_{Die sind wohl von meinen Tests. Ich habe Chrome benutzt, in Opera ging es nicht.}

basti1012 · 12. November 2018

So. Bei mir ist es komischerwiese anders rum. Mein Avant Browser erstellt nur die 44 byts Datein und im Opera scheintes zu klappen. Aber im großen und ganzen scheint es schon mal zu klappen. Vieleicht findet sich bei Googel noch was woran das liegen kann. Vieleicht wieder ein Browser problem. Nur komisch das der Opera 2 verschiede Ergebnisse jetzt zeigt ,das ist ja normalerweise nicht unbedingt so.

Aber besten Dank erstmal . Hat soweit ja schon mal alles geklappt. Den letzten Fehler läßt sich hoffentlich auch noch finden.

Mal nee zwischen frage offTopic . Wenn in der Fehler konsole kuckt sieht man das andauernd meine Fehlerseite und das Favicon nicht geladen wird. Favicon kann ich noch verstehen. Aber warum versucht die Seite meine Fehlerseite aufzurufen ? Das habe ich andauernd und finde kein Grund dafür. Genau wie hier ist kein Bild oder css Datei die Falsch eingebunden ist oder sonst was. Also eigentlich gibt es kein Grund die Fehlerseite aufzurufen. Kann das an der .htaccess Datei liegen ?

basti1012 · 18. November 2018

So habe das jetzt im Chat eingebaut und muß sagen das es zu 70 % geht.

Mein Opera Browser nimmt alles auf und spielt es ab. Zwar leise aber das läßt sich bestimmt noch einstellen.

Aber mein andere Browser und auch bestimmte andere Browser erstellen nur eine 44 byts Datei

ohne irgendeinen Inhalt. .

Ist auch egal wie lange man auf Aufnahme drückt die Datei ist immer nur 44 Byts groß.

Ich habe auch noch keine vermutung warum das so ist und auch noch kein eingrenzung machen können.

Wahrscheinlich wird es an den Browsern liegen weil Opera geht es ja soweit super.

Hat da einer nee Idee ob es bei bestimmten Browser nee sperre gibt oder Bugs oder sonst was woran das liegen kann ?

Aber guten morgen ersmal und ein frohen Sonntag

Whats app Sprachnachrichten nachbauen für Chat

Jetzt mitmachen!

Teilen