I am attempting to implement a DraftJS editor that highlights words in a transcription while its recorded audio is playing (kind of like karaoke).
I receive the data in this format:
[
{
transcript: "This is the first block",
timestamps: [0, 1, 2.5, 3.2, 4.1, 5],
},
{
transcript: "This is the second block. Let's sync the audio with the words",
timestamps: [6, 7, 8.2, 9, 10, 11.3, 12, 13, 14, 15, 16, 17.2],
},
...
]
I then map this received data to ContentBlocks and initialize the editor's ContentState with them by using ContentState.createFromBlockArray(blocks)
It seems like the "DraftJS" way of storing the timestamp metadata would be to create an Entity for each word with its respective timestamp, and then scan through the currentContent as the audio plays and highlight entities up until the current elapsed time. But I am not sure if this is the right way to do this, as it doesn't seem performant for large transcriptions.
Note: the transcript needs to remain editable while maintaining this karaoke functionality
Any help or discussion is appreciated!
I ended up doing exactly what I described in the question: store timestamps in DraftJS entities. After a few more weeks with DraftJS it seems this is the correct way to do this.
Related
I'm working on Mat in OpenCV. However, I need to manually calculate the Mat by myself. Is there is a way of accessing Mat likes 2D array?
const myMat = cv.matFromArray(cv, 3, 3, cv.CV_64F, [
[1, 2, 3],
[4, 5, 6],
[7, 8, 9],
])
const newMat = someProcessThatReturnMat(myMat)
/* OpenCV in JS cannot access Mat like this */
const result = someProcess(newMat[1][2], newMat[2][0])
Thank you in advance
Updated: The problem is cv.matFromArray cannot convert 2D array to Mat. You have to use it as 1D array. That's why it never return the correct values. For example:
const myMat = cv.matFromArray(3, 3, cv.CV_64F, [1,2,3,4,5,6,7,8,9])
And then, you can access the value
const value = myMat.doubleAt(1, 2) // row 1, col 2
You need to use the doubleAt(y,x) method.
It's double because the mat's content is CV_64F, not because you want doubles.
You can also use .data64F to access a flat Float64Array of the Mat's data.
OpenCV.js is... rough. It originated from someone's Google Summer of Code and hasn't received significant care since. Documentation amounts to some tutorials; API docs seem to be missing entirely. The "Mat" interface emulated the at() method from C++, badly, instead of looking at numpy (python) or making this access feel "native" to javascript. Overloading the [] operator is possible using a Proxy but that was not implemented.
Here's an example: https://docs.opencv.org/4.x/de/d06/tutorial_js_basic_ops.html
Feel free to browse OpenCV's issues and maybe suggest some improvements.
I'm working on a tile based city builder. Currently the way the data is stored is an array of objects. Within each object, it has information like its location and other tile properties,
State.land = [
{ location: [0, 0] },
{ location: [0, 1] },
{ location: [1, 1] },
{ location: [1, 2] },
{ location: [-1, 0] },
]
The player can click on spots next to existing locations which would push a new object with the location into the land array.
Currently working on a delete method. You can only delete a land if all adjacent lands can reach [0, 0] ([0, 0] is not delete-able)
Im thinking this would be a good way to implement a nice path finding algorithm and DFS was the first that came into mind.
I've only ever implemented DFS while leetcoding but it's been awhile since I last done it. Would DFS be a good option for this problem?
I'm working on a React Native app where I want to play an audio file and visualize it, I didn't find a suitable package for it and decided to make it myself.
I made everything but audio visualization. To visualizate a file I need some kind of library that will analyze audio for me and return numbers array. I will use each number of the array as a point on my future graph.
Let's imagine I have this package, ideally I would like to use like this:
const audioPath = somePackage.analyzeAudio(audio.url);
console.log(audioPath);
// Output: [0, 0, 1, 2, 5, 10, 8, 0]
In array [0, 0, 1, 2, 5, 10, 8, 0] I will understand that at the beginning the audio has no sound at all then it's getting louder and at the end it's silent again. Later I can use these numbers to plot a graph.
Is there a way to do it ?
I couldn't find anything useful to analyze an audio on client side so I decided to do it on server (nodejs) and then send parsed data to client.
I implemented it with help of this package => https://github.com/audiojs/web-audio-api.
This code helped me a lot => https://github.com/victordibia/beats/blob/master/beats.js
I'm looking for a way get a console output from Google Chrome into my python program. I have a script coded in JS that finishes in around 1 second, but my python implementation (exactly same logic, etc., the only difference is that it's in python and not JS) takes about 15 seconds to run. Therefore I'm looking for a way to get the printout in Chrome console to my python program.
This is the current way I'm doing it:
Python program uses pyautogui to click and does what it needs to do inside to trigger the function running in JS.
JS completes the function in 1s and prints to console, something like:
(22) [6, 4, 4, 6, 0, 1, 1 2, 4, 4, 6, 4, 2, 4, 4, 6, 0, 0, 2, 4, 4, 6, 0]
I would like to find a way to get this output into python as I have another script that takes the output and does further calculations to it.
I've thought of using Selenium but that'd introduce too much overhead (probably requiring 3s+ for waiting for chrome to open up).
I'm currently working on a game's character database. The character data and information about all the characters is written in JavaScript and the front end design is written in CSS. Each character has certain attributes (attack, hp, recovery, etc.). The one I'm focusing on is their Stars. Their stars refer to their rarity (1 star = extremely common; 6 stars = extremely rare). The game recently introduced a super evolution technique wherein a 6 star character can become a 6 star + (read as 6 star plus) character. This is where my problem is. I know that the JavaScript will work just fine and I know that my problem is in the CSS. Please look at the code below.
This is the JavaScript for one of the Characters:
[ "Whitebeard: Four Emperors", "STR", [ "Striker", "Powerhouse" ], "6_plus", 65, 4, 5, 99, 5000000, 3148, 996, 142, 3806, 1558, 347, 1 ],
And the CSS to go with it:
.stars-6_plus:before { color: #00bfff; content: '\2605\2605\2605\2605\2605\2605\002B'; }
Ideally, I would change the JavaScript to say 6+ instead of 6_plus and the CSS the same way, but I can't figure out how to do it. I'm not sure if there even is a way to do it the way that I'm hoping for. I was told that maybe I could make a conditional so that it says 6+ when it reads 6_plus but I'm not sure if that's possible. I would really appreciate some help.
Thanks in advance.
P.S. here's a link to the database if you'd like to check it out for yourself:
http://optc-db.github.io/characters/#/search/
This should work for your class example.
*[class~="stars-6+"]:before{color:#00bfff; content:'\2605\2605\2605\2605\2605\2605\002B'; }
and the html
<div class="stars-6+">
Hello
</div>
The javascript is straight forward and requires nothing special.
[ "Whitebeard: Four Emperors", "STR", [ "Striker", "Powerhouse" ], "6+", 65, 4, 5, 99, 5000000, 3148, 996, 142, 3806, 1558, 347, 1 ],