From c8b0933c19b4df900fad61f2a7b62409b088963c Mon Sep 17 00:00:00 2001 From: Tobias Rohde Date: Mon, 22 Apr 2024 15:47:06 +0200 Subject: [PATCH 1/4] New plugin: speech recognition --- docs/demos/index.html | 1 + docs/demos/plugins/speechrecognition.html | 87 ++++++++ docs/documentation/plugins/index.html | 60 ++++++ docs/index.html | 8 + .../trumbowyg.speechrecognition.js | 199 ++++++++++++++++++ .../ui/icons/speechrecognition.svg | 1 + 6 files changed, 356 insertions(+) create mode 100644 docs/demos/plugins/speechrecognition.html create mode 100644 plugins/speechrecognition/trumbowyg.speechrecognition.js create mode 100644 plugins/speechrecognition/ui/icons/speechrecognition.svg diff --git a/docs/demos/index.html b/docs/demos/index.html index 7a3615ab..15bb20ac 100644 --- a/docs/demos/index.html +++ b/docs/demos/index.html @@ -70,6 +70,7 @@

  • Resizimg
  • Ruby
  • Special chars
    • +
  • Speech recognition
  • Table
  • Template
  • Upload
    • diff --git a/docs/demos/plugins/speechrecognition.html b/docs/demos/plugins/speechrecognition.html new file mode 100644 index 00000000..f5d0d24c --- /dev/null +++ b/docs/demos/plugins/speechrecognition.html @@ -0,0 +1,87 @@ + + + + + Speech recognition plugin | Trumbowyg + + + + +
    +
    +

    Speech recognition plugin

    + +
    +

    Basic usage

    +

    + This plugin allow you to enter text via speech recognition in Trumbowyg. +

    + + Read speech recognition plugin documentation + +
    + +

    The code

    + 
    
+$('#editor')
+.trumbowyg({
+    btns: [
+        ['speechrecognition']
+    ]
+});
+
    +
    + +
    +

    Language setting

    + +
    + +

    The code

    + 
    
+$('#editor-settings-lang')
+.trumbowyg({
+    btns: [
+        ['speechrecognition']
+    ],
+    plugins: {
+        speechrecognition: {
+            lang: 'de-DE'
+        }
+    }
+});
+
    +
    + +
    +

    Setup

    + +

    In head tag

    + 
    
+
    +

    At the end of body

    + 
    
+<!-- Import jQuery -->
+<script src="//ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
+<script>window.jQuery || document.write('<script src="js/vendor/jquery-3.3.1.min.js"><\/script>')</script>
+
    +
    +
    +
    + + + + + + + + + + + + + diff --git a/docs/documentation/plugins/index.html b/docs/documentation/plugins/index.html index e1ba3a1b..8984d266 100644 --- a/docs/documentation/plugins/index.html +++ b/docs/documentation/plugins/index.html @@ -62,6 +62,7 @@

  • Resizimg
  • Ruby
  • Special Chars
    • +
  • Speech recognition
  • Table
  • Template
  • Upload
    • @@ -1196,6 +1197,65 @@

    Options

    +
    +

    Speech recogintion

    + +

    + Speech recognition plugin allows you to add text via speech. +

    + +

    + Try speech recognition live demo! + + View speech recognition plugin code on GitHub + +

    + +

    How to use it?

    + 
    
+<!-- Import Trumbowyg speech recognition at the end of <body>... -->
+<script src="trumbowyg/dist/plugins/speechrecognition/trumbowyg.speechrecognition.min.js"></script>
+
    +

    + Then you can use the new button definition speechrecognition. +

    + + 
    
+$('#my-editor').trumbowyg({
+    btns: [
+        ['speechrecognition']
+    ]
+});
+
    + +

    Options

    +
    +
    lang string
    +
    + Language code which language should be detected. +
    + Default: en_GB +
    +
    + +

    + Example with options: +

    + 
    
+$('#my-editor)
+.trumbowyg({
+    btns: [
+        ['speechrecognition']
+    ],
+    plugins: {
+        speechrecognition: {
+            lang: 'de-DE'
+        }
+    }
+});
+
    +
    +

    Table

    diff --git a/docs/index.html b/docs/index.html index 1bfc1fcc..7ac1decb 100644 --- a/docs/index.html +++ b/docs/index.html @@ -687,6 +687,14 @@

    Extends Trumbowyg

    Special chars +
  • + + + + + Speech recognition + +
  • diff --git a/plugins/speechrecognition/trumbowyg.speechrecognition.js b/plugins/speechrecognition/trumbowyg.speechrecognition.js new file mode 100644 index 00000000..033cbff6 --- /dev/null +++ b/plugins/speechrecognition/trumbowyg.speechrecognition.js @@ -0,0 +1,199 @@ +/* =========================================================== + * trumbowyg.speechrecognition.js v1.0 + * Speech recognition plugin for Trumbowyg + * http://alex-d.github.com/Trumbowyg + * =========================================================== + * Author : Tobias Rohde + * Website : tobiasrohde.de + */ +(function ($) { + 'use strict'; + + const defaultOptions = { + lang: "en-GB" + }; + + const iconWrap = $(document.createElementNS("http://www.w3.org/2000/svg", "svg")); + let btnElement = null; + let editor = null; + let finalText = ''; + let recognizing = false; + + const recognition = new webkitSpeechRecognition(); + recognition.continuous = true; + recognition.interimResults = true; + + recognition.onstart = function() { + recognizing = true; + btnElement.style.fill='red'; + }; + + recognition.onerror = function(event) { + recognizing = false; + btnElement.style.fill='#222'; + }; + + recognition.onend = function() { + recognizing = false; + btnElement.style.fill='#222'; + }; + + recognition.onresult = function(event) { + let interimText = ''; + if (typeof(event.results) == 'undefined') { + recognition.onend = null; + recognition.stop(); + return; + } + for (let i = event.resultIndex; i < event.results.length; ++i) { + if (event.results[i].isFinal) { + finalText += event.results[i][0].transcript + "
    "; + editor.html(finalText); + } else { + interimText += event.results[i][0].transcript; + editor.html(finalText + interimText); + } + } + }; + + function buildButtonDef (trumbowyg) { + return { + fn: function () { + if (recognizing) { + recognition.stop(); + return; + } + + // I don't know it there's a more elegant way to access the speech recognition button. + btnElement = document.body.querySelector(`#${trumbowyg.$c[0].id}`).parentElement.querySelector('.trumbowyg-speechrecognition-button').firstChild; + editor = trumbowyg; + finalText = ''; + recognition.lang = trumbowyg.o.plugins.speechrecognition.lang; + recognition.start(); + btnElement.style.fill='red'; + } + } + } + + function buildButtonIcon() { + if ($("#trumbowyg-speechrecognition").length > 0) { + return; + } + + iconWrap.addClass("trumbowyg-icons"); + + // Mic icon from Remix Icon - https://remixicon.com/ + iconWrap.html(` + + + + `).appendTo(document.body); + } + + + $.extend(true, $.trumbowyg, { + langs: { + az: { + speechrecognition: 'Nitqin tanınması' + }, + bg: { + speechrecognition: 'Разпознаване на реч' + }, + by: { + speechrecognition: 'Распазнаванне маўлення' + }, + ca: { + speechrecognition: 'Reconeixement de veu' + }, + cs: { + speechrecognition: 'Rozpoznávání řeči' + }, + da: { + speechrecognition: 'Talegenkendelse' + }, + de: { + speechrecognition: 'Spracherkennung' + }, + el: { + speechrecognition: 'Αναγνώριση ομιλίας' + }, + en: { + speechrecognition: 'Speech recognition' + }, + es: { + speechrecognition: 'Reconocimiento de voz' + }, + et: { + speechrecognition: 'Kõnetuvastus' + }, + fi: { + speechrecognition: 'Puheentunnistus' + }, + fr: { + speechrecognition: 'Reconnaissance vocale' + }, + hr: { + speechrecognition: 'Prepoznavanje govora' + }, + hu: { + speechrecognition: 'Beszédfelismerés' + }, + it: { + speechrecognition: 'Riconoscimento vocale' + }, + lt: { + speechrecognition: 'Kalbos atpažinimas' + }, + nb: { + speechrecognition: 'Talegjenkjenning' + }, + nl: { + speechrecognition: 'Spraakherkenning' + }, + pl: { + speechrecognition: 'Rozpoznawanie mowy' + }, + pt: { + speechrecognition: 'Reconhecimento de voz' + }, + ro: { + speechrecognition: 'Recunoașterea vorbirii' + }, + rs: { + speechrecognition: 'Препознавање говора' + }, + ru: { + speechrecognition: 'Распознавание речи' + }, + sk: { + speechrecognition: 'Rozpoznávanie reči' + }, + sq: { + speechrecognition: 'Njohja e të folurit' + }, + sv: { + speechrecognition: 'Taligenkänning' + }, + ua: { + speechrecognition: 'Розпізнавання мови' + } + }, + + plugins: { + speechrecognition: { + init: function (trumbowyg) { + trumbowyg.o.plugins.speechrecognition = $.extend(true, {}, + defaultOptions, + trumbowyg.o.plugins.speechrecognition || {} + ); + + // Unfortunately Firefox has not implemented the WebSpeechAPI yet. + if(!navigator.userAgent.toLowerCase().includes('firefox')) { + buildButtonIcon(); + trumbowyg.addBtnDef('speechrecognition', buildButtonDef(trumbowyg)); + } + } + } + } + }) +})(jQuery); diff --git a/plugins/speechrecognition/ui/icons/speechrecognition.svg b/plugins/speechrecognition/ui/icons/speechrecognition.svg new file mode 100644 index 00000000..039a168b --- /dev/null +++ b/plugins/speechrecognition/ui/icons/speechrecognition.svg @@ -0,0 +1 @@ + \ No newline at end of file From 44e5084cf1b8d087f2a8fe7fb9eb7e75617c82c3 Mon Sep 17 00:00:00 2001 From: Tobias Rohde Date: Mon, 22 Apr 2024 16:14:17 +0200 Subject: [PATCH 2/4] Code quality - removed ESLint errors --- .../trumbowyg.speechrecognition.js | 24 ++++++++++--------- 1 file changed, 13 insertions(+), 11 deletions(-) diff --git a/plugins/speechrecognition/trumbowyg.speechrecognition.js b/plugins/speechrecognition/trumbowyg.speechrecognition.js index 033cbff6..565da94e 100644 --- a/plugins/speechrecognition/trumbowyg.speechrecognition.js +++ b/plugins/speechrecognition/trumbowyg.speechrecognition.js @@ -10,16 +10,18 @@ 'use strict'; const defaultOptions = { - lang: "en-GB" + lang: 'en-GB' }; - const iconWrap = $(document.createElementNS("http://www.w3.org/2000/svg", "svg")); + const iconWrap = $(document.createElementNS('http://www.w3.org/2000/svg', 'svg')); let btnElement = null; let editor = null; let finalText = ''; let recognizing = false; - const recognition = new webkitSpeechRecognition(); + const SpeechRecognition = window.webkitSpeechRecognition || window.SpeechRecognition; + const recognition = new SpeechRecognition(); + //const recognition = new webkitSpeechRecognition(); recognition.continuous = true; recognition.interimResults = true; @@ -28,7 +30,7 @@ btnElement.style.fill='red'; }; - recognition.onerror = function(event) { + recognition.onerror = function() { recognizing = false; btnElement.style.fill='#222'; }; @@ -40,14 +42,14 @@ recognition.onresult = function(event) { let interimText = ''; - if (typeof(event.results) == 'undefined') { + if (typeof(event.results) === 'undefined') { recognition.onend = null; recognition.stop(); return; } - for (let i = event.resultIndex; i < event.results.length; ++i) { + for (let i = event.resultIndex; i < event.results.length; i+=1) { if (event.results[i].isFinal) { - finalText += event.results[i][0].transcript + "
    "; + finalText += event.results[i][0].transcript + '
    '; editor.html(finalText); } else { interimText += event.results[i][0].transcript; @@ -72,15 +74,15 @@ recognition.start(); btnElement.style.fill='red'; } - } + }; } function buildButtonIcon() { - if ($("#trumbowyg-speechrecognition").length > 0) { + if ($('#trumbowyg-speechrecognition').length > 0) { return; } - iconWrap.addClass("trumbowyg-icons"); + iconWrap.addClass('trumbowyg-icons'); // Mic icon from Remix Icon - https://remixicon.com/ iconWrap.html(` @@ -195,5 +197,5 @@ } } } - }) + }); })(jQuery); From 0c5118d6f92257d6807086845ccd564b069ceb16 Mon Sep 17 00:00:00 2001 From: Tobias Rohde Date: Mon, 22 Apr 2024 16:42:08 +0200 Subject: [PATCH 3/4] Removed commented code --- plugins/speechrecognition/trumbowyg.speechrecognition.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/plugins/speechrecognition/trumbowyg.speechrecognition.js b/plugins/speechrecognition/trumbowyg.speechrecognition.js index 565da94e..3fb1f13e 100644 --- a/plugins/speechrecognition/trumbowyg.speechrecognition.js +++ b/plugins/speechrecognition/trumbowyg.speechrecognition.js @@ -21,7 +21,7 @@ const SpeechRecognition = window.webkitSpeechRecognition || window.SpeechRecognition; const recognition = new SpeechRecognition(); - //const recognition = new webkitSpeechRecognition(); + recognition.continuous = true; recognition.interimResults = true; From e8a5f531c58cebab89aee7a1234d3932724d521a Mon Sep 17 00:00:00 2001 From: Tobias Rohde Date: Mon, 22 Apr 2024 16:43:06 +0200 Subject: [PATCH 4/4] Note that it does not work with Firefox yet --- docs/demos/plugins/speechrecognition.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/demos/plugins/speechrecognition.html b/docs/demos/plugins/speechrecognition.html index f5d0d24c..6850f2d8 100644 --- a/docs/demos/plugins/speechrecognition.html +++ b/docs/demos/plugins/speechrecognition.html @@ -14,7 +14,7 @@

    Speech recognition plugin

    Basic usage

    - This plugin allow you to enter text via speech recognition in Trumbowyg. + This plugins allow you to enter text via speech recognition in Trumbowyg. Suddenly it does not work with Firefox which has not implemented the Web Speech API yet.

    Read speech recognition plugin documentation