• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Frage Wie Javascript onclick lauffähig machen?

Hier wird etwas dazu geschrieben:
https://stackoverflow.com/questions...inyin-furigana-to-a-class-with-css-javascript
Ich bin skeptisch, ob es eine Möglichkeit gibt, dies automatisch zu erzeugen.
Zum Vergrößern anklicken....

Es gibt im Internet mehrere Kanji to Hiragana Konverter. (z.B. http://nihongo.j-talk.com/ )
Daher vermute ich, dass das gehen muss. Und vielleicht macht das ja schon die API von glosbe: https://labs.goo.ne.jp/api/hiragana
Die Ausgabe der Hiragana soll in einer dritten Zeile zwischen Japanisch und Deutsch sein.
Das Problem ist, dass ich die chinesischen Schriftzeichen noch längst nicht alle kenne und daher auf die Hiragana angewiesen bin.

Der Link den du mir gesendet hast, spricht nicht von Hiragana, sondern von Furigana. Furigana würde auch gehen (sieht sogar besser aus) ist aber vermutlich zu schwer zum Einbauen.

Hier gibt es einen online Furiganizer: http://furigana.sourceforge.net/cgi-bin/index.cgi
Ich könnte die Texte auch erst dort einfügen und mir die Furigana von dort holen. Doch wenn ich die Kanjis mit den Furigana ins die Eingabemaske kopiere, erscheinen die Furigana plötzlich neben dem Kanji

upload_2017-8-9_18-18-19.png

und nicht mehr oben drüber. Selbst wenn sie obendrüber erscheinen würden, kann dann vermutlich das Wörterbuch nicht mehr übersetzen.

Das Wörterbuch funktioniert leider manchmal nicht.

upload_2017-8-9_18-17-1.png

2) scheint ein sehr komplexes Thema zu sein. Wird z. B. hier diskutiert:
https://stackoverflow.com/questions/17898198/separate-japanese-words-in-python-javascript-or-java
Zum Vergrößern anklicken....

Andere lösen das anscheinend mit mecab tokenizer. Aber ich versteh das noch nicht. Ich kann auch erst einmal per Hand trennen.


4) Stelle dir das nicht zu einfach vor. Bei einem durchgehenden Satz müsste man von Hand die Positionen festlegen, wo ein neues Wort anfängt und davon abhängig die Wörter hervorheben. Einfacher wäre es, wenn es zu jedem Wort eine MP3-Datei gäbe. Dann könnte man diese mit einer Playlist nacheinander abspielen.
Zum Vergrößern anklicken....

Ich habe mal gesehen, wie jemand mit Audacity relativ schnell einzelne Wörter aus einem gesprochenen Text in einzelne mp3 umwandelte und daraus eine Vokabelliste baute. Das kann ich mir als Lösung vorstellen. Dann könnte man die von dir vorgeschlagene Playlist nehmen.

Andererseits gibt es doch heute schon Speech to Text Programm, die das gesprochene Wort ganz gut erkennen. Ich glaube mp3 to Text gibt es auch. Kann man da nicht irgendetwas zaubern?

Am wichtigsten wäre mir erst mal, dass ich speichern kann und die Übersetzung immer funktioniert.
Plus, wenn das Wörterbuch die Übersetzung nicht kennt, erzeugt es keinen div. Dann kann ich auch manuell nichts eintragen. Manchmal geht's schon, aber warum verstehe ich nicht.
 
Du musst dich hier registrieren:
https://labs.goo.ne.jp/en/apiregister/
und den Schlüssel hier eintragen:
Zum Vergrößern anklicken....

Ich habe mich registriert und nach einer Weile auch die Personal Access Tokens unter Settings gefunden.
Ich habe so einen Token in app_id eingetragen. Allerdings hat sich dadurch nichts verändert. Es wird kein Hiragana hinzugefügt. Ich weiß nicht, woran das liegt. Bei folgenden Feldern habe ich einen Haken gesetzt:

upload_2017-8-10_11-19-46.png

Das Feld mit der Übersetzung sollte jetzt auch sichtbar sein, wenn es keine Übersetzung gibt, so dass Du es editieren kannst.
Zum Vergrößern anklicken....

Ja, das hat geklappt.

Dieses liest sich viel versprechend:
https://labs.goo.ne.jp/api/en/hiragana-translation/
Zum Vergrößern anklicken....

Laut dem Text kann der Hiragana-Translator sogar automatisch Leerzeichen nach den Wörtern einfügen.
 
Ich habe deinen <body> kopiert und dann auch noch die "Application ID information" eingetragen.
Bei mir funktioniert jetzt leider nichts mehr.

upload_2017-8-10_19-29-10.png

Die API hatte ich von hier:
upload_2017-8-10_19-32-12.png

Hier mal mein gesamtes html:
Code: 
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="birkenbihl-style.css" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="jquery/jquery-3.2.1.min.js"
type="text/javascript"></script>
    </head>

    <body>
        

 <ruby>漢字<rt>かんじ</rt></ruby>
    <select id="translation"></select>
    <div id="source" contentEditable="true">xxx</div>
    <div id="output">
 
    </div>
    <script>
        function getTranslation(phr, callback) {
            var params = {
                from: "jpn",
                dest: "deu",
                format: "json",
                phrase: phr,
                pretty: "true"
            };
            $.ajax({
                url: "https://glosbe.com/gapi/translate",
                method: "GET",
                dataType: "jsonp",
                data: params,
                success: function (output) {
                    callback(output);
                }
            });
        }
        function getHiragana(phr, callback) {
            var params = {
                "app_id": "xxxxist_rausxxxx
",
                "sentence": phr,
                "output_type": "hiragana"
            };
            $.ajax({
                url: "https://labs.goo.ne.jp/api/hiragana",
                method: "POST",
                dataType: "json",
                data: params,
                success: function (output) {
                    callback(output);
                }
            });
 
        }
        $("#translation").on("change", function () {
            var transl = $(this).data("transl");
            console.log(transl);
            transl.text($(this).val());
        });
 
        source.addEventListener("input", function () {
            var words = $(this).text().replace(/[,.;"'!?]/g, "").replace(/\s/g, " ").split(" ");
            output.innerHTML = "";
            words.forEach(function (word, idx) {
                var html = "<div><span class='hiragana' contentEditable></span><br>" +
                    "<span class='word'>" + word + "</span><br>" +
                    "<span class='transl' contentEditable></span></div>";
                cword = $(html);
                $("#output").append(cword);
                var transl = cword.find("span.transl");
                getTranslation(word, function (output) {
                    if (output.tuc && output.tuc[0].phrase) transl.text(output.tuc[0].phrase.text);
                });
                var hiragana = cword.find("span.hiragana");
                getHiragana(word, function (output) {
                    console.log(output.converted);
                    hiragana.text(output.converted);
                });
            });
            $(".word").on("click", function () {
                var word = $(this);
                getTranslation($(this).text(), function (output) {
                    console.log(output);
                    output.tuc.forEach(function (item, idx) {
                        if (item.phrase) {
                            console.log(item.phrase.text);
                            $("#translation").append("<option>" + item.phrase.text + "</option>");
                        }
                    });
                    $("#translation").data("transl", word.nextAll(".transl"))
                    .trigger("change");
                });
            });
        });
    </script>
    
        
    
    </body>


</html>
 
Danke für den Tipp. Ich habe den Fehler behoben und jetzt geht's (bzw. gings).
Die Hiragana Abfrage läuft einwandfrei.

1) Ich habe noch das Problem, dass ich nach einigen Ausführungen keine Übersetzungen mehr bekomme.
Das liegt wohl an Glosbe und der IP-Restriktion. Ich bin bei meiner Recherche wieder hier gelandet: https://de.glosbe.com/a-api

Damit denke ich, sollte sich das Problem beheben lassen. Kannst mir das noch in den Code einbauen?

2) Es gibt ein paar Wörter, die vom Wörterbuch immer falsch übersetzt werden, häufig vorkommen und für die ich auch keine Übersetzung brauche: Zum Beispiel の wird immer mit "von" übersetzt. Oder を wird immer mit "nach" übersetzt.
Kann man es machen, dass diese Wörter einfach gar nicht übersetzt oder noch besser einfach das japanische Originalwort in die Übersetzung eingefügt wird? Es gibt nämlich im Deutschen gar keine Übersetzung für diese Wörter.

3) Ich werde mal einen Satz in mp3s zerlegen. Heute schaffe ich es nur vermutlich nicht mehr.

4) Japanischen Kommata, Punkten und Gänsefüßen kann das Script noch nicht erkennen: So sehen sie aus: 、 。「 」

5) Da der Hiragana-Converter bereits die Wörter erkennt und Leerzeichen einfügt, kann man da nicht die Hiragana als Maßstab für die div-Container-Erstellung nach jedem Wort nutzen?

Ansonsten gefällt mir das schon sehr sehr gut :)
 
Vielen Dank. Ich habe es gleich mal eingebaut und es hat auf Anhieb funktioniert.

1)
Ich habe jedoch die Lösung
https://labs.goo.ne.jp/api/morph
Zum Vergrößern anklicken....
Ja, das funktioniert. Das Problem ist nur, dass viele Wörter falsch getrennt werden und dadurch zum Teil sehr lustige Übersetzung entstehen. Eine 100% akkurate Zerlegung des Textes ist eh nicht möglich. Kann man eine Funktion einfügen, mit der getrennte divs zu einem zusammengefügt werden und umgekehrt?

Wer den Text weitaus besser zerlegt ist nach wie vor google translate. Die API dazu ist allerdings kostenpflichtig. Ich habe hier trotzdem eine work around gefunden, von dem ich nicht einschätzen kann, ob das funktioniert:

https://ctrlq.org/code/19909-google-translate-api

2) Wie kann die Speicherung ungesetzt werden. Eine lokale Speicherung sollte genügen.

3) Wenn man mit dem Drop-Down-Menü eine andere Übersetzung auswählt und danach in ein anderes fällt klickt, wird in das neu angeklickte Feld automatisch die Übersetzung vom vorherigen eingefügt.

Kann das Dropdown Menü am Bildschirm fixiert werden, so dass es automatisch mit runterkommt, wenn man bei einem längeren Text nach unten scrollt?
 
Ich habe hier die mit Audacity geschnittenen Audio-Dateien. Sie sind im mp3 Format.
Es ist ein japanischer Satz:

週４時間　は　アメリカ　の　27の　出版社　　に　企画を　待ち込んだ　が　

26社　に　断られた。

Hier können die Audio-Dateien heruntergeladen werden: http://bit.ly/2uP4opa

Das war allerdings ganz schön Arbeit. Ich bin mir nicht sicher, ob das zerlegen in einzelne Dateien nicht zu lange dauert.
 
Das mit dem Speichern hat geklappt.

1) Momentan übersetzt er nur bis zum ersten "。" bzw. ".". Danach ist Feierabend.

Ich habe mit Audacity das Tagging ausprobiert. Das Problem ist, dass bei einem gesprochenen Text im
Japanischen nicht immer Pausen vorkommen. Sprich Audacity erkennt viele Wörter nicht. Schlecht ist es aber auch nicht. Ich würde gerne mal die Vorgehensweise mit manuellen Eintragung der Zeiten probieren. Ich habe mir gedacht, dass wenn ich den japanischen Text in Audacity mit halber Geschwindigkeit vorlesen lasse, kann ich einfach die Zeiten der jeweiligen Wörter eintragen. Klar, das ist ein ganz schönes Gefummel und Zeitintensiv. Ich frage mich, ob im Originalprogramm auch alles per Hand eingetragen wurde.

2) Noch ist das Problem, dass die Leerzeichen von der morphologischen Analyse falsch eingetragen werden und deshalb falsche Übersetzungen entstehen. Gibt es die Möglichkeit, divs zusammenzufügen oder auseinander zu machen? Also zum Beispiel zwei nebeneinander stehende divs markieren und dann einne Art merge-Funktion?
 
Zu den/dem MP3s: Ich hatte schon daran gedacht, ein kleines Programm zu schreiben, wo man die MP3 mit geringerer Geschwindigkeit abspielt und dann durch Buttonclick jeweils einen Punkt aufzeichnet.
Zum Vergrößern anklicken....

1) An das Gleiche habe ich ebenfalls gedacht. In Audacity würde ich das genauso machen. Die mp3 langsamer laufen lassen und dann die Zeiten eintragen. Wenn ich alles per Hand schneide oder tags zur Hilfe nehmen, muss ich auch alles langsam laufen lassen und dann an der richtigen Stelle schneiden.

Wäre wieder eine interessante Herausforderung.
Zum Vergrößern anklicken....

Wenn Du diese Herausforderung gerne Annehmen möchtest, dann tue dir keinen Zwang an. Ich werde dich nicht aufhalten :)

2) Noch besteht das Problem, dass nur bis zum ersten Punkt übersetzt wird. Danach hört er irgendwie auf. Ich habe gerade in den Code geschaut, kann aber nicht erkennen, woran das liegt. Der japanische Punkt 。kommt ja gar nicht drinnen vor. Das hier meine ich:

upload_2017-8-13_16-16-3.png

Nicht über die URL wundern. Die hatte ich noch rumliegen.
 
So sollte es funktionieren:
Zum Vergrößern anklicken....

Ja, so funktioniert es. Danke.

Nur das Speichern klappt plötzlich nicht mehr. Wenn ich speichere und die Seite neu lade, erscheint im Drop-Down-Menü nichts, außer die drei Speicherungen, die ich vor ein paar Tagen angelegt hatte.

Ich habe dazu eine kleine HTML-Seite gemacht.
Zum Vergrößern anklicken....

Ich wusste jetzt nicht genau, ob ich die Seite lokal oder auf meinem Webserver öffnen sollte.
ich habe sie einmal mit Firefox lokal geöffnet:



und dann auch auf meinem Webserver:




Leider hat beides nicht funktioniert. Bevor ich den Support von meinem Hoster frage, wollte ich erst dich noch mal fragen, ob das lokal schon klappen sollte.
 
Zu controls.php: Wolltest Du da Screenshots einfügen? Wenn ja, hat es nicht geklappt, nichts zu sehen.
Zum Vergrößern anklicken....

Ja, ich wollte dort ein Screenshot von meinem Fehler 500 zeigen.

upload_2017-8-15_0-26-34.png

Ich habe wegen dem Fehler jetzt einfach den Support meines Webhosters angeschrieben. Das ist bestimmt wieder eine einfache Sache.

Dies ist eine einfache Vorversion wo der Dateiname der MP3 fest im Code einprogrogrammiert ist. Hast Du daran gedacht, diesen anzupassen?
Zum Vergrößern anklicken....

Daran habe ich nicht gedacht. Ich nehme mal an, dass ich auf dem Webserver ein Verzeichnis "audio" anlegen muss und dort die mp3 hineinlade. Richtig?
 
Danke für den Code.

Sieht so aus, als funktioniert das Speichern jetzt.

Die Fehlermeldung auf meinem Webspace ist auch verschwunden.
Allerdings habe ich das Audio noch nicht zum Laufen bekommen. Ich nutze dafür Firefox. Die Audio-Datei liegt im Verzeichnis. Doch wenn ich die Seite aufrufe arabischlernen24.de/audio.html , erhalte ich nur das:

upload_2017-8-15_16-35-25.png

Gleich am Anfang des Ladens erscheint für eine Halbe Sekunde der Player und verschwindet dann gleich wieder:

upload_2017-8-15_16-36-18.png

Das hier ist mein Code:

Code: 
<!doctype html>
<html>
<head>
</head>
<body>
    <audio id="aud" controls src="audio/01 - Du kannst schaffen, was du willst.mp3"></audio><br />
    <input id="time" />
    <button id="setcontrolpoint" onclick="set();">Kontrollpunkt setzen</button>
    <button onclick="play();">Vorhören</button>
    <span id="timemonitor"></span>
    <table>
        <thead>
            <tr>
                <th>500ms</th>
                <th>50ms</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td><img src="images/buttonup.png" onclick="change(500);" /></td>
                <td><img src="images/buttonup.png" onclick="change(50);" /></td>
            </tr>
            <tr>
                <td><img src="images/buttondown.png" onclick="change(-500);" /></td>
                <td><img src="images/buttondown.png" onclick="change(-50);" /></td>
            </tr>
        </tbody>
    </table>
    <script>
        aud.load();
        aud.pause();
        aud.playbackRate = 0.5;
        var tim;
        function set() {
            time.value = aud.currentTime;
        }
        function play() {
            aud.play();
            aud.currentTime = (time.value) - 2;
            var tim = setInterval(function() {
                if (aud.currentTime >= time.value) {
                    aud.pause();
                    clearInterval(tim);
                    setTimeout(function() {
                        aud.play();
                        setTimeout(function() {
                            aud.pause();
                        }, 2000);
                    }, 1000);
                }
            }, 10);
        }
        function change(delta) {
            var val = parseFloat(time.value);
            val += (delta / 1000);
            time.value = val;
        }
    </script>
</body>
</html>
 
So, jetzt hat es geklappt. Die Datei war bereits hochgeladen. Es waren, so wie du sagtest, die Leerzeichen im Namen der Datei.

Ich habe es gerade ausprobiert. So gefällt es mir schon gut. Von mir aus können wir das so einbauen. Etwas besseres fällt mir auch nicht ein und ich denke, damit kann man arbeiten.

Ich überlege nur gerade: Bei Audacity habe ich die Punkte immer vor Beginn eines Wortes gesucht. Doch ich glaube es ist einfacher, wenn man sich auf das Ende eines Wortes konzentriert und dort den Kontrollpunkt setzt.
 
Zwei kleine Bugs sind mir noch aufgefallen:

1) Es geht in den div-Containern kein Doppelklick zum schnellen markieren des Inhalts. Das ist aber nicht so schlimmt, weil alt+a funktioniert.

2) Wenn man eine neue Übersetzung für ein Wort eingibt und danach entweder wieder ins Hiragana- oder Kanji-Feld tippt, wird die Übersetzung zurückgesetzt.

3) Kann man den Speicherungen andere Namen geben. Ich denke mal, ich kann die .json-Datei auf meinem Webspace umbenennen. Doch ich denke auch, dass wenn ich das tue und die Veränderungen speicher, dass er dann eine neue Datei anlegen wird, statt die andere zu überspeichern.
 
Vielen Dank für die Mühe!!

Ich habe die Dateien aus deinem jpn.zip hochgeladen. Es gibt aber noch keine Veränderung. Muss ich nicht auch etwas an der index.html verändern, damit die Button, etc sichtbar werden? Das Audio habe ich in Data kopiert. Meinen API-Key habe ich noch in der index.html
 
Achso. Ich hatte zuvor die einzelnen .php Dateien ins Hauptverzeichnis kopiert.
Nun habe ich das komplette Verzeichnis jpn in den Domain-Ordner kopiert.

upload_2017-8-17_19-8-8.png

So sieht es im jpn-Verzeichnis aus.
Das einzige was ich jetzt nicht mehr auf dem Schirm hatte war die Auslagerung des Keys. Ich habe hier die Posts noch einmal durchgesehen, konnte aber nicht die Stelle finden, an der Du sagtest, dass du den API Key ausgelagert hast. Daher: Wie geht das noch einmal? Ich lege eine Text-Datei an, nenne diese key, trage meinen API Key mit "" ein und lade das dann in den js-Ordner?
 
Ich habe jetzt eine key.js Datei in den js-Ordner kopiert und deinen neuen jpn-Ordner hochgeladen.
Trotzdem noch keine Veränderung. Muss ich nicht den Inhalt aus der audio.html

HTML: 
<!doctype html>
<html>
<head>
</head>
<body>
    <audio id="aud" controls src="audio/testaudio.mp3"></audio><br />
    <input id="time" />
    <button id="setcontrolpoint" onclick="set();">Kontrollpunkt setzen</button>
    <button onclick="play();">Vorhören</button>
    <span id="timemonitor"></span>
    <table>
        <thead>
            <tr>
                <th>500ms</th>
                <th>50ms</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td><img src="images/buttonup.png" onclick="change(500);" /></td>
                <td><img src="images/buttonup.png" onclick="change(50);" /></td>
            </tr>
            <tr>
                <td><img src="images/buttondown.png" onclick="change(-500);" /></td>
                <td><img src="images/buttondown.png" onclick="change(-50);" /></td>
            </tr>
        </tbody>
    </table>
    <script>
        aud.load();
        aud.pause();
        aud.playbackRate = 0.5;
        var tim;
        function set() {
            time.value = aud.currentTime;
        }
        function play() {
            aud.play();
            aud.currentTime = (time.value) - 2;
            var tim = setInterval(function() {
                if (aud.currentTime >= time.value) {
                    aud.pause();
                    clearInterval(tim);
                    setTimeout(function() {
                        aud.play();
                        setTimeout(function() {
                            aud.pause();
                        }, 2000);
                    }, 1000);
                }
            }, 10);
        }
        function change(delta) {
            var val = parseFloat(time.value);
            val += (delta / 1000);
            time.value = val;
        }
    </script>
</body>
</html>

in meine index.html (also da, wo die Übersetzung stattfinden soll) kopieren?
 
Diesmal hat es geklappt. Jetzt habe ich es verstanden. Ich spiele gerade damit etwas rum.
Als ich den ersten Test gemacht habe, waren Audio und Text noch nicht synchron. Aber vielleicht habe ich da auch etwas falsch gemacht.

Eine Sache kann ich allerdings jetzt schon sagen. Das Fenster/Div für das Setzen der Kontrollpunkt müsste vielleicht mitscrollen. Denn wenn ich einen größeren Text habe, kann ich diesen nicht mehr sehen und muss dann immer wieder hochscrollen und schauen, was im div steht.

Was genau ist der Unterschied zwischen "Am Ende hinzufügen" und "vor Markierung hinzufügen.
Heißt das, dass der Kontrollpunkt entweder vor dem Div oder nach dem Div gesetzt wird?
 
1)
Meinst Du, dass es am unteren Fensterrand fixiert sein sollte, so wie hier der Footer:
http://boratb.bplaced.net/index55.html
Zum Vergrößern anklicken....

Ja, genau so meine ich das.

2)
  • "Am Ende hinzufügen": Der Kontrollpunkt wird am Ende der Liste angehängt.
  • "vor Markierung hinzufügen": Du kannst einen Kontrollpunkt durch Klick markieren, er bekommt dann einen blauen Rahmen. Mit diesem Button kannst Du den neuen dann vor dem markierten einfügen.
Zum Vergrößern anklicken....
Das habe ich jetzt verstanden. Ich wusste erst nicht, dass du die Stichpunkte als Liste bezeichnest. Aber das ist ja aus html-Sicht richtig.

3) Ich probiere es gerade aus. Aber noch habe ich Audio und Anzeige nicht synchron gekriegt. Die Anzeige hängt immer hinterher. Wenn im Audio ein Wort fertig gesprochen wurde, klicke ich auf "Kontrollpunkt setzen" und danach auf "Am Ende hinzufügen". Dann lasse ich das nächste Wort sprechen und klicke wieder auf "Kontrollpunkt setzen" und danach auf "Am Ende hinzufügen." Mit dieser Vorgehensweise hängt er aber immer hinterher. Mache ich da etwas falsch?

3) Wenn ich die Kontrollpunkte alle lösche, bleibt der erste in der Liste bestehen.


4) Das Laden der Speicherung funktioniert noch nicht.

5) Es fehlt noch das DropDown-Menü für Hiragana. Ich weiß nicht, ob das überhaupt möglich ist, aber im Prinzip müsste es wie bei den Übersetzungen sein. Die chinesischen Zeichen haben verschiedene Aussprachen. Bisher wird immer eine eingefügt. Zu gefühlten 70% stimmt die auch. Zu 30% nicht. Ich kann die zwar per Hand nachtragen. Ist aber recht nervig, weil ich dann immer erst die Tastatur umstellen muss und hoffen, dass ich mich nicht vertippe.

Ansonsten mal wieder ein herzliches Dankeschön. Ich habe schon ein schlechtes Gewissen, weil du hier so viel machst. Ich hoffe, dass du wenigstens jemanden kennst, der das auch gerne hätte und ihm geben kannst. Die Methode lässt sich auf alle Sprachen anwenden und hat mir entgegen der Meinung meiner Schullehrer gezeigt, dass ich doch Sprachen lernen kann (damals Spanisch). Oder du nutzt es selbst :)
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben