In-browser 'de/muxer'

[nstepien]

Why not make a 'muxer' directly in the browser? You'd just need a file input for the image, and one or more file inputs for sounds along with text inputs for their tags.

Here's an example that should work on Chrome Canary/dev.

mux = function() {
  var arr, img, i, len, text, blob, url, a, filename;

  arr = [];
  img = imageInput.files[0];
  arr.push(img);

  for(i = 0, len = soundInput.files.length; i < len; i++) {
    // it would be a good idea to check for incorrect filetypes before.
    text = x; // get the corresponding text input's value however you want
    arr.push(text, soundInput.files[i]);
  }

  blob = new Blob(arr, {type: img.type});
  // use blob builders for browsers not capable of using Blob constructors yet

  // note that this url should get revoked once it will be rendered useless
  url = (window.URL || window.webkitURL).createObjectURL(blob);

  a = document.createElement('a');
  filename = img.name; // or whatever you want
  a.href = url;
  a.textContent = "Save " + filename;
  a.download = filename; // automatic download, only on Chrome currently
  a.target = '_blank'; // for other browsers
  // append that a somewhere
}

And since you already demux sound files, it would be a good idea to provide download links.

[ms11]

Uploading the file would be problematic, and non-browser muxers can use ogg conversion. You wound have to do it manually if you are using the in-browser one.