Please use Firefox if the file is >100 KB.
Use local file
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
Supported common format: mp3, wav, mp4, mpeg, avi, ogg, webm (Chrome), plus others.
- If the media can be played, you'll see both the
base64conversion 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 (
HTML5feature (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.
OGGformat, 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
input. This tool uses
divelement, 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
video(HTML5) media API.
CSSto style the
HTMLelements 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
HTTPrequest. 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
Sweet Analog Clock on CodePen