Convert to MP3/WAV with share and download

src/main.js

@@ -16,11 +16,14 @@ const el = {
   viewEdit: $('view-edit'), viewRead: $('view-read'), reader: $('reader'),
   player: $('player'), status: $('status'), play: $('btn-play'), prev: $('btn-prev'), next: $('btn-next'),
   voice: $('voice'), rate: $('rate'), rateLabel: $('rate-label'), device: $('device'),
-  exportBtn: $('btn-export'), engineInfo: $('engine-info'), clearCacheBtn: $('btn-clear-cache'),
+  format: $('format'), engineInfo: $('engine-info'), clearCacheBtn: $('btn-clear-cache'),
   modelBar: $('model-bar'), modelText: $('model-text'), modelProgress: $('model-progress'),
   shareNote: $('share-note'), audio: $('audio'),
   net: $('net'), readyTitle: $('ready-title'), readyNote: $('ready-note'),
-  rApp: $('r-app'), rModel: $('r-model'), rVoice: $('r-voice'), prepare: $('btn-prepare'),
+  rApp: $('r-app'), rModel: $('r-model'), rVoice: $('r-voice'),
+  title: $('title'), convertStart: $('btn-convert-start'), convert: $('btn-convert'),
+  share: $('btn-share'), download: $('btn-download'), export: $('export'),
+  exTitle: $('ex-title'), exMeta: $('ex-meta'), exNote: $('ex-note'), exBar: $('ex-bar'), exProgress: $('ex-progress'),
 };
 
 // ---------- persisted settings ----------
@@ -324,12 +327,13 @@ async function genLoop() {
         for (const p of parts) { all.set(p, o); o += p.length; }
         chunk.pcm = toInt16(all);
         notifyChunkReady();
-        updatePrepareButton();
+        onChunkReady(chunk);
       } catch (e) {
         if (ctrl.signal.aborted) continue;
         console.error('synthesis failed', e);
         chunk.pcm = new Int16Array(SR / 4); // short silence so playback can move on
         notifyChunkReady();
+        onChunkReady(chunk);
       }
     }
   } finally {
@@ -441,7 +445,7 @@ function jump(i) {
 
 function updateMediaSession() {
   if (!('mediaSession' in navigator) || !state.chunks.length) return;
-  const title = saved.title || state.chunks[0].text.slice(0, 60);
+  const title = getTitle();
   navigator.mediaSession.metadata = new MediaMetadata({
     title, artist: 'Phonon Reader',
     artwork: [{ src: './icons/icon-512.png', sizes: '512x512', type: 'image/png' }],
@@ -468,15 +472,16 @@ function startReading(text, idx = 0, autoplay = true) {
   el.player.classList.remove('hidden');
   el.edit.classList.remove('hidden');
   render();
-  updatePrepareButton();
+  resetConversion();
   restartGen();
   if (autoplay) play();
-  else setStatus(`Tap play to resume — ${state.idx + 1} of ${state.chunks.length}`);
+  else setStatus(state.idx ? `Tap play to resume — ${state.idx + 1} of ${state.chunks.length}` : 'Tap play to listen');
 }
 
 function showEditor() {
   pause();
   state.gen.abort?.abort();
+  resetConversion();
   state.chunks = [];
   el.viewRead.classList.add('hidden');
   el.player.classList.add('hidden');
@@ -485,12 +490,15 @@ function showEditor() {
   scrollTo(0, 0);
 }
 
-el.listen.addEventListener('click', () => {
-  if (el.input.value.trim() !== (saved.text || '')) store({ title: '' });
-  startReading(el.input.value, 0, true);
+el.listen.addEventListener('click', () => startReading(el.input.value, 0, true));
+el.convertStart.addEventListener('click', () => {
+  startReading(el.input.value, 0, false);
+  startConversion();
 });
+el.title.value = saved.title || '';
+el.title.addEventListener('input', () => store({ title: el.title.value.trim() }));
 el.edit.addEventListener('click', showEditor);
-el.clear.addEventListener('click', () => { el.input.value = ''; el.shareNote.classList.add('hidden'); store({ text: '', idx: 0, title: '' }); el.input.focus(); });
+el.clear.addEventListener('click', () => { el.input.value = ''; el.title.value = ''; el.shareNote.classList.add('hidden'); store({ text: '', idx: 0, title: '' }); el.input.focus(); });
 el.paste.addEventListener('click', async () => {
   try {
     if (navigator.clipboard.read) {
@@ -539,7 +547,7 @@ el.voice.addEventListener('change', async () => {
   store({ voice: state.voice });
   // Throw away audio made with the old voice and regenerate from here.
   state.chunks.forEach((c, i) => { if (i !== state.idx || !state.playing) c.pcm = null; });
-  updatePrepareButton();
+  resetConversion();
   checkVoiceCached();
   if (state.tts) ensureVoice(state.voice).catch((e) => console.warn(e));
   restartGen();
@@ -548,55 +556,147 @@ function fmtDur(samples) {
   const s = Math.round(samples / SR);
   return `${Math.floor(s / 60)}:${String(s % 60).padStart(2, '0')}`;
 }
+function fmtSize(bytes) {
+  return bytes > 1e6 ? `${(bytes / 1e6).toFixed(1)} MB` : `${Math.max(1, Math.round(bytes / 1e3))} KB`;
+}
 
-function updatePrepareButton() {
-  const n = state.chunks.length;
-  const done = state.chunks.filter((c) => c.pcm).length;
-  const b = el.prepare;
-  b.classList.toggle('done', n > 0 && done === n);
-  if (n && done === n) {
-    const samples = state.chunks.reduce((a, c) => a + c.pcm.length, 0);
-    b.textContent = `✓ All audio ready (${fmtDur(samples)})`;
-    b.disabled = true;
-  } else if (state.gen.prepareAll) {
-    b.textContent = `Preparing… ${done} of ${n}`;
-    b.disabled = true;
-  } else {
-    b.textContent = 'Prepare all audio';
-    b.disabled = false;
+// ---------- conversion to an audio file ----------
+const conv = { job: 0, active: false, finishing: false, fed: 0, blob: null, format: 'mp3', started: 0, genSamples: 0, worker: null, wake: null };
+
+function getTitle() {
+  return (el.title.value.trim() || saved.title || state.chunks[0]?.text || 'Speech').slice(0, 80);
+}
+function fileName() {
+  const base = getTitle().replace(/[\\/:*?"<>|#%]+/g, '').replace(/\s+/g, ' ').trim().slice(0, 60) || 'speech';
+  return `${base}.${conv.format}`;
+}
+function canShareFiles() {
+  try { return !!navigator.canShare?.({ files: [new File([''], 'a.mp3', { type: 'audio/mpeg' })] }); } catch { return false; }
+}
+
+function mp3Worker() {
+  if (!conv.worker) {
+    conv.worker = new Worker(new URL('./mp3-worker.js', import.meta.url), { type: 'module' });
+    conv.worker.onmessage = ({ data }) => {
+      if (data.job !== conv.job || data.type !== 'done') return;
+      finishConversion(data.blob);
+    };
+    conv.worker.onerror = (e) => { console.error('mp3 worker', e); el.exNote.textContent = 'MP3 encoding failed — switch the file format to WAV in Settings.'; };
   }
+  return conv.worker;
 }
 
-/** Generate every chunk now (e.g. before going offline, or to avoid pauses on a slow phone). */
-async function prepareAll(onTick) {
+function resetConversion() {
+  conv.job++;
+  conv.active = false; conv.finishing = false; conv.fed = 0; conv.blob = null; conv.genSamples = 0;
+  state.gen.prepareAll = false;
+  conv.wake?.release?.().catch?.(() => {}); conv.wake = null;
+  updateExport();
+}
+
+async function startConversion() {
+  if (!state.chunks.length) return;
+  resetConversion();
+  conv.format = el.format.value;
+  conv.active = true;
+  conv.started = performance.now();
+  if (conv.format === 'mp3') mp3Worker().postMessage({ type: 'start', job: conv.job, sampleRate: SR, kbps: 64 });
   state.gen.prepareAll = true;
   kickGen();
-  for (;;) {
-    updatePrepareButton();
-    onTick?.();
-    if (state.chunks.every((c) => c.pcm)) break;
-    await waitForChunk();
+  feedEncoder();
+  try { conv.wake = await navigator.wakeLock?.request('screen'); } catch { /* optional */ }
+}
+
+function feedEncoder() {
+  if (!conv.active || conv.finishing) return updateExport();
+  while (conv.fed < state.chunks.length && state.chunks[conv.fed].pcm) {
+    if (conv.format === 'mp3') {
+      mp3Worker().postMessage({ type: 'chunk', job: conv.job, index: conv.fed, pcm: state.chunks[conv.fed].pcm });
+    }
+    conv.fed++;
   }
-  state.gen.prepareAll = false;
-  updatePrepareButton();
+  if (conv.fed === state.chunks.length) {
+    conv.finishing = true;
+    state.gen.prepareAll = false;
+    if (conv.format === 'mp3') mp3Worker().postMessage({ type: 'finish', job: conv.job });
+    else finishConversion(wavBlob(state.chunks.map((c) => c.pcm)));
+  }
+  updateExport();
 }
-el.prepare.addEventListener('click', () => prepareAll());
 
-el.exportBtn.addEventListener('click', async () => {
-  if (!state.chunks.length) { el.engineInfo.textContent = 'Press Listen first, then export.'; return; }
-  el.exportBtn.disabled = true;
-  await prepareAll(() => {
-    el.exportBtn.textContent = `Preparing WAV… ${state.chunks.filter((c) => c.pcm).length}/${state.chunks.length}`;
-  });
-  const blob = wavBlob(state.chunks.map((c) => c.pcm));
+function finishConversion(blob) {
+  conv.blob = blob;
+  conv.active = false; conv.finishing = false;
+  conv.wake?.release?.().catch?.(() => {}); conv.wake = null;
+  updateExport();
+}
+
+function onChunkReady(chunk) {
+  if (conv.active) conv.genSamples += chunk.pcm.length;
+  feedEncoder();
+}
+
+function updateExport() {
+  const n = state.chunks.length;
+  if (!n) return;
+  const show = (e, v) => e.classList.toggle('hidden', !v);
+  const done = state.chunks.filter((c) => c.pcm);
+  const samples = done.reduce((a, c) => a + c.pcm.length, 0);
+  const chars = state.chunks.reduce((a, c) => a + c.text.length, 0);
+  el.exTitle.textContent = getTitle();
+  el.export.classList.toggle('done', !!conv.blob);
+
+  if (conv.blob) {
+    const share = canShareFiles();
+    el.exMeta.textContent = `✓ Ready · ${fmtDur(samples)} · ${fmtSize(conv.blob.size)} ${conv.format.toUpperCase()}`;
+    show(el.exBar, false); show(el.convert, false); show(el.share, share); show(el.download, true);
+    el.download.className = share ? 'ghost' : 'primary';
+    el.download.textContent = `Download ${conv.format.toUpperCase()}`;
+    el.exNote.textContent = share
+      ? 'Share sends the file to any app: a podcast player, Files, Drive, a chat. Or press play below to listen here.'
+      : 'Saves to your Downloads folder. Or press play below to listen here.';
+  } else if (conv.active) {
+    const doneChars = done.reduce((a, c) => a + c.text.length, 0);
+    let eta = '';
+    const secs = (performance.now() - conv.started) / 1000;
+    if (conv.genSamples > SR * 5 && doneChars && secs > 2) {
+      const rate = conv.genSamples / secs;                    // audio samples per wall second
+      const remaining = ((chars - doneChars) * (samples / doneChars)) / rate;
+      eta = remaining > 90 ? ` · about ${Math.round(remaining / 60)} min left` : remaining > 5 ? ` · about ${Math.round(remaining)} s left` : '';
+    }
+    el.exMeta.textContent = conv.finishing ? 'Finishing the file…'
+      : `Converting… ${done.length} of ${n} parts · ${fmtDur(samples)} of audio so far${eta}`;
+    show(el.exBar, true); el.exProgress.style.width = `${Math.round((done.length / n) * 100)}%`;
+    show(el.convert, false); show(el.share, false); show(el.download, false);
+    el.exNote.textContent = state.tts ? 'Running on this device, so it works offline. Keep the app open until it finishes.' : 'Waiting for the speech model…';
+  } else {
+    el.exMeta.textContent = `${n} parts · about ${Math.max(1, Math.round(chars / 15 / 60))} min of audio`;
+    show(el.exBar, false); show(el.convert, true); show(el.share, false); show(el.download, false);
+    el.exNote.textContent = 'Makes an audio file you can share to another app or save. Or press play below to listen right away.';
+  }
+}
+
+el.convert.addEventListener('click', startConversion);
+el.share.addEventListener('click', async () => {
+  if (!conv.blob) return;
+  const file = new File([conv.blob], fileName(), { type: conv.blob.type });
+  try { await navigator.share({ files: [file], title: getTitle() }); }
+  catch (e) { if (e.name !== 'AbortError') { console.warn(e); el.exNote.textContent = 'Sharing failed — use Download instead.'; } }
+});
+el.download.addEventListener('click', () => {
+  if (!conv.blob) return;
   const a = document.createElement('a');
-  a.href = URL.createObjectURL(blob);
-  a.download = `${(saved.title || state.chunks[0].text).slice(0, 40).replace(/[^\w -]+/g, '').trim() || 'speech'}.wav`;
-  a.click();
-  setTimeout(() => URL.revokeObjectURL(a.href), 10000);
-  el.exportBtn.textContent = 'Download as WAV';
-  el.exportBtn.disabled = false;
+  a.href = URL.createObjectURL(conv.blob);
+  a.download = fileName();
+  document.body.append(a); a.click(); a.remove();
+  setTimeout(() => URL.revokeObjectURL(a.href), 30000);
 });
+el.format.value = saved.format || 'mp3';
+el.format.addEventListener('change', () => {
+  store({ format: el.format.value });
+  if (!conv.active && conv.blob && conv.format !== el.format.value) resetConversion();
+});
+
 el.clearCacheBtn.addEventListener('click', async () => {
   await clearCache();
   try { await caches.delete(VOICE_CACHE); } catch { /* ignore */ }
@@ -621,9 +721,10 @@ loadModel();
 
 if (share) {
   store({ title: share.title });
+  el.title.value = share.title;
   if (share.text) {
     startReading(share.text, 0, false);
-    setStatus('Shared text ready — tap play');
+    setStatus('Tap play to listen');
   } else if (share.link) {
     el.shareNote.textContent = 'Only a link was shared, and this app does not fetch web pages (that would send them through a server). Open the page, select the text, and share or paste the text instead.';
     el.shareNote.classList.remove('hidden');