1. Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!
    Information ausblenden

Frage Wie Javascript onclick lauffähig machen?

Dieses Thema im Forum "JavaScript" wurde erstellt von Matthias, 26 April 2017.

  1. Sempervivum

    Sempervivum Aktives Mitglied

    Registriert seit:
    18 Oktober 2016
    Beiträge:
    423
    Punkte für Erfolge:
    28
    Der Fehler liegt hier:
    appid.png
    Wenn ich das korrigiere und meinen Key eintrage, funktioniert es einwandfrei.

    Tipp: Einen Editor verwenden, der solche Syntaxfehler anzeigt, z. B. Komodo.
     
    Werbung:

    Jetzt registrieren, damit diese Werbung verschwindet
  2. Matthias

    Matthias Mitglied

    Registriert seit:
    15 April 2017
    Beiträge:
    43
    Punkte für Erfolge:
    6
    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 :)
     
  3. Matthias

    Matthias Mitglied

    Registriert seit:
    15 April 2017
    Beiträge:
    43
    Punkte für Erfolge:
    6
    Ich benutze Brackets. Ich werde mal schauen, ob es dafür ein Plug In gibt, dass Syntaxfehler anzeigt.
     
  4. Sempervivum

    Sempervivum Aktives Mitglied

    Registriert seit:
    18 Oktober 2016
    Beiträge:
    423
    Punkte für Erfolge:
    28
    Zu 1): Ich hatte auch das Problem, dass meine IP gesperrt wurde. Mehr durch Zufall bin ich dann auf die interaktive Seite
    https://de.glosbe.com
    gegangen und habe ein Wort übersetzen lassen. Dabei musste ich bestätigen, dass ich ein Mensch bin und kein Roboter. Danach funktionierte die Übersetzung wieder.

    Zu 5): Daran hatte ich auch gedacht, aber offenbar ist die Zeichenzahl eines Wortes zwischen Hiragana und der normalen Schrift unterschiedlich, so dass die Zuordnung schwierig ist. Ich habe jedoch die Lösung
    https://labs.goo.ne.jp/api/morph
    problemlos umsetzen können, siehe Post #39. Hast Du das schon gesehen?

    Zu 2): Das werde ich als nächstes machen: Eine Liste anlegen mit Worten, die nicht übersetzt werden sollen.
     
  5. Sempervivum

    Sempervivum Aktives Mitglied

    Registriert seit:
    18 Oktober 2016
    Beiträge:
    423
    Punkte für Erfolge:
    28
    2) habe ich erledigt:
    Code (text):
    1. <!doctype html>
    2. <html>
    3. <head>
    4.     <script src="//code.jquery.com/jquery-1.10.2.js"></script>
    5. </head>
    6. <body>
    7.     <select id="translation"></select>
    8.     <div id="source" contentEditable="true">xxx</div>
    9.     <div id="output">
    10.  
    11.     </div>
    12.     <script>
    13.         var notranslation = ["の", "を"];
    14.         function getTranslation(phr, callback) {
    15.             var params = {
    16.                 from: "jpn",
    17.                 dest: "deu",
    18.                 format: "json",
    19.                 phrase: phr,
    20.                 pretty: "true"
    21.             };
    22.             $.ajax({
    23.                 url: "https://glosbe.com/gapi/translate",
    24.                 method: "GET",
    25.                 dataType: "jsonp",
    26.                 data: params,
    27.                 success: function (output) {
    28.                     callback(output);
    29.                 }
    30.             });
    31.         }
    32.         function getHiragana(phr, callback) {
    33.             var params = {
    34.                 "app_id": "ee4c943156954fd6db031945d53940224114111ebb53fefadd04c4d846fc6889",
    35.                 "sentence": phr,
    36.                 "output_type": "hiragana"
    37.             };
    38.             $.ajax({
    39.                 url: "https://labs.goo.ne.jp/api/hiragana",
    40.                 method: "POST",
    41.                 dataType: "json",
    42.                 data: params,
    43.                 success: function (output) {
    44.                     callback(output);
    45.                 }
    46.             });
    47.  
    48.         }
    49.         function splitSentence(sentence, callback) {
    50.             var params = {
    51.                 "app_id": "ee4c943156954fd6db031945d53940224114111ebb53fefadd04c4d846fc6889",
    52.                 "sentence": sentence,
    53.                 "info_filter": "form"
    54.             };
    55.             $.ajax({
    56.                 url: "https://labs.goo.ne.jp/api/morph",
    57.                 method: "POST",
    58.                 dataType: "json",
    59.                 data: params,
    60.                 success: function (output) {
    61.                     callback(output);
    62.                 }
    63.             });
    64.  
    65.         }
    66.  
    67.         $("#translation").on("change", function () {
    68.             var transl = $(this).data("transl");
    69.             console.log(transl);
    70.             transl.text($(this).val());
    71.         });
    72.  
    73.         function splitSentenceCallback(otpt) {
    74.             otpt.word_list[0].forEach(function (item, idx) {
    75.                 var word = item[0];
    76.                 var html = "<div><span class='hiragana' contentEditable></span><br>" +
    77.                     "<span class='word'>" + word + "</span><br>" +
    78.                     "<span class='transl' contentEditable></span></div>";
    79.                 var cword = $(html);
    80.                 $("#output").append(cword);
    81.                 var transl = cword.find("span.transl");
    82.                 if (notranslation.indexOf(word) == -1) {
    83.                     getTranslation(word, function (output) {
    84.                         if (output.tuc && output.tuc[0].phrase) {
    85.                             transl.text(output.tuc[0].phrase.text);
    86.                             cword.find("span.word").data("transl", output);
    87.                         }
    88.  
    89.                     });
    90.                 } else {
    91.                     transl.text(word);
    92.                 }
    93.                 var hiragana = cword.find("span.hiragana");
    94.                 getHiragana(word, function (output) {
    95.                     console.log(output.converted);
    96.                     hiragana.text(output.converted);
    97.                 });
    98.             });
    99.             $(".word").on("click", function () {
    100.                 var word = $(this);
    101.                 var transl = word.data("transl");
    102.                 transl.tuc.forEach(function (item, idx) {
    103.                     if (item.phrase) {
    104.                         console.log(item.phrase.text);
    105.                         $("#translation").append("<option>" + item.phrase.text + "</option>");
    106.                     }
    107.                 });
    108.                 $("#translation").data("transl", word.nextAll(".transl"))
    109.                 .trigger("change");
    110.             });
    111.         }
    112.  
    113.         source.addEventListener("input", function () {
    114.             //var words = $(this).text().replace(/[,.;"'!?]/g, "").replace(/\s/g, " ").split(" ");
    115.             output.innerHTML = "";
    116.             splitSentence($(this).text(), splitSentenceCallback);
    117.         });
    118.     </script>
    119.     <style>
    120.         #output div {
    121.             border: 1px solid black;
    122.             display: inline-block;
    123.             vertical-align: top;
    124.             text-align: center;
    125.         }
    126.         span.transl {
    127.             display: inline-block;
    128.             min-height: 1em;
    129.             min-width: 2em;
    130.         }
    131.         span.hiragana, span.word {
    132.             line-height: 1.5em;
    133.         }
    134.     </style>
    135. </body>
    136. </html>
     
  6. Matthias

    Matthias Mitglied

    Registriert seit:
    15 April 2017
    Beiträge:
    43
    Punkte für Erfolge:
    6
    Vielen Dank. Ich habe es gleich mal eingebaut und es hat auf Anhieb funktioniert.

    1)
    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?
     
  7. Matthias

    Matthias Mitglied

    Registriert seit:
    15 April 2017
    Beiträge:
    43
    Punkte für Erfolge:
    6
    Ich habe hier die mit Audacity geschnittenen Audio-Dateien. Sie sind im mp3 Format.
    Es ist ein japanischer Satz:

    週4時間 は アメリカ の 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.
     
  8. Sempervivum

    Sempervivum Aktives Mitglied

    Registriert seit:
    18 Oktober 2016
    Beiträge:
    423
    Punkte für Erfolge:
    28
    Ich dachte, es gäbe so eine automatische Funktion, um auf Grund der Pausen die Schnittpunkte automatisch festzulegen. Hast Du das nicht gefunden oder hat es nicht funktioniert?
    Gibt es, glaube ich, auch in MP3DirectCut.
    Eine Alternative zu dem Zerlegen in einzelne Dateien wäre, eine Liste mit den Zeiten anzulegen, wo die Wörter beginnen. Prüfe mal, ob das einfacher zu machen ist.
     
  9. Sempervivum

    Sempervivum Aktives Mitglied

    Registriert seit:
    18 Oktober 2016
    Beiträge:
    423
    Punkte für Erfolge:
    28
    Das war relativ einfach, ich habe die Controls in einen Container getan und diesen oben fixiert.

    Das hatte ich inzwischen auch schon bemerkt und es korrigiert.

    Bevor ich dies gelesen habe, hatte ich schon eine Speicherung auf dem Server implementiert. Schau es dir mal an. Der Dateiname wird automatisch durch Zusammenfügen der erste fünf deutschen Wörter erzeugt. Die Dateien werden in einem Verzeichnis uploads/japanisch abgelegt, dieses musst Du zuvor anlegen. Die PHP-Dateien musst Du im selben Verzeichnis wie die HTML-Datei ablegen.
    Probiere es mal, ob es OK für dich ist. Wenn nicht, kann ich es auch auf lokales Speichern umstellen. Auf dem Server hat es den Vorteil, dass es von verschiedenen Geräten aus zugänglich ist, Laptop, Desktop-PC, Handy.

    Code (text):
    1. <!doctype html>
    2. <html>
    3. <head>
    4.     <script src="//code.jquery.com/jquery-1.10.2.js"></script>
    5. </head>
    6. <body>
    7.     <div id="controls">
    8.         <select id="translation"></select>
    9.         <button id="save">Speichern</button>
    10.         <button id="load">Laden</button>
    11.         <select id="files"></select>
    12.     </div>
    13.     <div id="content">
    14.         <div id="source" contentEditable="true">xxx</div>
    15.         <div id="output"></div>
    16.     </div>
    17.     <script>
    18.         $("#load").on("click", function () {
    19.             $.ajax("getfiles.php", {
    20.                 data: {},
    21.                 method: "POST",
    22.                 success: function (output) {
    23.                     $("#files").empty().append(output);
    24.                 }
    25.             });
    26.         });
    27.         $("#files").on("change", function () {
    28.             $.getJSON("loadfile.php",
    29.                 { filename: this.options[this.selectedIndex].value },
    30.                 function (output) {
    31.                     console.log(output);
    32.                     var coutput = $("#output");
    33.                     output.forEach(function (item, idx) {
    34.                         var html = "<div><span class='hiragana' contentEditable>" + item.hiragana + "</span><br>" +
    35.                             "<span class='word'>" + item.word + "</span><br>" +
    36.                             "<span class='transl' contentEditable>" + item.transl + "</span></div>";
    37.                         var cword = $(html);
    38.                         cword.find(".word").data("transl", item.opts)
    39.                             .on("click", makeOptions);
    40.                         coutput.append(cword);
    41.                     });
    42.                 }
    43.             );
    44.         });
    45.         $("#save").on("click", function () {
    46.             var words = [];
    47.             var filename = "";
    48.             $("#output > div").each(function (idx, item) {
    49.                 itm = $(item);
    50.                 if (idx < 5) {
    51.                     if (idx > 0) filename += "-";
    52.                     filename += itm.find(".transl").text();
    53.                 }
    54.                 words.push({
    55.                     hiragana: itm.find(".hiragana").text(),
    56.                     word: itm.find(".word").text(),
    57.                     transl: itm.find(".transl").text(),
    58.                     opts: itm.find(".word").data("transl")
    59.                 });
    60.             });
    61.             filename = filename.replace(/[.,?/]/g, "");
    62.             filename += ".txt";
    63.             var words_json = JSON.stringify(words);
    64.             $.ajax(
    65.                 "savefile.php", {
    66.                     data: { filename: filename, words: words_json },
    67.                     method: "POST",
    68.                     success: function (output) {
    69.                         console.log(output);
    70.                     }
    71.                 });
    72.         });
    73.         var notranslation = ["の", "を"];
    74.         function getTranslation(phr, callback) {
    75.             var params = {
    76.                 from: "jpn",
    77.                 dest: "deu",
    78.                 format: "json",
    79.                 phrase: phr,
    80.                 pretty: "true"
    81.             };
    82.             $.ajax({
    83.                 url: "https://glosbe.com/gapi/translate",
    84.                 method: "GET",
    85.                 dataType: "jsonp",
    86.                 data: params,
    87.                 success: function (output) {
    88.                     callback(output);
    89.                 }
    90.             });
    91.         }
    92.         function getHiragana(phr, callback) {
    93.             var params = {
    94.                 "app_id": "key",
    95.                 "sentence": phr,
    96.                 "output_type": "hiragana"
    97.             };
    98.             $.ajax({
    99.                 url: "https://labs.goo.ne.jp/api/hiragana",
    100.                 method: "POST",
    101.                 dataType: "json",
    102.                 data: params,
    103.                 success: function (output) {
    104.                     callback(output);
    105.                 }
    106.             });
    107.  
    108.         }
    109.         function splitSentence(sentence, callback) {
    110.             var params = {
    111.                 "app_id": "key",
    112.                 "sentence": sentence,
    113.                 "info_filter": "form"
    114.             };
    115.             $.ajax({
    116.                 url: "https://labs.goo.ne.jp/api/morph",
    117.                 method: "POST",
    118.                 dataType: "json",
    119.                 data: params,
    120.                 success: function (output) {
    121.                     callback(output);
    122.                 }
    123.             });
    124.  
    125.         }
    126.  
    127.         $("#translation").on("change", function () {
    128.             var transl = $(this).data("transl");
    129.             console.log(transl);
    130.             transl.text($(this).val());
    131.         });
    132.  
    133.         function makeOptions() {
    134.             var word = $(this);
    135.             var transl = word.data("transl");
    136.             var seltransl = $("#translation");
    137.             seltransl.empty();
    138.             transl.tuc.forEach(function (item, idx) {
    139.                 if (item.phrase) {
    140.                     console.log(item.phrase.text);
    141.                     seltransl.append("<option>" + item.phrase.text + "</option>");
    142.                 }
    143.             });
    144.             seltransl.data("transl", word.nextAll(".transl"))
    145.                 .trigger("change");
    146.         }
    147.  
    148.         function splitSentenceCallback(otpt) {
    149.             otpt.word_list[0].forEach(function (item, idx) {
    150.                 var word = item[0];
    151.                 var html = "<div><span class='hiragana' contentEditable></span><br>" +
    152.                     "<span class='word'>" + word + "</span><br>" +
    153.                     "<span class='transl' contentEditable></span></div>";
    154.                 var cword = $(html);
    155.                 $("#output").append(cword);
    156.                 var transl = cword.find("span.transl");
    157.                 if (notranslation.indexOf(word) == -1) {
    158.                     getTranslation(word, function (output) {
    159.                         if (output.tuc && output.tuc[0].phrase) {
    160.                             transl.text(output.tuc[0].phrase.text);
    161.                             cword.find("span.word").data("transl", output);
    162.                         }
    163.  
    164.                     });
    165.                 } else {
    166.                     transl.text(word);
    167.                 }
    168.                 var hiragana = cword.find("span.hiragana");
    169.                 getHiragana(word, function (output) {
    170.                     console.log(output.converted);
    171.                     hiragana.text(output.converted);
    172.                 });
    173.             });
    174.             $(".word").on("click", makeOptions);
    175.         }
    176.  
    177.         source.addEventListener("input", function () {
    178.             //var words = $(this).text().replace(/[,.;"'!?]/g, "").replace(/\s/g, " ").split(" ");
    179.             output.innerHTML = "";
    180.             splitSentence($(this).text(), splitSentenceCallback);
    181.         });
    182.     </script>
    183.     <style>
    184.         #output div {
    185.             border: 1px solid black;
    186.             display: inline-block;
    187.             vertical-align: top;
    188.             text-align: center;
    189.         }
    190.         #output
    191.  
    192.         span.transl {
    193.             display: inline-block;
    194.             min-height: 1em;
    195.             min-width: 2em;
    196.         }
    197.  
    198.         span.hiragana, span.word, span.transl {
    199.             line-height: 1.5em;
    200.         }
    201.  
    202.         body {
    203.             height: 100vh;
    204.             margin: 0;
    205.             display: flex;
    206.             flex-direction: column;
    207.             font-family: arial;
    208.         }
    209.  
    210.             body > *:not(#content) {
    211.                 flex-shrink: 0;
    212.             }
    213.  
    214.         #content {
    215.             overflow-y: scroll;
    216.             flex-grow: 1;
    217.             flex-shrink: 1;
    218.             flex-basis: auto;
    219.         }
    220.     </style>
    221. </body>
    222. </html>
    getfiles.php:
    PHP:
    1. <?php
    2. ini_set('display_errors', '1');
    3.  
    4. $files = glob("uploads/japanisch/*.txt");
    5. echo '<option value="">Datei w&auml;hlen</option>';
    6. foreach ($files as $file) {
    7.     $file2 = str_replace('uploads/japanisch/', '', $file);
    8.     echo '<option value="' . $file . '">' . $file2 . '</option>';
    9. }
    10. ?>
    loadfile.php:
    PHP:
    1. <?php
    2. ini_set('display_errors', '1');
    3.  
    4. $filename = $_GET['filename'];
    5. $content = file_get_contents($filename);
    6. echo $content;
    7. ?>
    savefile.php:
    PHP:
    1. <?php
    2. ini_set('display_errors', '1');
    3.  
    4. $words = $_POST['words'];
    5. $filename = $_POST['filename'];
    6. echo $filename . '<br>' . $words;
    7. file_put_contents("uploads/japanisch/" . $filename, $words);
    8. ?>
     
    Zuletzt bearbeitet: 12 August 2017
  10. Matthias

    Matthias Mitglied

    Registriert seit:
    15 April 2017
    Beiträge:
    43
    Punkte für Erfolge:
    6
    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?
     
  11. Sempervivum

    Sempervivum Aktives Mitglied

    Registriert seit:
    18 Oktober 2016
    Beiträge:
    423
    Punkte für Erfolge:
    28
    Das habe ich gerade implementiert, allerdings erst Mal nur das Zusammenfügen. Man kann jetzt die Wörter markieren, sie werden dann mit einem dickeren blauen Rahmen hervor gehoben. Oben findet man dann einen Button "Mit nächstem verbinden", der das markierte und das darauf folgende Wort verbindet. Wenn man man mehr als zwei Wörter verbinden will, muss man das ganze wiederholen. Splitten mache ich später.
    Hier der Code:
    Code (text):
    1. <!doctype html>
    2. <html>
    3. <head>
    4.     <script src="//code.jquery.com/jquery-1.10.2.js"></script>
    5. </head>
    6. <body>
    7.     <div id="controls">
    8.         <select id="translation"></select>
    9.         <button id="split">Zerlegen</button>
    10.         <button id="join">Mit nächstem verbinden</button><br />
    11.         <button id="save">Speichern</button>
    12.         <button id="load">Laden</button>
    13.         <select id="files"></select>
    14.     </div>
    15.     <div id="content">
    16.         <div id="source" contentEditable="true">xxx</div>
    17.         <div id="output"></div>
    18.     </div>
    19.     <script>
    20.         let splitString = '日本の地上波蘭';
    21.         let x = [...splitString];
    22.         console.log(x);
    23.  
    24.         function makecword(hiragana, word, transl, opttransl) {
    25.             var html = "<div class='cword'><span class='hiragana' contentEditable>" + hiragana + "</span><br>" +
    26.                 "<span class='word'>" + word + "</span><br>" +
    27.                 "<span class='transl' contentEditable>" + transl + "</span></div>";
    28.             var cword = $(html);
    29.             if (hiragana == "") {
    30.                 getHiragana(word, function (output) {
    31.                     cword.find(".hiragana").text(output.converted);
    32.                 });
    33.             }
    34.             if (transl == "") {
    35.                 var transl = cword.find("span.transl");
    36.                 if (notranslation.indexOf(word) == -1) {
    37.                     getTranslation(word, function (output) {
    38.                         if (output.tuc[0] && output.tuc[0].phrase) {
    39.                             transl.text(output.tuc[0].phrase.text);
    40.                             cword.data("transl", output);
    41.                         }
    42.  
    43.                     });
    44.                 } else {
    45.                     transl.text(word);
    46.                 }
    47.             } else {
    48.                 if (opttransl) {
    49.                     cword.data("transl", opttransl);
    50.                 }
    51.             }
    52.             cword.on("click", function () {
    53.                 $(".cword").removeClass("active");
    54.                 $(this).addClass("active");
    55.                 makeOptions($(this));
    56.             });
    57.             return cword;
    58.         }
    59.  
    60.         $("#join").on("click", function () {
    61.             var cword = $(".cword.active");
    62.             var nextcword = cword.next(".cword");
    63.             var newhiragana = cword.find(".hiragana").text() + nextcword.find(".hiragana").text();
    64.             var newword = cword.find(".word").text() + nextcword.find(".word").text();
    65.             var newcword = makecword(newhiragana, newword, "");
    66.             cword.replaceWith(newcword);
    67.             nextcword.remove();
    68.         });
    69.  
    70.         $("#load").on("click", function () {
    71.             $.ajax("getfiles.php", {
    72.                 data: {},
    73.                 method: "POST",
    74.                 success: function (output) {
    75.                     $("#files").empty().append(output);
    76.                 }
    77.             });
    78.         });
    79.  
    80.         $("#files").on("change", function () {
    81.             $.getJSON("loadfile.php",
    82.                 { filename: this.options[this.selectedIndex].value },
    83.                 function (output) {
    84.                     console.log(output);
    85.                     var coutput = $("#output");
    86.                     coutput.empty();
    87.                     output.forEach(function (item, idx) {
    88.                         var cword = makecword(item.hiragana, item.word, item.transl, item.opts)
    89.                         coutput.append(cword);
    90.                     });
    91.                 }
    92.             );
    93.         });
    94.  
    95.         $("#save").on("click", function () {
    96.             var words = [];
    97.             var filename = "";
    98.             $("#output > div").each(function (idx, item) {
    99.                 itm = $(item);
    100.                 if (idx < 5) {
    101.                     if (idx > 0) filename += "-";
    102.                     filename += itm.find(".transl").text();
    103.                 }
    104.                 words.push({
    105.                     hiragana: itm.find(".hiragana").text(),
    106.                     word: itm.find(".word").text(),
    107.                     transl: itm.find(".transl").text(),
    108.                     opts: itm.data("transl")
    109.                 });
    110.             });
    111.             filename = filename.replace(/[.,?/]/g, "");
    112.             filename += ".txt";
    113.             var words_json = JSON.stringify(words);
    114.             $.ajax(
    115.                 "savefile.php", {
    116.                     data: { filename: filename, words: words_json },
    117.                     method: "POST",
    118.                     success: function (output) {
    119.                         console.log(output);
    120.                     }
    121.                 });
    122.         });
    123.  
    124.         var notranslation = ["の", "を"];
    125.  
    126.         function getTranslation(phr, callback) {
    127.             var params = {
    128.                 from: "jpn",
    129.                 dest: "deu",
    130.                 format: "json",
    131.                 phrase: phr,
    132.                 pretty: "true"
    133.             };
    134.             $.ajax({
    135.                 url: "https://glosbe.com/gapi/translate",
    136.                 method: "GET",
    137.                 dataType: "jsonp",
    138.                 data: params,
    139.                 success: function (output) {
    140.                     callback(output);
    141.                 }
    142.             });
    143.         }
    144.  
    145.         function getHiragana(phr, callback) {
    146.             var params = {
    147.                 "app_id": "key",
    148.                 "sentence": phr,
    149.                 "output_type": "hiragana"
    150.             };
    151.             $.ajax({
    152.                 url: "https://labs.goo.ne.jp/api/hiragana",
    153.                 method: "POST",
    154.                 dataType: "json",
    155.                 data: params,
    156.                 success: function (output) {
    157.                     callback(output);
    158.                 }
    159.             });
    160.         }
    161.  
    162.         function splitSentence(sentence, callback) {
    163.             var params = {
    164.                 "app_id": "key",
    165.                 "sentence": sentence,
    166.                 "info_filter": "form"
    167.             };
    168.             $.ajax({
    169.                 url: "https://labs.goo.ne.jp/api/morph",
    170.                 method: "POST",
    171.                 dataType: "json",
    172.                 data: params,
    173.                 success: function (output) {
    174.                     callback(output);
    175.                 }
    176.             });
    177.         }
    178.  
    179.         $("#translation").on("change", function () {
    180.             var transl = $(this).data("transl");
    181.             console.log(transl);
    182.             transl.text($(this).val());
    183.         });
    184.  
    185.         function makeOptions(cword) {
    186.             var transl = cword.data("transl");
    187.             var seltransl = $("#translation");
    188.             seltransl.empty();
    189.             transl.tuc.forEach(function (item, idx) {
    190.                 if (item.phrase) {
    191.                     console.log(item.phrase.text);
    192.                     seltransl.append("<option>" + item.phrase.text + "</option>");
    193.                 }
    194.             });
    195.             seltransl.data("transl", cword.find(".transl"))
    196.                 .trigger("change");
    197.         }
    198.  
    199.         $("#source").on("input", function () {
    200.             //var words = $(this).text().replace(/[,.;"'!?]/g, "").replace(/\s/g, " ").split(" ");
    201.             $("#output").empty();
    202.             splitSentence($(this).text(), function (output) {
    203.                 output.word_list[0].forEach(function (item, idx) {
    204.                     var word = item[0];
    205.                     cword = makecword("", word, "");
    206.                     $("#output").append(cword);
    207.                 });
    208.             });
    209.         });
    210.     </script>
    211.     <style>
    212.         #output div {
    213.             border: 1px solid black;
    214.             display: inline-block;
    215.             vertical-align: top;
    216.             text-align: center;
    217.         }
    218.         #output div.active {
    219.             border: 2px solid blue;
    220.         }
    221.         #output
    222.  
    223.         span.transl {
    224.             display: inline-block;
    225.             min-height: 1em;
    226.             min-width: 2em;
    227.         }
    228.  
    229.         span.hiragana, span.word, span.transl {
    230.             line-height: 1.5em;
    231.         }
    232.  
    233.         body {
    234.             height: 100vh;
    235.             margin: 0;
    236.             display: flex;
    237.             flex-direction: column;
    238.             font-family: arial;
    239.         }
    240.  
    241.             body > *:not(#content) {
    242.                 flex-shrink: 0;
    243.             }
    244.  
    245.         #content {
    246.             overflow-y: scroll;
    247.             flex-grow: 1;
    248.             flex-shrink: 1;
    249.             flex-basis: auto;
    250.         }
    251.     </style>
    252. </body>
    253. </html>
    Das Abspielen der MP3s stelle ich erst Mal zurück, bis Du eine gangbare Lösung gefunden hast, entweder mit splitten oder mit festlegen der Zeiten.
    Wundert mich nicht, das hatte ich schon erwartet.
     
    Zuletzt bearbeitet: 12 August 2017
  12. Sempervivum

    Sempervivum Aktives Mitglied

    Registriert seit:
    18 Oktober 2016
    Beiträge:
    423
    Punkte für Erfolge:
    28
    PS: 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. Wenn es mit Audacity nicht befriedigend funktioniert, probiere ich das mal. Wäre wieder eine interessante Herausforderung.
     
  13. Sempervivum

    Sempervivum Aktives Mitglied

    Registriert seit:
    18 Oktober 2016
    Beiträge:
    423
    Punkte für Erfolge:
    28
    Splitten habe ich auch implementiert: Es wird an der Cursorposition geteilt, d. h. Cursor in das japanische Wort setzen und "Zerlegen" drücken. Beachte, dass ich den Schlüssel jetzt in eine externe Datei gelegt habe.
    Code (text):
    1. <!doctype html>
    2. <html>
    3. <head>
    4.     <script src="//code.jquery.com/jquery-1.10.2.js"></script>
    5.     <script src="js/key.js"></script>
    6. </head>
    7. <body>
    8.     <div id="controls">
    9.         <select id="translation"></select>
    10.         <button id="split">Zerlegen</button>
    11.         <button id="join">Mit nächstem verbinden</button><br />
    12.         <button id="save">Speichern</button>
    13.         <button id="load">Laden</button>
    14.         <select id="files"></select>
    15.     </div>
    16.     <div id="content">
    17.         <div id="source" contentEditable>xxx</div>
    18.         <div id="output"></div>
    19.     </div>
    20.     <script>
    21.         //let splitString = '日本の地上波蘭';
    22.         //let x = [...splitString];
    23.         //console.log(x);
    24.  
    25.         function makecword(hiragana, word, transl, opttransl) {
    26.             var html = "<div class='cword'><span class='hiragana' contentEditable>" + hiragana + "</span><br>" +
    27.                 "<span class='word' contentEditable>" + word + "</span><br>" +
    28.                 "<span class='transl' contentEditable>" + transl + "</span></div>";
    29.             var cword = $(html);
    30.             if (hiragana == "") {
    31.                 getHiragana(word, function (output) {
    32.                     cword.find(".hiragana").text(output.converted);
    33.                 });
    34.             }
    35.             if (transl == "") {
    36.                 var transl = cword.find("span.transl");
    37.                 if (notranslation.indexOf(word) == -1) {
    38.                     getTranslation(word, function (output) {
    39.                         if (output.tuc[0] && output.tuc[0].phrase) {
    40.                             transl.text(output.tuc[0].phrase.text);
    41.                             cword.data("transl", output);
    42.                         }
    43.  
    44.                     });
    45.                 } else {
    46.                     transl.text(word);
    47.                 }
    48.             } else {
    49.                 if (opttransl) {
    50.                     cword.data("transl", opttransl);
    51.                 }
    52.             }
    53.             cword.on("click", function () {
    54.                 $(".cword").removeClass("active");
    55.                 $(this).addClass("active");
    56.                 makeOptions($(this));
    57.             });
    58.             return cword;
    59.         }
    60.  
    61.         $("#join").on("click", function () {
    62.             var cword = $(".cword.active");
    63.             var nextcword = cword.next(".cword");
    64.             var newhiragana = cword.find(".hiragana").text() + nextcword.find(".hiragana").text();
    65.             var newword = cword.find(".word").text() + nextcword.find(".word").text();
    66.             var newcword = makecword(newhiragana, newword, "");
    67.             cword.replaceWith(newcword);
    68.             nextcword.remove();
    69.         });
    70.  
    71.         $("#split").on("click", function () {
    72.             var cword = $(".cword.active");
    73.             var spanword = cword.find("span.word");
    74.             var word = spanword.text();
    75.             var first = makecword("", word.substr(0, window.getSelection().anchorOffset), "");
    76.             var second = makecword("", word.substr(window.getSelection().anchorOffset), "");
    77.             cword.after(second);
    78.             cword.after(first);
    79.             cword.remove();
    80.         });
    81.  
    82.         $("#load").on("click", function () {
    83.             $.ajax("getfiles.php", {
    84.                 data: {},
    85.                 method: "POST",
    86.                 success: function (output) {
    87.                     $("#files").empty().append(output);
    88.                 }
    89.             });
    90.         });
    91.  
    92.         $("#files").on("change", function () {
    93.             $.getJSON("loadfile.php",
    94.                 { filename: this.options[this.selectedIndex].value },
    95.                 function (output) {
    96.                     console.log(output);
    97.                     var coutput = $("#output");
    98.                     coutput.empty();
    99.                     output.forEach(function (item, idx) {
    100.                         var cword = makecword(item.hiragana, item.word, item.transl, item.opts)
    101.                         coutput.append(cword);
    102.                     });
    103.                 }
    104.             );
    105.         });
    106.  
    107.         $("#save").on("click", function () {
    108.             var words = [];
    109.             var filename = "";
    110.             $("#output > div").each(function (idx, item) {
    111.                 itm = $(item);
    112.                 if (idx < 5) {
    113.                     if (idx > 0) filename += "-";
    114.                     filename += itm.find(".transl").text();
    115.                 }
    116.                 words.push({
    117.                     hiragana: itm.find(".hiragana").text(),
    118.                     word: itm.find(".word").text(),
    119.                     transl: itm.find(".transl").text(),
    120.                     opts: itm.data("transl")
    121.                 });
    122.             });
    123.             filename = filename.replace(/[.,?/]/g, "");
    124.             filename += ".txt";
    125.             var words_json = JSON.stringify(words);
    126.             $.ajax(
    127.                 "savefile.php", {
    128.                     data: { filename: filename, words: words_json },
    129.                     method: "POST",
    130.                     success: function (output) {
    131.                         console.log(output);
    132.                     }
    133.                 });
    134.         });
    135.  
    136.         var notranslation = ["の", "を"];
    137.  
    138.         function getTranslation(phr, callback) {
    139.             var params = {
    140.                 from: "jpn",
    141.                 dest: "deu",
    142.                 format: "json",
    143.                 phrase: phr,
    144.                 pretty: "true"
    145.             };
    146.             $.ajax({
    147.                 url: "https://glosbe.com/gapi/translate",
    148.                 method: "GET",
    149.                 dataType: "jsonp",
    150.                 data: params,
    151.                 success: function (output) {
    152.                     callback(output);
    153.                 }
    154.             });
    155.         }
    156.  
    157.         function getHiragana(phr, callback) {
    158.             var params = {
    159.                 "app_id": key,
    160.                 "sentence": phr,
    161.                 "output_type": "hiragana"
    162.             };
    163.             $.ajax({
    164.                 url: "https://labs.goo.ne.jp/api/hiragana",
    165.                 method: "POST",
    166.                 dataType: "json",
    167.                 data: params,
    168.                 success: function (output) {
    169.                     callback(output);
    170.                 }
    171.             });
    172.         }
    173.  
    174.         function splitSentence(sentence, callback) {
    175.             var params = {
    176.                 "app_id": key,
    177.                 "sentence": sentence,
    178.                 "info_filter": "form"
    179.             };
    180.             $.ajax({
    181.                 url: "https://labs.goo.ne.jp/api/morph",
    182.                 method: "POST",
    183.                 dataType: "json",
    184.                 data: params,
    185.                 success: function (output) {
    186.                     callback(output);
    187.                 }
    188.             });
    189.         }
    190.  
    191.         $("#translation").on("change", function () {
    192.             var transl = $(this).data("transl");
    193.             console.log(transl);
    194.             transl.text($(this).val());
    195.         });
    196.  
    197.         function makeOptions(cword) {
    198.             var transl = cword.data("transl");
    199.             var seltransl = $("#translation");
    200.             seltransl.empty();
    201.             transl.tuc.forEach(function (item, idx) {
    202.                 if (item.phrase) {
    203.                     console.log(item.phrase.text);
    204.                     seltransl.append("<option>" + item.phrase.text + "</option>");
    205.                 }
    206.             });
    207.             seltransl.data("transl", cword.find(".transl"))
    208.                 .trigger("change");
    209.         }
    210.  
    211.         $("#source").on("input", function () {
    212.             //var words = $(this).text().replace(/[,.;"'!?]/g, "").replace(/\s/g, " ").split(" ");
    213.             $("#output").empty();
    214.             splitSentence($(this).text(), function (output) {
    215.                 output.word_list[0].forEach(function (item, idx) {
    216.                     var word = item[0];
    217.                     cword = makecword("", word, "");
    218.                     $("#output").append(cword);
    219.                 });
    220.             });
    221.         });
    222.     </script>
    223.     <style>
    224.         #output div {
    225.             border: 1px solid black;
    226.             display: inline-block;
    227.             vertical-align: top;
    228.             text-align: center;
    229.         }
    230.         #output div.active {
    231.             border: 2px solid blue;
    232.         }
    233.         #output
    234.  
    235.         span.transl {
    236.             display: inline-block;
    237.             min-height: 1em;
    238.             min-width: 2em;
    239.         }
    240.  
    241.         span.hiragana, span.word, span.transl {
    242.             line-height: 1.5em;
    243.         }
    244.  
    245.         body {
    246.             height: 100vh;
    247.             margin: 0;
    248.             display: flex;
    249.             flex-direction: column;
    250.             font-family: arial;
    251.         }
    252.  
    253.             body > *:not(#content) {
    254.                 flex-shrink: 0;
    255.             }
    256.  
    257.         #content {
    258.             overflow-y: scroll;
    259.             flex-grow: 1;
    260.             flex-shrink: 1;
    261.             flex-basis: auto;
    262.         }
    263.     </style>
    264. </body>
    265. </html>
     
  14. Matthias

    Matthias Mitglied

    Registriert seit:
    15 April 2017
    Beiträge:
    43
    Punkte für Erfolge:
    6
    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.

    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.
     
  15. Sempervivum

    Sempervivum Aktives Mitglied

    Registriert seit:
    18 Oktober 2016
    Beiträge:
    423
    Punkte für Erfolge:
    28
    Das mit dem Punkt werde ich mir ansehen.

    Ich habe einen Vorversuch mit dem audio-Tag gemacht mit dem Ergebnis, dass man nur mit halber Geschwindigkeit abspielen kann und nicht langsamer. Das ist aber noch zu schnell, um Kontrollpunkte durch Buttonclick setzen zu können. Leider sind die Webmittel, Javascript und audio-Tag, das einzige was ich beherrsche, kein C oder Java.
     
  16. Sempervivum

    Sempervivum Aktives Mitglied

    Registriert seit:
    18 Oktober 2016
    Beiträge:
    423
    Punkte für Erfolge:
    28
    Das mit dem Punkt hat sich geklärt: Die API zerlegt den String nicht nur in Wörter sondern auch in Sätze und erzeugt ein mehrdimensionales Array: Erste Stufe sind die Sätze, zweite Stufe die Wörter. Weil ich das nicht verstanden hatte, hatte ich nur das erste Element der ersten Stufe, d. h. den ersten Satz verarbeitet. So sollte es funktionieren:
    Code (text):
    1. <!doctype html>
    2. <html>
    3. <head>
    4.     <script src="//code.jquery.com/jquery-1.10.2.js"></script>
    5.     <script src="js/key.js"></script>
    6. </head>
    7. <body>
    8.     <div id="controls">
    9.         <select id="translation"></select>
    10.         <button id="split">Zerlegen</button>
    11.         <button id="join">Mit nächstem verbinden</button><br />
    12.         <button id="save">Speichern</button>
    13.         <button id="load">Laden</button>
    14.         <select id="files"></select>
    15.     </div>
    16.     <div id="content">
    17.         <div id="source" contentEditable>xxx</div>
    18.         <div id="output"></div>
    19.     </div>
    20.     <script>
    21.         //let splitString = '日本の地上波蘭';
    22.         //let x = [...splitString];
    23.         //console.log(x);
    24.  
    25.         function makecword(hiragana, word, transl, opttransl) {
    26.             var html = "<div class='cword'><span class='hiragana' contentEditable>" + hiragana + "</span><br>" +
    27.                 "<span class='word' contentEditable>" + word + "</span><br>" +
    28.                 "<span class='transl' contentEditable>" + transl + "</span></div>";
    29.             var cword = $(html);
    30.             if (hiragana == "") {
    31.                 getHiragana(word, function (output) {
    32.                     cword.find(".hiragana").text(output.converted);
    33.                 });
    34.             }
    35.             if (transl == "") {
    36.                 var transl = cword.find("span.transl");
    37.                 if (notranslation.indexOf(word) == -1) {
    38.                     getTranslation(word, function (output) {
    39.                         if (output.tuc[0] && output.tuc[0].phrase) {
    40.                             transl.text(output.tuc[0].phrase.text);
    41.                             cword.data("transl", output);
    42.                         }
    43.  
    44.                     });
    45.                 } else {
    46.                     transl.text(word);
    47.                 }
    48.             } else {
    49.                 if (opttransl) {
    50.                     cword.data("transl", opttransl);
    51.                 }
    52.             }
    53.             cword.on("click", function () {
    54.                 $(".cword").removeClass("active");
    55.                 $(this).addClass("active");
    56.                 makeOptions($(this));
    57.             });
    58.             return cword;
    59.         }
    60.  
    61.         $("#join").on("click", function () {
    62.             var cword = $(".cword.active");
    63.             var nextcword = cword.next(".cword");
    64.             var newhiragana = cword.find(".hiragana").text() + nextcword.find(".hiragana").text();
    65.             var newword = cword.find(".word").text() + nextcword.find(".word").text();
    66.             var newcword = makecword(newhiragana, newword, "");
    67.             cword.replaceWith(newcword);
    68.             nextcword.remove();
    69.         });
    70.  
    71.         $("#split").on("click", function () {
    72.             var cword = $(".cword.active");
    73.             var spanword = cword.find("span.word");
    74.             var word = spanword.text();
    75.             var first = makecword("", word.substr(0, window.getSelection().anchorOffset), "");
    76.             var second = makecword("", word.substr(window.getSelection().anchorOffset), "");
    77.             cword.after(second);
    78.             cword.after(first);
    79.             cword.remove();
    80.         });
    81.  
    82.         $("#load").on("click", function () {
    83.             $.ajax("getfiles.php", {
    84.                 data: {},
    85.                 method: "POST",
    86.                 success: function (output) {
    87.                     $("#files").empty().append(output);
    88.                 }
    89.             });
    90.         });
    91.  
    92.         $("#files").on("change", function () {
    93.             $.getJSON("loadfile.php",
    94.                 { filename: this.options[this.selectedIndex].value },
    95.                 function (output) {
    96.                     console.log(output);
    97.                     var coutput = $("#output");
    98.                     coutput.empty();
    99.                     output.forEach(function (item, idx) {
    100.                         var cword = makecword(item.hiragana, item.word, item.transl, item.opts)
    101.                         coutput.append(cword);
    102.                     });
    103.                 }
    104.             );
    105.         });
    106.  
    107.         $("#save").on("click", function () {
    108.             var words = [];
    109.             var filename = "";
    110.             $("#output > div").each(function (idx, item) {
    111.                 itm = $(item);
    112.                 if (idx < 5) {
    113.                     if (idx > 0) filename += "-";
    114.                     filename += itm.find(".transl").text();
    115.                 }
    116.                 words.push({
    117.                     hiragana: itm.find(".hiragana").text(),
    118.                     word: itm.find(".word").text(),
    119.                     transl: itm.find(".transl").text(),
    120.                     opts: itm.data("transl")
    121.                 });
    122.             });
    123.             filename = filename.replace(/[.,?/]/g, "");
    124.             filename += ".txt";
    125.             var words_json = JSON.stringify(words);
    126.             $.ajax(
    127.                 "savefile.php", {
    128.                     data: { filename: filename, words: words_json },
    129.                     method: "POST",
    130.                     success: function (output) {
    131.                         console.log(output);
    132.                     }
    133.                 });
    134.         });
    135.  
    136.         var notranslation = ["の", "を"];
    137.  
    138.         function getTranslation(phr, callback) {
    139.             var params = {
    140.                 from: "jpn",
    141.                 dest: "deu",
    142.                 format: "json",
    143.                 phrase: phr,
    144.                 pretty: "true"
    145.             };
    146.             $.ajax({
    147.                 url: "https://glosbe.com/gapi/translate",
    148.                 method: "GET",
    149.                 dataType: "jsonp",
    150.                 data: params,
    151.                 success: function (output) {
    152.                     callback(output);
    153.                 }
    154.             });
    155.         }
    156.  
    157.         function getHiragana(phr, callback) {
    158.             var params = {
    159.                 "app_id": key,
    160.                 "sentence": phr,
    161.                 "output_type": "hiragana"
    162.             };
    163.             $.ajax({
    164.                 url: "https://labs.goo.ne.jp/api/hiragana",
    165.                 method: "POST",
    166.                 dataType: "json",
    167.                 data: params,
    168.                 success: function (output) {
    169.                     callback(output);
    170.                 }
    171.             });
    172.         }
    173.  
    174.         function splitSentence(sentence, callback) {
    175.             var params = {
    176.                 "app_id": key,
    177.                 "sentence": sentence,
    178.                 "info_filter": "form"
    179.             };
    180.             $.ajax({
    181.                 url: "https://labs.goo.ne.jp/api/morph",
    182.                 method: "POST",
    183.                 dataType: "json",
    184.                 data: params,
    185.                 success: function (output) {
    186.                     callback(output);
    187.                 }
    188.             });
    189.         }
    190.  
    191.         $("#translation").on("change", function () {
    192.             var transl = $(this).data("transl");
    193.             console.log(transl);
    194.             transl.text($(this).val());
    195.         });
    196.  
    197.         function makeOptions(cword) {
    198.             var transl = cword.data("transl");
    199.             var seltransl = $("#translation");
    200.             seltransl.empty();
    201.             transl.tuc.forEach(function (item, idx) {
    202.                 if (item.phrase) {
    203.                     console.log(item.phrase.text);
    204.                     seltransl.append("<option>" + item.phrase.text + "</option>");
    205.                 }
    206.             });
    207.             seltransl.data("transl", cword.find(".transl"))
    208.                 .trigger("change");
    209.         }
    210.  
    211.         $("#source").on("input", function () {
    212.             //var words = $(this).text().replace(/[,.;"'!?]/g, "").replace(/\s/g, " ").split(" ");
    213.             $("#output").empty();
    214.             splitSentence($(this).text(), function (output) {
    215.                 output.word_list.forEach(function (sentence, isentence) {
    216.                     sentence.forEach(function (word, iword) {
    217.                         var word = word[0];
    218.                         cword = makecword("", word, "");
    219.                         $("#output").append(cword);
    220.                     });
    221.                 })
    222.             });
    223.         });
    224.     </script>
    225.     <style>
    226.         #output div {
    227.             border: 1px solid black;
    228.             display: inline-block;
    229.             vertical-align: top;
    230.             text-align: center;
    231.         }
    232.         #output div.active {
    233.             border: 2px solid blue;
    234.         }
    235.         #output
    236.  
    237.         span.transl {
    238.             display: inline-block;
    239.             min-height: 1em;
    240.             min-width: 2em;
    241.         }
    242.  
    243.         span.hiragana, span.word, span.transl {
    244.             line-height: 1.5em;
    245.         }
    246.  
    247.         body {
    248.             height: 100vh;
    249.             margin: 0;
    250.             display: flex;
    251.             flex-direction: column;
    252.             font-family: arial;
    253.         }
    254.  
    255.             body > *:not(#content) {
    256.                 flex-shrink: 0;
    257.             }
    258.  
    259.         #content {
    260.             overflow-y: scroll;
    261.             flex-grow: 1;
    262.             flex-shrink: 1;
    263.             flex-basis: auto;
    264.         }
    265.     </style>
    266. </body>
    267. </html>
     
  17. Sempervivum

    Sempervivum Aktives Mitglied

    Registriert seit:
    18 Oktober 2016
    Beiträge:
    423
    Punkte für Erfolge:
    28
    Ich habe dazu eine kleine HTML-Seite gemacht. Die MP3 wird mit halber Geschwindigkeit abgespielt. Langsamer ging es leider nicht. Während des Abspielens kannst Du "Kontrollpunkt setzen" drücken. Ein gesetzter Kontrollpunkt kann mit den Pfeiltasten um 500 oder 50 ms verändert werden. Vorhören: Das Abspielen beginnt zwei Sekunden vor dem Kontrollpunkt, am Kontrollpunkt wird eine Pause von einer Sekunde eingeschoben und nach zwei weiteren Sekunden stoppt die Wiedergabe wieder.
    Was noch fehlt, ist das Speichern des Kontrollpunktes in einer Liste und das Laden der MP3 über ein Menü. Ich will erst Mal abwarten, ob Du dieses Vorgehen nützlich findest.
    Die schlechte Nachricht: Funktioniert weder in Chrome noch in Opera. Ein Bug verhindert das Abspielen ab einer bestimmten Position.
    Code (text):
    1. <!doctype html>
    2. <html>
    3. <head>
    4. </head>
    5. <body>
    6.     <audio id="aud" controls src="audio/01 - The Greatest Cowboy Of Them All.mp3"></audio><br />
    7.     <input id="time" />
    8.     <button id="setcontrolpoint" onclick="set();">Kontrollpunkt setzen</button>
    9.     <button onclick="play();">Vorhören</button>
    10.     <span id="timemonitor"></span>
    11.     <table>
    12.         <thead>
    13.             <tr>
    14.                 <th>500ms</th>
    15.                 <th>50ms</th>
    16.             </tr>
    17.         </thead>
    18.         <tbody>
    19.             <tr>
    20.                 <td><img src="images/buttonup.png" onclick="change(500);" /></td>
    21.                 <td><img src="images/buttonup.png" onclick="change(50);" /></td>
    22.             </tr>
    23.             <tr>
    24.                 <td><img src="images/buttondown.png" onclick="change(-500);" /></td>
    25.                 <td><img src="images/buttondown.png" onclick="change(-50);" /></td>
    26.             </tr>
    27.         </tbody>
    28.     </table>
    29.     <script>
    30.         aud.load();
    31.         aud.pause();
    32.         aud.playbackRate = 0.5;
    33.         var tim;
    34.         function set() {
    35.             time.value = aud.currentTime;
    36.         }
    37.         function play() {
    38.             aud.play();
    39.             aud.currentTime = (time.value) - 2;
    40.             var tim = setInterval(function() {
    41.                 if (aud.currentTime >= time.value) {
    42.                     aud.pause();
    43.                     clearInterval(tim);
    44.                     setTimeout(function() {
    45.                         aud.play();
    46.                         setTimeout(function() {
    47.                             aud.pause();
    48.                         }, 2000);
    49.                     }, 1000);
    50.                 }
    51.             }, 10);
    52.         }
    53.         function change(delta) {
    54.             var val = parseFloat(time.value);
    55.             val += (delta / 1000);
    56.             time.value = val;
    57.         }
    58.     </script>
    59. </body>
    60. </html>
     
  18. Matthias

    Matthias Mitglied

    Registriert seit:
    15 April 2017
    Beiträge:
    43
    Punkte für Erfolge:
    6
    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 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.
     
  19. Sempervivum

    Sempervivum Aktives Mitglied

    Registriert seit:
    18 Oktober 2016
    Beiträge:
    423
    Punkte für Erfolge:
    28
    Zu controls.php: Wolltest Du da Screenshots einfügen? Wenn ja, hat es nicht geklappt, nichts zu sehen.
    Dies ist eine einfache Vorversion wo der Dateiname der MP3 fest im Code einprogrogrammiert ist. Hast Du daran gedacht, diesen anzupassen?
    Ich habe es noch Mal getestet und habe fest gestellt, dass dieser Code nur auf einem Webserver funktioniert. Wenn Du keinen lokalen hast, musst Du es bei deinem Provider hoch laden. Wenn es dann immer noch nicht funktioniert, wäre es am besten, wenn Du die URL posten könntest.
     
  20. Sempervivum

    Sempervivum Aktives Mitglied

    Registriert seit:
    18 Oktober 2016
    Beiträge:
    423
    Punkte für Erfolge:
    28
    PS: Um das Speichern kümmere ich mich später. Ist sicher nur eine Kleinigkeit.