PNG Audio Player

A demo can be found on the bottom of the page

This JavaScript plays the first MP3 or OGG file embedded in a PNG file made with fcfh or a compatible implementation.
At the moment we only have example.png available.
If you have a webserver that allows Ajax requests from foreign domains you can use your own URL in the example below.

This works in all modern browsers and thanks to the power of polyfills, in Internet Explorer 11.

A Greasemonkey/Tampermonkey script is available to bring this feature to every site

About this technology

Example image containing sound example.png is a completely valid PNG file, no trickery or edge cases are used. PNG files are made up of chunks in the format:
<length:int32><name:string(4)><data:bytes(length)><checksum:int32>
PNG was developed to be forward compatible and vendor extendable. This is done by using lowercase and uppercase in the chunk names:

By using a name in the format xxXx we create a rather robust header that is likely to get copied when the PNG is edited. If we attempt to pass our header as standard (2nd letter uppercase) some applications could catch us for that.

Only the pixel data (IDAT) is compressed in a PNG, the rest is present "as-is".

This method is different from the simpler file concatenation approach and is much more stable.

Supported formats

The content of custom defined chunks can be of any binary origin and is only limited by the maximum length possible in the length field. Some formats are better suited for embedding than others. Most media players will play the embedded audio file when the image is renamed to .mp3, while other formats like .ogg tend to not work properly.

Encoding

fcfh encodes additional data with the content. The data of the chunk is in the format: BMPENC<namelength:int32><filename:bytes(namelength)><length:int32><content:bytes(length)> This allows for recovery of the original file name (use UTF-8). Encryption is also supported but not implemented in this JavaScript demo.

Robustness

By expermienting with various image hosters I found out that most of them will attempt to convert the image if they think it is too big, for example the file used in this demonstration. Some will also verify if the image occupies the entire file and some (thanks G+) do not. Those that don't check this will accept files that are just concatenated as long as they start with a valid image and the size doesn't looks too far off.

fcfh supports pixel mode which uses the actual pixels as storage, because this needs to be pixel-perfect, only lossless formats can be used, sorry JPEG. PNG files must be manually saved as 24 bit bitmaps by the user if he wants to directly use the content in binary form because PNG is compressed. An additional problem is the genius who decided that BMP files should render bottom up instead of top down. This means that the data has to be written linewise in reverse, fcfh has a command line switch for that.

Known hosters

These hosters are known to accept other files inside of images

Demo

This demo only works with PNG files for now and will not validate chunk checksums


Copyright © 2018 by Kevin Gut 📧 | More services | Generated for 54.211.101.93