Hallo liebe Community, ich weiß langsam nicht mehr weiter. Ich habe im Rahmen eines Uni-Projektes was programmiert was nur auf Chrome läuft. Es läuft auch super und funktioniert, nun sollten wir das auf einem Raspberry Pi4 zum Laufen bringen. Da dort aber nur Chromium vorhanden ist weiß ich nun nicht was ich hier ändern muss das es läuft.
Das Problem: Er nimmt die befehle via Mikrofon an aber es kommt keine Soundausgabe raus. Wenn ich aber mit dem Raspberry z. B. auf YouTube gehe dann kommt dort der Sound sprich am PI liegt es nicht demnach vermute ich das es am Codec oder an der Programmierung liegt.
Seht ihr hier irgendwie das Problem? Ihr würdet mich echt retten.
[CODE lang="java" title="Main.js"]const btn = document.querySelector('.button');
const content = document.querySelector('.content');
const btn2 = document.querySelector('.button2');
const btn3 = document.querySelector('.button3');
const btn4 = document.querySelector('.button4');
const vorlesemodus = document.querySelector('.vorlesemodus');
const textfeld = document.getElementById('textfeld'); //Alle DOM Elemente aus html werden hier in Variablen geladen um später damit zu arbeiten.
const Robot = document.querySelector('.Robot');
const eyes = document.querySelector('.eyes');
const eye1 = document.querySelector('.eye1');
const eye2 = document.querySelector('.eye2');
const ball = document.querySelector('.ball');
var hallo = ['Hallo, mir geht es gut wie geht es dir?', 'Was ein schöner Tag heute mir gehts super', 'Hallo was machst du hier?', 'Wer bist du?'];
const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition; //Schnitstelle der Voice Recognition die hier definiert wird.
const recognition = new SpeechRecognition(); // neues Objekt der SpeechRecognition wird angelegt. mit diesem Objekt welches mehrere Einstellung hat wird im weiteren Code gearbeitet
recognition.onstart = function(){
};
recognition.onresult = function(event){ // wenn recognition ein Resultat hat --> Also nachdem man IRobot etwas gesagt hat ist dass das Resultat
// event ist in recognition enthalten und hat ein "result" in dem der Text ist --> ansprechbar über resultindex
//bei mehreren Resultaten nacheinander werden die Resultate indexiert von 0 beginnend
const current = event.resultIndex;
const transcript = event.results[current][0].transcript; // Hier wird dann vom aktuellen/letzten resultat (current) das transcript ausgegeben indem dann der Text ist der gesprochen wurde.
readOutLoud(transcript); // function readOutLoud wird aufgerufen mit dem Text als String übergabe
};
btn.addEventListener('click', () => { // Buttonclicks eventlistener werden definiert und dann bei klick code ausgeführt.
recognition.lang = "de-DE"; // Sprache festlegen
recognition.start(); // aufnahme starten. Wenn vorbei wird automatisch in recognition.onresult gesprungen
});
btn3.addEventListener('click', () => { //vorlese button hier wird text aus dem textfeld in speech.text geladen und dieses dann in Z 35 vorgelsen.
const speech = new SpeechSynthesisUtterance();
speech.text = textfeld.value; // textfeld ist ein html element in das Text rein kopiert werden kann. Z.7 JS zuweisung
window.speechSynthesis.speak(speech);
});
btn2.addEventListener('click', () => { // Selbe prinzip wie bei btn3. Hier wird statischer text vorgelesen (Hilfebutton)
const speech2 = new SpeechSynthesisUtterance();
speech2.text = "Hallo ich bin EiRobot. Du kannst mir Dinge sagen die ich in der Anwendung ändern soll. Wie zum beispiel: Schalte den Dunkelmodus ein."
window.speechSynthesis.speak(speech2);
});
function readOutLoud(message){ // Alle Abfragen bevor IRobot irgendwas tut. z.B ob der eingesprochene text vom benutzer das Wort dunkelmodus enthalt.
const speech = new SpeechSynthesisUtterance();
speech.text = "Ich weiß leider nicht was du gesagt hast. Versuche es erneut."
if(message.includes('Zeig mir die Kollektion')|| message.includes('Mode')){
speech.text = "Bitte hier die Kollektion";
window.open("www.iammidnight.com/shop");
};
if(message.includes('dunkelmodus an') || message.includes('dunkel') || message.includes('nacht') || message.includes('nachts') || message.includes('Nacht') || message.includes('nachts')){ //wenn das wort dunkelmodus oder dunkel vorkommt dann werden einige CSS befehle ausgeführt.
speech.text = "Bitte der Dunkelmodus ist an";
document.getElementsByTagName("body")[0].style.backgroundColor = "black";
btn.style.color = "white";
btn.style.border = "solid white 2px";
btn2.style.color = "white";
btn2.style.border = "solid white 2px";
btn3.style.color = "white";
btn3.style.border = "solid white 2px"; // DUNKELMODUS
btn4.style.color = "white";
btn4.style.border = "solid white 2px";
eye1.style.background = "green";
eye2.style.background = "green";
};
if(message.includes('dunkelmodus aus') || message.includes('hell') || message.includes('hellmodus') || message.includes('helm') || message.includes('Hellmodus') || message.includes('dunkelmodus wieder aus')){ //wenn das wort dunkelmodus oder dunkel vorkommt dann werden einige CSS befehle ausgeführt.
speech.text = "Lieber wieder hell.";
document.getElementsByTagName("body")[0].style.backgroundColor = "white";
btn.style.color = "black";
btn.style.border = "solid black 2px";
btn2.style.color = "black";
btn2.style.border = "solid black 2px";
btn3.style.color = "black"; //HELLMODUS
btn3.style.border = "solid black 2px";
btn4.style.color = "black";
btn4.style.border = "solid black 2px";
eye1.style.background = "white";
eye2.style.background = "white";
};
if(message.includes('gehts') || message.includes('geht es') || message.includes('wie gehts') || message.includes('wie geht es dir')){
var answer = hallo[Math.floor(Math.random() * hallo.length)];
speech.text = answer;
};
if(message.includes('vorlesemodus an') || message.includes('vorlesen an') || message.includes('Vorlese an') || message.includes('vorlese an') || message.includes('vorlese an') || message.includes('vorlesen')){
speech.text = "Du bist im Vorlesemodus. Füge text ein damit ich Ihn dir vorlesen kann";
vorlesemodus.style.visibility = "visible";
eye1.style.width = "200px";
eye1.style.height = "150px";
eye2.style.width = "200px"; //Vorlesemodus an
eye2.style.height = "150px";
eye1.style.borderRadius = "0";
eye2.style.borderRadius = "0";
};
if(message.includes('ein Auge') || message.includes('Auge') || message.includes('auge')){
speech.text = "Na irgendwie kann ich mit einem Auge besser lesen. Frag mich nicht warum ";
eye1.style.width = "200px";
eye1.style.height = "150px";
eye2.style.width = "200px"; //
eye2.style.height = "150px";
eye1.style.borderRadius = "0";
eye2.style.borderRadius = "0";
};
if(message.includes('vorlesemodus aus') || message.includes('vorlesen aus') || message.includes('Vorlese aus') || message.includes('vorlese aus') || message.includes('vorlesemodus wieder aus')){
speech.text = "Alles klar. Vorlesemodus ausgeschaltet";
vorlesemodus.style.visibility = "hidden";
eye1.style.width = "200px";
eye1.style.height = "150px";
eye2.style.width = "200px";
eye2.style.height = "150px";
eye1.style.borderRadius = "0";
eye2.style.borderRadius = "0";
};
if(message.includes('normal')) {
speech.text = "Ok ich bin wieder normal";
eye1.style.width = "200px";
eye1.style.height = "150px";
eye2.style.width = "200px"; //Vorlesemodus aus
eye2.style.height = "150px";
eye1.style.borderRadius = "0";
eye2.style.borderRadius = "0";
};
if(message.includes('super') || message.includes('toll') || message.includes('mag dich') || message.includes('nett') || message.includes('schön') || message.includes('glücklich') || message.includes('fröhlich') || message.includes('zufrieden')) {
speech.text = "Nett sein kostet nichts.";
eye1.style.width = "200px";
eye1.style.height = "200px"; // Einstellung des CSS bei Freude
eye2.style.width = "200px";
eye2.style.height = "200px";
eye1.style.borderRadius = "0";
eye2.style.borderRadius = "0";
};
if(message.includes('böse') || message.includes('aggressiv') || message.includes('mag dich nicht') || message.includes('bist scheiße') || message.includes('hasse dich') || message.includes('bist blöd') || message.includes('bist langweilig') || message.includes('scheiße')) {
speech.text = "Das ist aber nicht nett";
eye1.style.width = "150px";
eye1.style.height = "50px"; // Einstellung des CSS bei AGRESSIV
eye2.style.width = "150px";
eye2.style.height = "50px";
eye1.style.borderRadius = "0";
eye2.style.borderRadius = "0";
};
if(message.includes('misstrauisch') || message.includes('lügen') || message.includes('lüge') || message.includes('Lüge') || message.includes('angelogen')) {
speech.text = "Ich bin etwas misstrauisch";
eye1.style.width = "150px";
eye1.style.height = "20px"; // Einstellung des CSS bei MISSTRAUISCH
eye2.style.width = "150px";
eye2.style.height = "20px";
eye1.style.borderRadius = "0";
eye2.style.borderRadius = "0";
};
if(message.includes('Erwartung') || message.includes('cool') || message.includes('cooles') || message.includes('erster') || message.includes('gewonnen') || message.includes('erfolgreich') || message.includes('Überraschung')) {
speech.text = "OHaaaa ich bin überrascht";
eye1.style.width = "200px";
eye1.style.height = "200px"; // Einstellung des CSS bei ÜBERRASCHT
eye2.style.width = "200px";
eye2.style.height = "200px";
eye1.style.borderRadius = "0";
eye2.style.borderRadius = "0";
};
if(message.includes('traurig') || message.includes('schlecht') || message.includes('enttäuscht') || message.includes('schlecht') || message.includes('schlechtes') || message.includes('nicht gut') || message.includes('nicht so gut')) {
speech.text = "Nicht traurig sein. Es kommen bessere Tage";
eye1.style.width = "170px";
eye1.style.height = "200px"; // Einstellung des CSS bei TRAURIG
eye2.style.width = "170px";
eye2.style.height = "200px";
eye1.style.borderRadius = "120px 13px 0px 0px";
eye2.style.borderRadius = "13px 120px 0px 0px";
};
if(message.includes('Danke') || message.includes('danke') || message.includes('Vielen Dank') || message.includes('Dankeschön') || message.includes('dankeschön')){
speech.text = "Kein Problem du bist doch mein bester Freund.";
vorlesemodus.style.visibility = "hidden";
eye1.style.width = "200px";
eye1.style.height = "150px";
eye2.style.width = "200px";
eye2.style.height = "150px";
eye1.style.borderRadius = "0";
eye2.style.borderRadius = "0";
};
if(message.includes('rot')) { //folgend kommen alle Abfragen für die Augenfarben und entsprechender CSS
speech.text = "Ich habe meine Augenfarbe geändert";
eye1.style.background = "red";
eye2.style.background = "red";
};
if(message.includes('blau')) {
speech.text = "Ich habe meine Augenfarbe geändert";
eye1.style.background = "blue";
eye2.style.background = "blue";
};
if(message.includes('grün')) {
speech.text = "Ich habe meine Augenfarbe geändert";
eye1.style.background = "green";
eye2.style.background = "green";
};
if(message.includes('weiß')) {
speech.text = "Ich habe meine Augenfarbe geändert";
eye1.style.background = "white";
eye2.style.background = "white";
};
if(message.includes('schwarz')) {
speech.text = "Ich habe meine Augenfarbe geändert";
eye1.style.background = "black";
eye2.style.background = "black";
};
if(message.includes('gelb')) {
speech.text = "Ich habe meine Augenfarbe geändert";
eye1.style.background = "yellow";
eye2.style.background = "yellow";
};
if(message.includes('pink')) {
speech.text = "Ich habe meine Augenfarbe geändert";
eye1.style.background = "pink";
eye2.style.background = "pink";
};
speech.volume = 1; // Einige Einstellungen die man für das Objekt speech machen kann. Wie Lautstärke, Geschwindigkeit etc.
speech.rate = 0.82;
speech.pitch = 0.4;
window.speechSynthesis.speak(speech); // Letztendliche Antwort von IRobot -- Ausgabe von Speech als sprechen.
}[/CODE]
Das Problem: Er nimmt die befehle via Mikrofon an aber es kommt keine Soundausgabe raus. Wenn ich aber mit dem Raspberry z. B. auf YouTube gehe dann kommt dort der Sound sprich am PI liegt es nicht demnach vermute ich das es am Codec oder an der Programmierung liegt.
Seht ihr hier irgendwie das Problem? Ihr würdet mich echt retten.
[CODE lang="java" title="Main.js"]const btn = document.querySelector('.button');
const content = document.querySelector('.content');
const btn2 = document.querySelector('.button2');
const btn3 = document.querySelector('.button3');
const btn4 = document.querySelector('.button4');
const vorlesemodus = document.querySelector('.vorlesemodus');
const textfeld = document.getElementById('textfeld'); //Alle DOM Elemente aus html werden hier in Variablen geladen um später damit zu arbeiten.
const Robot = document.querySelector('.Robot');
const eyes = document.querySelector('.eyes');
const eye1 = document.querySelector('.eye1');
const eye2 = document.querySelector('.eye2');
const ball = document.querySelector('.ball');
var hallo = ['Hallo, mir geht es gut wie geht es dir?', 'Was ein schöner Tag heute mir gehts super', 'Hallo was machst du hier?', 'Wer bist du?'];
const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition; //Schnitstelle der Voice Recognition die hier definiert wird.
const recognition = new SpeechRecognition(); // neues Objekt der SpeechRecognition wird angelegt. mit diesem Objekt welches mehrere Einstellung hat wird im weiteren Code gearbeitet
recognition.onstart = function(){
};
recognition.onresult = function(event){ // wenn recognition ein Resultat hat --> Also nachdem man IRobot etwas gesagt hat ist dass das Resultat
// event ist in recognition enthalten und hat ein "result" in dem der Text ist --> ansprechbar über resultindex
//bei mehreren Resultaten nacheinander werden die Resultate indexiert von 0 beginnend
const current = event.resultIndex;
const transcript = event.results[current][0].transcript; // Hier wird dann vom aktuellen/letzten resultat (current) das transcript ausgegeben indem dann der Text ist der gesprochen wurde.
readOutLoud(transcript); // function readOutLoud wird aufgerufen mit dem Text als String übergabe
};
btn.addEventListener('click', () => { // Buttonclicks eventlistener werden definiert und dann bei klick code ausgeführt.
recognition.lang = "de-DE"; // Sprache festlegen
recognition.start(); // aufnahme starten. Wenn vorbei wird automatisch in recognition.onresult gesprungen
});
btn3.addEventListener('click', () => { //vorlese button hier wird text aus dem textfeld in speech.text geladen und dieses dann in Z 35 vorgelsen.
const speech = new SpeechSynthesisUtterance();
speech.text = textfeld.value; // textfeld ist ein html element in das Text rein kopiert werden kann. Z.7 JS zuweisung
window.speechSynthesis.speak(speech);
});
btn2.addEventListener('click', () => { // Selbe prinzip wie bei btn3. Hier wird statischer text vorgelesen (Hilfebutton)
const speech2 = new SpeechSynthesisUtterance();
speech2.text = "Hallo ich bin EiRobot. Du kannst mir Dinge sagen die ich in der Anwendung ändern soll. Wie zum beispiel: Schalte den Dunkelmodus ein."
window.speechSynthesis.speak(speech2);
});
function readOutLoud(message){ // Alle Abfragen bevor IRobot irgendwas tut. z.B ob der eingesprochene text vom benutzer das Wort dunkelmodus enthalt.
const speech = new SpeechSynthesisUtterance();
speech.text = "Ich weiß leider nicht was du gesagt hast. Versuche es erneut."
if(message.includes('Zeig mir die Kollektion')|| message.includes('Mode')){
speech.text = "Bitte hier die Kollektion";
window.open("www.iammidnight.com/shop");
};
if(message.includes('dunkelmodus an') || message.includes('dunkel') || message.includes('nacht') || message.includes('nachts') || message.includes('Nacht') || message.includes('nachts')){ //wenn das wort dunkelmodus oder dunkel vorkommt dann werden einige CSS befehle ausgeführt.
speech.text = "Bitte der Dunkelmodus ist an";
document.getElementsByTagName("body")[0].style.backgroundColor = "black";
btn.style.color = "white";
btn.style.border = "solid white 2px";
btn2.style.color = "white";
btn2.style.border = "solid white 2px";
btn3.style.color = "white";
btn3.style.border = "solid white 2px"; // DUNKELMODUS
btn4.style.color = "white";
btn4.style.border = "solid white 2px";
eye1.style.background = "green";
eye2.style.background = "green";
};
if(message.includes('dunkelmodus aus') || message.includes('hell') || message.includes('hellmodus') || message.includes('helm') || message.includes('Hellmodus') || message.includes('dunkelmodus wieder aus')){ //wenn das wort dunkelmodus oder dunkel vorkommt dann werden einige CSS befehle ausgeführt.
speech.text = "Lieber wieder hell.";
document.getElementsByTagName("body")[0].style.backgroundColor = "white";
btn.style.color = "black";
btn.style.border = "solid black 2px";
btn2.style.color = "black";
btn2.style.border = "solid black 2px";
btn3.style.color = "black"; //HELLMODUS
btn3.style.border = "solid black 2px";
btn4.style.color = "black";
btn4.style.border = "solid black 2px";
eye1.style.background = "white";
eye2.style.background = "white";
};
if(message.includes('gehts') || message.includes('geht es') || message.includes('wie gehts') || message.includes('wie geht es dir')){
var answer = hallo[Math.floor(Math.random() * hallo.length)];
speech.text = answer;
};
if(message.includes('vorlesemodus an') || message.includes('vorlesen an') || message.includes('Vorlese an') || message.includes('vorlese an') || message.includes('vorlese an') || message.includes('vorlesen')){
speech.text = "Du bist im Vorlesemodus. Füge text ein damit ich Ihn dir vorlesen kann";
vorlesemodus.style.visibility = "visible";
eye1.style.width = "200px";
eye1.style.height = "150px";
eye2.style.width = "200px"; //Vorlesemodus an
eye2.style.height = "150px";
eye1.style.borderRadius = "0";
eye2.style.borderRadius = "0";
};
if(message.includes('ein Auge') || message.includes('Auge') || message.includes('auge')){
speech.text = "Na irgendwie kann ich mit einem Auge besser lesen. Frag mich nicht warum ";
eye1.style.width = "200px";
eye1.style.height = "150px";
eye2.style.width = "200px"; //
eye2.style.height = "150px";
eye1.style.borderRadius = "0";
eye2.style.borderRadius = "0";
};
if(message.includes('vorlesemodus aus') || message.includes('vorlesen aus') || message.includes('Vorlese aus') || message.includes('vorlese aus') || message.includes('vorlesemodus wieder aus')){
speech.text = "Alles klar. Vorlesemodus ausgeschaltet";
vorlesemodus.style.visibility = "hidden";
eye1.style.width = "200px";
eye1.style.height = "150px";
eye2.style.width = "200px";
eye2.style.height = "150px";
eye1.style.borderRadius = "0";
eye2.style.borderRadius = "0";
};
if(message.includes('normal')) {
speech.text = "Ok ich bin wieder normal";
eye1.style.width = "200px";
eye1.style.height = "150px";
eye2.style.width = "200px"; //Vorlesemodus aus
eye2.style.height = "150px";
eye1.style.borderRadius = "0";
eye2.style.borderRadius = "0";
};
if(message.includes('super') || message.includes('toll') || message.includes('mag dich') || message.includes('nett') || message.includes('schön') || message.includes('glücklich') || message.includes('fröhlich') || message.includes('zufrieden')) {
speech.text = "Nett sein kostet nichts.";
eye1.style.width = "200px";
eye1.style.height = "200px"; // Einstellung des CSS bei Freude
eye2.style.width = "200px";
eye2.style.height = "200px";
eye1.style.borderRadius = "0";
eye2.style.borderRadius = "0";
};
if(message.includes('böse') || message.includes('aggressiv') || message.includes('mag dich nicht') || message.includes('bist scheiße') || message.includes('hasse dich') || message.includes('bist blöd') || message.includes('bist langweilig') || message.includes('scheiße')) {
speech.text = "Das ist aber nicht nett";
eye1.style.width = "150px";
eye1.style.height = "50px"; // Einstellung des CSS bei AGRESSIV
eye2.style.width = "150px";
eye2.style.height = "50px";
eye1.style.borderRadius = "0";
eye2.style.borderRadius = "0";
};
if(message.includes('misstrauisch') || message.includes('lügen') || message.includes('lüge') || message.includes('Lüge') || message.includes('angelogen')) {
speech.text = "Ich bin etwas misstrauisch";
eye1.style.width = "150px";
eye1.style.height = "20px"; // Einstellung des CSS bei MISSTRAUISCH
eye2.style.width = "150px";
eye2.style.height = "20px";
eye1.style.borderRadius = "0";
eye2.style.borderRadius = "0";
};
if(message.includes('Erwartung') || message.includes('cool') || message.includes('cooles') || message.includes('erster') || message.includes('gewonnen') || message.includes('erfolgreich') || message.includes('Überraschung')) {
speech.text = "OHaaaa ich bin überrascht";
eye1.style.width = "200px";
eye1.style.height = "200px"; // Einstellung des CSS bei ÜBERRASCHT
eye2.style.width = "200px";
eye2.style.height = "200px";
eye1.style.borderRadius = "0";
eye2.style.borderRadius = "0";
};
if(message.includes('traurig') || message.includes('schlecht') || message.includes('enttäuscht') || message.includes('schlecht') || message.includes('schlechtes') || message.includes('nicht gut') || message.includes('nicht so gut')) {
speech.text = "Nicht traurig sein. Es kommen bessere Tage";
eye1.style.width = "170px";
eye1.style.height = "200px"; // Einstellung des CSS bei TRAURIG
eye2.style.width = "170px";
eye2.style.height = "200px";
eye1.style.borderRadius = "120px 13px 0px 0px";
eye2.style.borderRadius = "13px 120px 0px 0px";
};
if(message.includes('Danke') || message.includes('danke') || message.includes('Vielen Dank') || message.includes('Dankeschön') || message.includes('dankeschön')){
speech.text = "Kein Problem du bist doch mein bester Freund.";
vorlesemodus.style.visibility = "hidden";
eye1.style.width = "200px";
eye1.style.height = "150px";
eye2.style.width = "200px";
eye2.style.height = "150px";
eye1.style.borderRadius = "0";
eye2.style.borderRadius = "0";
};
if(message.includes('rot')) { //folgend kommen alle Abfragen für die Augenfarben und entsprechender CSS
speech.text = "Ich habe meine Augenfarbe geändert";
eye1.style.background = "red";
eye2.style.background = "red";
};
if(message.includes('blau')) {
speech.text = "Ich habe meine Augenfarbe geändert";
eye1.style.background = "blue";
eye2.style.background = "blue";
};
if(message.includes('grün')) {
speech.text = "Ich habe meine Augenfarbe geändert";
eye1.style.background = "green";
eye2.style.background = "green";
};
if(message.includes('weiß')) {
speech.text = "Ich habe meine Augenfarbe geändert";
eye1.style.background = "white";
eye2.style.background = "white";
};
if(message.includes('schwarz')) {
speech.text = "Ich habe meine Augenfarbe geändert";
eye1.style.background = "black";
eye2.style.background = "black";
};
if(message.includes('gelb')) {
speech.text = "Ich habe meine Augenfarbe geändert";
eye1.style.background = "yellow";
eye2.style.background = "yellow";
};
if(message.includes('pink')) {
speech.text = "Ich habe meine Augenfarbe geändert";
eye1.style.background = "pink";
eye2.style.background = "pink";
};
speech.volume = 1; // Einige Einstellungen die man für das Objekt speech machen kann. Wie Lautstärke, Geschwindigkeit etc.
speech.rate = 0.82;
speech.pitch = 0.4;
window.speechSynthesis.speak(speech); // Letztendliche Antwort von IRobot -- Ausgabe von Speech als sprechen.
}[/CODE]
