Foreign Language Support about react-transcript-editor HOT 7 OPEN

@pietrop ok sure :) For my use case, I basically just added this project to yours, and then changed various settings to make it more suitable for Khmer rather than English. And that itself is just a wrapper for the Web Speech API

Here's my demo page if you want to take a look. Still clearly looks like the BBC project :) I made some UI changes too that you might be interested in as well, including:

1. Can change the timecodes;
2. Can start at a certain time if you send in a query string (eg this)
3. Can copy the current time to the clipboard by clicking "Share Current Time"
4. Speed improvements and less buggy behaviour (at least when using Khmer) by not using draft js entities and just highlighting the whole word block when the video is at that time

To get the speech recognition thing to work, just hit start, and then record what you want to say. Then when you want to spit out a json file that can be used in the transcript editor, hit "Generate Transcript JSON". (the stop and reset buttons might or might not work very well). It'll be hard for you (unless you happen to know Khmer ;)) since I set Khmer as the default language, but that would be easy to change in the code if you wanted to. The voice recognition is surprisingly good, and I'm sure it's far better for English than it is in Khmer since Khmer isn't as popular of a language.

My github repository is private for various reasons, but I can give you access to poke around the code if you're interested. The code is a bit messy since this is just a side project for me so haven't spent much time cleaning up, but might be helpful.

from react-transcript-editor.

Hi @RyanQuey
Thanks for reaching out,

The component uses DraftJs under the hood, and from their docs I get that

Text is rendered with an LTR or RTL direction automatically as the user types. You should not need to do anything to set direction yourself.

Altho haven't tried it, so not sure if it works out of the box.

Also from the docs:

While languages are automatically aligned to the left or right during composition, as defined by the content characters, it is also possible for engineers to manually set the text alignment for an editor's contents.

The Editor component therefore provides a textAlignment prop, with a simple set of values: 'left', 'center', and 'right'. Using these values, the contents of your editor will be aligned to the specified direction regardless of language and character set.

What languages where you looking into? Are you able to run some tests?

• It be interesting to test this out. And see if the component can handle RTL has is, or whether a PR is needed with this textAlignment prop.

• I think it also needs finding out if the the component would need recognise RTL and move time-codes and speakers to the right side? (perhaps flip the media player and position of the video as well?)

from react-transcript-editor.

Hi @pietrop, Thanks for your quick response...and sorry for my slow one!

I'm actually only testing Khmer (Cambodian), which is LTR. It seems to work really well overall, although there are some other minor issues, which might or might not be related to the different language.

Once I get things working on Khmer though, if I get a chance I'll give it a shot with Hebrew and will let you know the results. My current project is to start off using the Web Speech API to generate a json transcript that your react-transcript-editor can then take edit.

from react-transcript-editor.

@pietrop

I didn't implement any recording feature actually, it just takes the audio and converts to text directly. I'm sure there is a way to capture the audio as well though (maybe something like this). However, I'm not sure if having two apis (voice to text and recording) listening to the same mic feed would interrupt things potentially (at the very least I'm sure it would eat up more browser resources).

My use case never really calls for recording, since I'm mostly taking things that are already recorded and playing it through the microphone.

Regarding the live feed: It is of course ideal to have a live feed, but I ended up finding that playing the media through my speakers and then back through the mic worked good enough anyways, just about as good as a live speaker speaking into the microphone (at least, that's my personal experience). I did look into voicemeeter some and tried it out, but didn't seem to help very much to be worth it, and implementing that was not part of the app anyways, that's separate software to be installed. Perhaps it would have been more helpful if I knew how to use the Voicemeeter software better as well :)

It would definitely be possible to pass the transcript data from the recording directly into the component without having to download though; should be very easy to implement that if you wanted to.

from react-transcript-editor.

Ah, nevermind...thinking about it more I don't think there is much need for anything additional to support foreign languages, they would just need to put the foreign text into the relevant strings and it should work, is that correct?

from react-transcript-editor.

Thanks @RyanQuey , let me know how you get on integrating with the Web Speech API, I'd be curious to see if it something we can add support for.

from react-transcript-editor.

Hi @RyanQuey ,
Apologies for the delayed reply, and thanks for the detailed explanation, just finally found the time to have a look a the demo, and looks good!

I think the mic input recording, might overlap a bit with this use case #112 it be interesting to see how you implemented it in your version.

I was able to start the mic and get the recognition going and export the json (in BBC Kaldi format) file of the recording. I did not figure out however how would I get the audio of the recording to add it to the transcript component?

Also it be interesting to see if it's possible to pass the transcript json data from the recording as well as the audio from the recording to the component without having to download and re-upload.

from react-transcript-editor.