Contact: You can send an email. Suggestions to improve the site are welcome. (Improvements are most likely to be added if you please kindly also provide the code patch for the requested change. The page is open source, being simply the single-page HTML/CSS/JS).

Tips

1. For a quick start, just click the button "Play Sample Audio" (or "Use Mic Audio") to start the animation (mouth, eye, and eyebrow movement).
2. Use the settings gear (at top-right) to adjust the many options.
3. If playing an audio sample/file, the volume slider within the audio player dialog must be up, for the mouth respond!
4. Works best on a regular computer (not a phone).
5. Export and Import of settings files should basically work, and includes the feature of storing/caching background and overlay URL-based and file-based images within the export/import JSON format).
   • After importing a settings file, it may be necessary to adjust the browser height, width, and/or zoom level, in order to align the animation, background, and foreground, to match the appearance when the settings were exported.
   • Need a background? Use any image, or try the visualmic.wordpress.com gallery for inspiration.

Known Bugs

1. Sometimes, switching back and forth between mic, sample audio, and audio file can cause issues (stop the animation, high CPU, etc.). If that happens, just reload the page and start again with the audio source you want. (This will hopefully get fixed.)
2. In general, the animation might use a noticable amount of CPU, especially if there is a lot of animation configured (increasing heat and fan speed too much). (Hopefully, this can be improved in the future.)
3. For Audio Player input, mouth visualization should not be dependent on volume level of audio slider (but it is).
4. On a phone, the volume slider may not work in the audio player.
5. On a phone, the OS may offer to "reduce advanced privacy protections" in case the page "is not displaying as expected".
6. On a phone, animation might drop frames (throttled animation).
7. On a phone, the animation might not have a correct aspect ratio.
8. On a phone, the web browser may warn about page protections and performance.
9. When exporting and importing settings files, this should be fixed, but it used to be the case that Background URL, Background File, Overlay URL, and Overlay File settings could seem to get lost. However, this has been improved, and should work reasonably well (images may get cached to the settings files and may have been imported, available for reload). After importing a settings file, see the actions for the following: "(Background|Overlay) Image" 3-way toggles (to select None, URL-based, or File-Based) and the buttons named "Reload (Background|Overlay) Image from (URL|File)".

Examples

• Example 1
  • Settings file: example-settings-1.json
  • Clip:
    
• Example 2
  • Settings file: example-settings-2.json
  • Clip:
    
• Example 3
  • Settings file: example-settings-3.json
  • Clip:
    
• Example 4
  • Settings file: example-settings-4.json
  • Clip:
    

Visualize sound from audio file. (X-out to hide. Re-show from Settings Gear.)

Click for mic-based audio visualization. (X-out to hide. Re-show from Settings Gear.)