title: Auto lips sync according to mp3/wav
body: <p>I'd like to create animated heads in my web apps. It seems that CSS3 transition, animation and background features with a little help of javascript <a href="https://developer.mozilla.org/en-US/docs/Web/API" rel="nofollow noreferrer">web API</a> is all I need. Using <a href="http://xface.fbk.eu/" rel="nofollow noreferrer">xface</a> looks like an overkill to me, <a href="http://www.cartoonsolutions.com/store/catalog/Lip-Sync-Mouth-Animation-sp-79.html" rel="nofollow noreferrer">cartoon solutions</a> is almost all I need. I need to make it cartoon.</p>
  
  <p>I've made <a href="https://stackoverflow.com/questions/16843099/algorithm-of-the-greatest-intersect-of-word-in-set-of-words">some progress</a> already (beeing able to create voice controlled web app), but this time I need mp3/wav input, not direct voice from microphone using google servers through <code>x-webkit-speech</code>.</p>
  
  <p>I am considering this approach:</p>
  
  <ol>
  <li>record speech into mp3 or wav and write it's string contents</li>
  <li>play the mp3 in browser and detect end of words using <a href="https://developer.mozilla.org/en-US/docs/Web/API/AnalyserNode" rel="nofollow noreferrer">AnalyserNode</a> to synchronize position in the string (I use Czech language which, unlike the English, has almost constant speech speed).</li>
  <li>display the cartoon heads (see the link above) according to actual spoken letter</li>
  </ol>
  
  <p><strong>The question:</strong> <em>Is there any lower effort (shorter development time for coder and designer) approach?</em> Especially step 2 and English language in the future makes me worried. Maybe some karaoke tool could produce some speech sync file (which can I parse into CSS3 keyframes)? I am not aware of any such tool.</p>