web
You’re offline. This is a read only version of the page.
close
Skip to main content

Notifications

Announcements

No record found.

News and Announcements icon
Community site session details

Community site session details

Session Id :
Dynamics 365 Community / Blogs / Jesús Almaraz blog / Speech to text JavaScript t...

Speech to text JavaScript tool to GitHub Pages: Extending Teams quickly

Views (358)
Jalmaraz Profile Picture Jalmaraz 669

In lockdown, me and more people are using the PC all the time again. I am a slow writer, so I need some help. MS Word dictation is good, but I don´t want to open word to dictate to other apps like Teams or Outlook. I noticed that Speech to text capabilities in mobile devices, such as tablets and smart phones are very accurate, but not in desktop PCs, or I may say I didn´t find a good alternative. With the feeling that I am re-inventing the wheel, I made a home-made Speech recognition, to develop these topics:

  • Our community is locked down, working a lot in in Business Central, and an off-topic could be good to referesh our heads.
  • I knew how Speech Recognition API of Chrome Navigator works and I wanted to try it. I am a Microsoft guy, and usually prefer its products but google speech recognition is a great tool. I don´t want to break down all the code: you could do it by your selves reading my example, and with good documentation in https://developer.mozilla.org/en-US/docs/Web/API/Web_Speech_API/Using_the_Web_Speech_API The creepy face of this, is the feeling that this API is learning about my speech more and more without help. Or may be a “silver paper hat” theory.
  • I wanted to make a JavaScript example with clipboard handling.
  • Speech recognition  is important to AI integration in Business Central. In a future I will try an add-in with Speech recognition, but now mic is banned in BC.
  • I saw Git pages and  wanted to test them to deploy and run a page hosted in Git.
  • I liked to include my own Web app in a Teams Tab. Could be a good way to extend Teams features adding Website Tabs with these features.

The tool is very simple. Atention only works in Chrome:

  • Open the site, select your language, and begin to speak. You´ll see the transcription in text area bellow.
  • If “Copy to Clipboard” is checked all the text content will be copied to the Clipboard automatically.
  • If you want to start again, push “Clear /Start Listening” button. Almost always when you lose the focus, you need to push again the button. If you keep the focus in the button, could be easy to make the cycle, “Push Start Button”- “Alt Tab to the document”-“Paste”- “Alt Tab to the browser”- “Push Start Button” etc.
It is only HTML, feel free to download the file and change whatever you.
Feel freer even, if you want to improve the aspect (shows my amateur JavaScript programming level)!!!!!

Git Pages

Git pages are public pages hosted in GitHub. GitHub with Git pages, not only store your code, publish your website, and deploy it to make possible people access and run it directly, in this case my Speech to text tool. The code in this case only runs in your computer but is taken from the web and public accessible.
The way to do it is create a new branch and set the type to gh-pages branch. If you go later to General settings there is this information:
8267.GitPages.png
To try the dictation tool you only have to go to https://jalmarazmartn.github.io/SpeechToClipboard/SpeechToText.html

Teams Integration

We can integrate a HTML and JavaScript app in Teams in a new Tab, the same way you can integrate an add-in in Business Central. When you create a new tab , you choose Website option, and your page will be integrated in Teams:
Teams1.png
In the example we can include the Speech to text app in Teams:
Teams2.png
 
 
 
 

Comments

*This post is locked for comments