How to synchronize and highlight HTML text to audio [closed] - javascript

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
I want to highlight the text as audio plays in a web site.
As the audio plays this text will keep on highlighting, just as we see in television.
Please tell me how i can do this using any web technology.
I will be very thankful to all of you.
Thanks in advance.

there is a question similar to this one here that answers your question on how to highlight text:
Simple JavaScript Animation for 1 Second to Highlight Text?
HTML5 is good for audio:
http://www.w3schools.com/html/html5_audio.asp
These resources will hopefully get you on the right track!

You will need to create your own vtt file with the captions (text) you need. Then link it to the audio code like so:
<audio src="sampleaudiofile.ogg">
<track kind="captions" src="sampleaudiofile.en.vtt" srclang="en" label="English">
</audio>
This link from the w3c specs shows an example of vtt format and how to do it.

Related

CSS mouse hover glows [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 6 years ago.
Improve this question
Can someone tell me this effect used in this page (https://www.canva.com/)
When you hover a region, it's glows. I need a name of this effect to find a tutorial.
This effect is very special and I don't thing that there are any tutorials out there. Anyway, creating things like that is really not easy and maybe you should get an advanced understanding of web development first in order to really understand the code and what it does in this case.
What you're looking for is the JS file: https://static.canva.com/static/r/woopwoop/js/XIR9abnkRmmIBfD9RiiwSg.js
The CSS file: https://static.canva.com/static/r/woopwoop/css/auth/YC3uEEMWOOxOK1-4GWZMtQ.css
And this bit of code: <canvas class="loginFun" width="320" height="700"></canvas>

Live Stream Audio in Wavesurfer.js [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 6 years ago.
Improve this question
I need to plot a streaming audio which comes as buffers of 2 seconds. Besides that, I need to plot the audio and have features like play, pause, zoom and span.
Wavesurfer.js has most of these features except that it only plots for single/ static audio file. I need it to work for streaming audio too.
What tweak should I do?
Has anyone done anything like this before? Any other better alternatives?
Specification:
Plot a streaming wave file in colour. The user should be able to pause, play, zoom and span into the audio.

How do I create clickable areas on an image within a webpage with javascript? [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
I want to create a webpage displaying an image that has areas on it that can be clicked to do various things like playing sound, displaying text, linking to other pages. The only problem is I have no idea what I need to use within javascript to do so. The area need not be complicated, just a simple geometric shape.
What sort of tools should I be looking at in Javascript to do achieve this?
Thanks in advance
You might want to take a look at <map></map> tag in HTML: http://www.w3schools.com/tags/tag_map.asp
It should accomplish what you want to do.

Video Editing using HTML, CSS and Javascript Only [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 6 years ago.
Improve this question
I need to edit a video using HTML5 and Javascript only. No flash or ffmpeg. I need to add title boards, background audio, (transitions, bumpers), borders etc.
I have tried popcorn.js but it uses CSS only and does not actually edit the video. I have even experimented with ffmpeg. FFmpeg gets the job done but takes a lot of time.
When using http://www.videojs.com/ as the video player.Some of the functionality already exists in plugins for video.js but not all yet. Here are a few plugins that could add some of the functionality you would need:
https://github.com/nicetip/videojs-speed
https://github.com/danielcebrian/rangeslider-videojs
https://github.com/xbgmsharp/videojs-rotatezoom
Both the video player and plugins are open source. But like I said you might have to do some development on your part for the full range of functionality that you require.

JavaScript Audio looping with autoplay features [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 9 years ago.
Improve this question
hey friends,
I am making a game based on html5 and JS, i want to play a audio clip of 8 seconds in background in loop but when I add audio in HTML code by using :
<audio src="audio.mp3" autoplay loop></loop>
but still it plays audio for once.
can anybody tell me how to do this??
You may want to check these posts 1 and 2 because some browsers have issues with loop attribute so you have to do it manually.

Categories

Resources