Web Video Audio Text or Subtitle Play and Synchronization Howto - kimduho/webdev GitHub Wiki
- TODO
- popcorn.js player
- HTML5 Java Script Library for integrating the web into video
- License: Mozilla Project (free)
- reference - synchronizing and highlighting HTML Text to Audio
- Example Demo-1: text color is changed with audio progress, or if you click text word then audio skips there
- Example Demo-2: poem play with line highlighting)
- Example Demo-3: interactive text descriptions with audio progress
- you must sync the A/T manually
- Jaraoke
- howto
- HTML5 Audio Tag Sync using Javascript
- download jaraoke.js
- Example: Martin Luther Kin Jr.'s I Have a Dream
- Restricted License: Creative Commons Attribution-Noncommercial-Share Alike 3.0 United States License
var currCue = 0;
var cues = [ 24.78, 26.81, 29.69, 34.88, ... ];
var lyrics = [ "Am I...",
"Am I still tough enough?",
"Feels like I'm wearing down, down, down, down, down...",
"Is my viciousness", ... ];
this.apN.addEventListener("timeupdate", timeUpdate, true);
function timeUpdate() {
if(jaraoke.apN.currentTime > (cues[currCue] - CUEOFFSET)) {
var el = $(document.createElement('li'));
el.update(lyrics[currCue++]);
$('lyricsList').insertBefore(el, $('lyricsList').firstChild);
}
}
- Good Reference - Rock Star Market
- HTML5 Audio Play with Progress bar
- If you click any text, the audio goes there
- ESV Text/Audio Aligner
- internally calls CMUSphinx
- dependency: Python 2.7, Java, ant, sox, svn
- ESV: English Standard Version of Bible (c)2001 by Crossway Bibles, license
- Bible Karaoke: need some modifications for browser detection routine
- a JavaScript audio text aligner
- License: MIT or GPL v2
# python align.py Gen 1; // align Genesis 1
# python align.py -f John 3; // overrides any existing timings
# python align.py Gen 1 2 3 Ps 1 Col; // align Genesis 1-3, Psalm 1, and all of Colossians
- jPlayer
- Open Source (no licensing restrictions)
- lightweight - only 12KB minified and gzipped
- totally customizable and skinnable using HTML and CSS
- free plugins available
- audio-text synch - A/T sync by click
- timesheets.js: a declarative approach for HTML timing using SMIL timesheets
- here
- Audio / Text time sync + slides
- Media Element JS
- Video + Audio + Subtitles (.srt)
- HTML5 , with
<code><script src="jquery.js"></script>
<script src="mediaelement-and-player.min.js"></script>
<link rel="stylesheet" href="mediaelementplayer.css" /></code>
- videojs - San Francisco (http://videojs.com)
- Open Source HTML5 & Flash Video Player
- designer - video.js player skin editor using a live CSS editor
- Text Track: WebVTT File
- Online Audio Story Material
- CMU Sphinx-4 - Long Audio Aligner Project
- After 3 years of work since 2011 at GSoC, CMU Sphinx-4 is equipped with the new feature of Long Audio Aligner. Just download Sphinx4 and "mvn install"
- input file must be 16kHz, 16bits mono
- numbers are not handled yet
# java -cp sphinx4-samples/target/sphinx4-samples-1.0-SNAPSHOT-jar-with-dependencies.jar \
edu.cmu.sphinx.demo.aligner.AlignerDemo file.wav file.txt en-us-generic \
cmudict-5prealpha.dict cmudict-5prealpha.fst.ser
+ of [10110:10180]
there [11470:11580]
are [11670:11710]
- missing
- Sonalight - mobile dictation application: here
- CMUSphinx-powered app