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.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:
- 1st letter is lowercase: Not an important header for displaying the image
- 2nd letter is lowercase: Custom vendor defined header
- 3rd letter is lowercase: Reserved, it should always be uppercase as of now
- 4th letter is lowercase: Header can be copied to output if a PNG editor does not knows how to interpret it.
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
- Discord
- Imgur
- Google+ No longer exists
Demo
This demo only works with PNG files for now and will not validate chunk checksums