Trying to implement some basic music player.
I have an array of Words objects, each one represent a word and build with the next structure:
{
text: "Hello"
time: 2.24
duration: 0.32
}
Trying to figure what is the right way to display the current word on the screen while the music plays. That means, when the audio file will speak the "hello" text after playing for 2.24 seconds, I want to display it on the screen. same for the word after, etc.
Setting a setInterval of 10ms will apply some checks on the array is a super heavy task for the JS thread. not sounds like a good idea.
e.g thought about creating some Map object, when the time is the key, to try to catch the Map[time] with the setInterval..
Maybe iterate over the array of words and create a VTT file inside the browser to send it to the tag? will it even possible to display the subtitles properly that way?
Any ideas? Suggestions?? maybe some general direction?? a bit stuck with it.
Thanks!!
Check rabbit-lyrics, it may help you:
https://github.com/guoyunhe/rabbit-lyrics.
Related
I'm trying to implement a way to navigate through the subtitles of a video that has subtitles in WebVTT format.
Task:
I would like to click on a button to make the video go to the beginning of the previous cue, but sometimes the video is between two cues, so when evaluating texttrack.activeCues the result is an empty element.
Problem:
I can think of several ways to do this, but none of them seem the most efficient or logical. Let's say the video is currently at minute 100, where there is no active cue, how do I know what the previous cue is when I don't have a reference id?
I don't know if there is some element inside the TextTrackCueList that will help me without having to make an algorithm that goes through all the cues and evaluate them. There should be a simpler way I think. I appreciate any help you can give me.
On this page I enter the data for the "home loan simulation". and a "video" is generated in response to the data that I entered, it is something like a dynamic "video".
This "video" shows related data that I entered.
I inspect the code and I don't see anything that shows a video tag or something. This looks like video, from the control bar, to the full screen option, and the cc. It also has audio, although the voice of the "video" does not mention any dynamic data.
I inspect the code and I don't see anything that shows a video tag or something.
This looks like video, from the control bar, to the full screen option, and the cc. It also has audio, although the voice of the "video" does not mention any dynamic data.
Does anyone know how this was done or has an example of how to do it? is there any way to do the same using javascript, css, and html?
thank you
this is the link
https://www.grupobancolombia.com/personas/creditos/vivienda/simulador-credito-vivienda##sim-results
The video from your question is actually a very big SVG as #Kaiido mentioned.
The animation script is very hard to understand. Here is just a part of it:
You can see it has more that 320.000 lines of code. And we have no clue what all this numbers mean. Of course, some of them are time codes, some are coordinates, but we need reverse engineering to understand.
Your original question: is there any way to do the same using javascript, css, and html? of course has the answer: yes. Almost any animation is possible.
But we need examples. Ok, there are two possible ways to solve the animation: use existing library or create your own. If you are interested in your own, just ask in comments.
Use library
Google suggest: animate.js library.
Here is an example of using controls (play/pause/resume/reset/set time) as it is in real video player: click.
Here are 3 examples of using SVG: move along the path, morph to other shape, change line properties.
More examples using animate.js are here.
Write your own library
I use some kind of self-written library in one of my projects. The idea is:
have an array of keyframes - this is where animation changes. Each keyframe has: time start, duration (similar to having "time end"), the list of changes (objects or their properties).
I update the animation in requestAnimationFrame() loop (because my animation goes only to the future, I do not have controls)
when current time becomes greater than new keyframe start time, I drop (remove) previous keyframe from array and apply new objects/values
if current time is greater than keyframe start, but less than keyframe end, I use lerp (linear interpolation) to calculate in-between values of objects
But this description is just for the idea, so that you can create something that suits your needs.
Audio
I think, audio is just a normal audio tag in HTML:
<audio id="a">
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
It can be controlled with methods and properties: look here. Example:
const a = document.getElementById('a');
a.currentTime = 0.8; // playing at 0.8 seconds from the start
a.play();
From what i can understand, they are using an API provided by a company. What they are doing its basically taking your inputs, process them and send a bunch of info to the API as a POST request, then the API responds with a custom URL that they show to you with an iframe.
If you wanna learn more you should check the company that provides the API. IndiVideo
Also, i don't think that this is the right place to ask for something like this.
It appears to be an SVG video that takes in your data and renders it out in real time. It's definitely something anyone can build, but it would take a little less effort if you used an API.
I need to write a script in p5.js to track the position of the five fingertips (on one or both hands) at a set interval (e.g. 20 ms), and then save the time-finger data to a .csv
I have previously done this in Processing with Table and getting the PVector for the fingers, but I have no idea on how to do this with javascript.
Any and all input would be greatly appreciated!
Stack Overflow isn't really designed for general "how do I do this" type questions. It's for specific "I tried X, expected Y, but got Z instead" type questions. But I'll try to help in a general sense:
You need to break your problem down into smaller steps and take those steps on one at a time. For example, are you asking how to connect a Leap Motion to a P5.js sketch? Or are you asking how to output a .csv file from a P5.js sketch? Those two things are completely independent of each other, and that's how you should approach them.
Try to get a simple "hello world" sketch running. Now add very basic Leap Motion functionality: print something to the screen or the console. Separately from that, try to save a .csv file that contains some hard-coded values. Then maybe do something like save the previous 100 mouse positions to a .csv file.
Work your way forward in small steps like that, and if you get stuck, post a MCVE along with a more specific technical question. Good luck.
I'm using Streampad on a Tumblr-powered site and am running into an irritating little problem. By default, Streampad takes the captions to audio posts and uses them for the track titles, chopping them off awkwardly mid-sentence when it runs out of space (516px worth).
If you just use the "artist - track title" format for posts, that works just fine. As soon as you decide to start adding any kind of description or commentary, however, Streampad becomes a confusing mess for anyone interested in knowing what they're listening to.
I was wondering if there was any way to specify which text to include in Streampad's audio caption while excluding the rest of the post. Ideally, I'd like to have the player take the track information from Tumblr's {artist} and {TrackName} blocks, but I'd be happy with anything that allows me to add commentary to audio posts without it showing up in the Streampad player. If it's possible to do it cleanly with Javascript, great. I'd settle for a hack, though.
Any help would be much appreciated.
Try Tumblr Music Player instead at http://tumblrplayer.com and all your problem will be solved.
I just made a post about Streampad here:
http://justcantdescribeu.tumblr.com/post/18873243263
If you scroll to the bottom, you can find a script that instructs Streampad to grab the ID3 artist and ID3 title via Tumblr's API, instead of the usual audio post description.
There's a fallback too, in case there is no ID3 metadata.
I'm a year late, but just wanted to give you and anyone else a heads up in case anyone's still looking for a solution to this. :)
Let's say I want a user to write a story in 20 minutes. After the user is done I want to play back the story writing process so I can see how the user went about doing it. How would I do this? I don't want to watch every second of it, obviously, but I'd like to see a snapshot of whenever a "large change" was made. The "large change" should be defined by me. It could be X amount of character additions or subtractions.
I thought of somehow trying to continuously monitor the textbox for changes and then store the text as a string in an array every time there is a "large change". Then to replay this, I will play the string array with a 1 second delay.
Anyone think of a better way to do this or know a library that would help?
Thanks!
Let's take for granted that you have the capacity to persist this state and just look at the challenge of detecting and displaying the diffs. The most challenging aspect of you problem is going to be defining and subsequently detecting what you call a "large change". If we set that aside for a moment I think there are two ways you can go about this:
1) Operational transform - (http://en.wikipedia.org/wiki/Operational_transformation)
This is what Google Docs(etherpad) uses to synchronize real-time collaborative edits across multiple browsers. With OT you can practically recreate a video of the changes made to a document. You can see this in action on thinklinkr.com revision history (full disclosure - I am one of the founders).
2) Diff-match-path - (http://code.google.com/p/google-diff-match-patch/)
This is actually a set of three algorithms that can be used to effeciently create and resolve differences between text documents. I think this might be a better match for you given your requirement about chunking diffs.