Abre audio en Auditius desde tu aplicación

Cómo funciona

Dos ventanas se hablan con postMessage. Cada mensaje lleva un type y v: 1, y cada lado solo escucha a la ventana que abrió o que lo abrió, desde el origen que espera.

1. Dentro de un clic, tu aplicación abre https://auditius.com/?editor&handoff=1 en una ventana nueva.
2. Auditius avisa a tu ventana de que está listo, y tu aplicación le envía el archivo con su nombre y, si quieres recibir el resultado, una URL de guardado en tu propio sitio.
3. El archivo se abre en una sesión nueva de Auditius, que muestra tu sitio como procedencia y la conserva al recargar.
4. Cuando la persona termina, el menú Archivo ofrece guardar en tu aplicación: Auditius abre tu URL de guardado y le envía allí el archivo editado.

Abrir un archivo en Auditius

En tu página, abre el editor y envía el archivo cuando esté listo. La URL de guardado debe usar https y estar en el mismo origen que la página que la envía; formats indica los tipos que aceptas, por orden de preferencia (Auditius escribe MP3, WAV, FLAC y Ogg Vorbis, y envía MP3 si no indicas ninguno).

// Dentro del clic: los bloqueadores de ventanas dejan pasar las que abre un clic.
const AUDITIUS = 'https://auditius.com';
const editor = window.open(AUDITIUS + '/?editor&handoff=1');

window.addEventListener('message', function onReady(e) {
  if (e.source !== editor || e.origin !== AUDITIUS) return;
  if (e.data?.type !== 'handoff:ready' || e.data.v !== 1) return;
  window.removeEventListener('message', onReady);
  editor.postMessage({
    type: 'handoff:open', v: 1,
    file: audioBlob,                      // un Blob o un File
    name: 'Entrevista.m4a',
    app: { name: 'Mi App' },              // se muestra como etiqueta
    save: { url: 'https://myapp.example/handoff/save/123', formats: ['audio/mpeg'] },
  }, AUDITIUS);
});

Recibir el archivo editado

La URL de guardado es una página de tu sitio. Avisa a Auditius de que está lista, recibe el archivo y responde con el progreso y después con saved, cancelled o un error con uno de estos códigos: too_large, unsupported, quota, unauthorized o unexpected.

// En https://myapp.example/handoff/save/123, la página que abre Auditius para guardar.
const AUDITIUS = 'https://auditius.com';

window.addEventListener('message', async (e) => {
  if (e.source !== window.opener || e.origin !== AUDITIUS) return;
  if (e.data?.type !== 'handoff:save' || e.data.v !== 1) return;
  const reply = (msg) => e.source.postMessage({ ...msg, v: 1 }, e.origin);
  try {
    // e.data.file, e.data.name y e.data.meta (título, transcripción en WebVTT, capítulos…)
    const id = await upload(e.data.file, (ratio) => reply({ type: 'handoff:progress', ratio }));
    reply({ type: 'handoff:saved', id });
  } catch {
    reply({ type: 'handoff:error', code: 'unexpected' });
  }
});

window.opener.postMessage({ type: 'handoff:save-ready', v: 1 }, '*');

Qué comprueba Auditius

Auditius acepta un solo archivo, de la ventana que lo abrió, y solo si la dirección pedía un handoff.

• El archivo debe ser audio o vídeo que el navegador pueda decodificar.
• Rechaza una URL de guardado de otro origen o sin https.
• El nombre de tu aplicación se muestra como texto plano, de 40 caracteres como mucho; la procedencia siempre es la dirección real de tu sitio.
• No se sube nada: el archivo se queda en el navegador de quien lo edita.