Monday, May 16, 2016

Base64 Audio/Video Converter

Please use Firefox if the file is >100 KB.

Use local file
Max ~1,200KB

This tool is purely using front-end (client side) feature. No data is sent to anywhere.

How to Use

  • Click the blue box to open a local file, or drag drop a file to that box.
  • The file must be a media file, like audio or video type with less than 1.2 MB in size. If you put other than media file, or the file is too large, it will show the error warning.
    Supported common format: mp3, wav, mp4, mpeg, avi, ogg, webm (Chrome), plus others.
  • If the media can be played, you'll see both the base64 conversion and the preview. If not, it will show only the conversion.
  • Click the base64 result box to select the string. Then right click ► copy. Or using keyboard shortcut. On Windows, using CTRL + C.

Limitation and Others

This tool was developed on Windows 7 (64 bit) platform.
Tested on Firefox 46 and Chrome 50.

  • For Flash video format (flv) and Matroska (mkv), HTML5 feature (codec related) in browsers are varied. Therefore this tool filters those, as you'll see there'll be no preview for those formats, only the conversion.
  • For OGG format, on Firefox 46, the audio/video type detection is a bit buggy. It will show video type, even though there's no video stream in the file. On Chrome, it goes normal.
  • The base64 data URI result selecting (after you click the box) is way faster on Firefox than on Chrome. Chrome still has this bug about large string selection on textarea and input. This tool uses div element, and still the delay can be seen (on Chromium engine browsers).
  • The whole conversion and preview process completion duration is also faster on Firefox than Chrome.
  • This tool is equipped with some sort of stopwatch to measure the process time.
  • This tool has user-agent output.

Implemented Browser API

  • FileReader (HTML5) -- for reading local file and then convert it to base64 data URI using readAsDataURL built-in function.
  • audio or video (HTML5) media API.
  • "Native" JavaScript for interface control.
  • CSS to style the HTML elements.
  • HTML elements as the interface.

Advantage and Disadvantage

  • It's great for small size media which we use it over and over on a page, to minimize HTTP request. But the larger the file, the heavier work has to be done. Therefore, slower/unresponsive page impact.
  • It can also be used as preloader (but you need to test it) because the media is loaded with the page. Like video intro of the site or a jingle of your product/service or something similar.
  • The page size or the JavaScript resource size will increase. Because the converted media is attached on the resource.

Example

Sweet Analog Clock on CodePen