Bock auf ein Quicky? Audio-Content den du bezahlt hast aber nicht runterladen darfst? LOL.

Premium-Content auf Englisch? Kein Problem. 1 Bookmarklet = Audio Download + Gemini Übersetzung

DDR-Zeit. Meine Klassenlehrerin hat beschlossen, dass ich kein Englisch machen darf.

Ich wollte Englisch. Aber mein Russisch war Kacke. Ihre Logik: “Noch eine Fremdsprache dazu? Dann wird dein Russisch noch schlechter.” Was auch fast nicht mehr ging.

Beschlossen: Keine zwei Fremdsprachen. Punkt.

---

---

Fast 40 Jahre später:

Als DeepL rauskam, war ich der erste Kunde. Rechtsklick → “Auf Deutsch übersetzen”. Läuft.

Bis heute. mybodygraph.com. Premium. Paar 100 Tacken bezahlt.

Dann: Über 80 Audiodateien. Auf Englisch. Fuck.

mybodygraph.com mit mehreren Audio-Lektionen - rechts sieht man die DevTools und die versteckten Blob-URLs im Shadow DOM

Rechtsklick funktioniert nicht bei Audio.

Also: Audio runterladen → Gemini füttern → übersetzen lassen. Easy. Nur wie kommt man an die Dateien?

Das Problem:

Die Audio-Dateien liegen als Blob-URLs im Browser. Das ist wie ein temporärer Zwischenspeicher - die Datei ist da, aber nur solange du die Seite offen hast. Kein normaler Download-Link. Unsichtbar für normale User.

Früher musste ich die DevTools aufmachen - das sind die Browser-Entwickler-Werkzeuge (F12-Taste). Dort gibt’s einen Bereich namens Shadow DOM - das ist versteckter Code, den du im normalen Seitenquelltext nicht siehst. Wie ein geheimer Tresor im Hintergrund.

So sah’s früher aus: In der Console den fetch-Code manuell eingeben mit der Blob-URL - nervig!

Also: DevTools auf. Shadow DOM durchsuchen. Blob-URL rauskopieren. Dann in die Console (ein anderer Bereich in den DevTools) wechseln. Code einfügen. Download starten. Repeat.

Bei über 80 Audio-Dateien zwischen verschiedenen Tabs in den DevTools hin und her? Ich dreh durch.

Die Lösung:

Hab mir ein Bookmarklet gebaut. Das ist ein normales Lesezeichen, aber statt einer URL steht JavaScript-Code drin. Klingt weird, funktioniert aber seit 1996.

Klick drauf → der Code läuft auf der aktuellen Seite → findet automatisch alle Audio/Video Blob-URLs → auch im versteckten Shadow DOM → zeigt dir eine Liste → Download. Fertig.

Keine DevTools mehr. Kein Hin-und-Her. Kein Blob-URL-Kopieren.

Das Bookmarklet in Aktion: Findet automatisch alle Blobs und fragt, welche du downloaden willst - oder einfach “all” für alle

Der Code:

javascript:(function(){const blobs=[];document.querySelectorAll(’audio,video’).forEach(el=>{if(el.src&&el.src.startsWith(’blob:’))blobs.push({type:’Audio/Video’,url:el.src})});document.querySelectorAll(’*’).forEach(el=>{if(el.shadowRoot){el.shadowRoot.querySelectorAll(’audio,video’).forEach(se=>{if(se.src&&se.src.startsWith(’blob:’))blobs.push({type:’Shadow DOM’,url:se.src})})}});if(blobs.length===0){alert(’❌ Keine Audio/Video Blobs gefunden!’);}else if(blobs.length===1){fetch(blobs[0].url).then(r=>r.blob()).then(b=>{const u=URL.createObjectURL(b);const a=document.createElement(’a’);a.href=u;a.download=’audio-’+Date.now()+’.mp3’;a.click();URL.revokeObjectURL(u);alert(’✅ Download gestartet!’);});}else{const list=blobs.map((b,i)=>`${i+1}. ${b.type}`).join(’\n’);const choice=prompt(`✅ ${blobs.length} Audio/Video gefunden:\n\n${list}\n\nWelche Nummer? (oder “all”)`);if(choice){if(choice.toLowerCase()===’all’){blobs.forEach((b,i)=>{setTimeout(()=>{fetch(b.url).then(r=>r.blob()).then(bl=>{const u=URL.createObjectURL(bl);const a=document.createElement(’a’);a.href=u;a.download=’audio-’+(i+1)+’-’+Date.now()+’.mp3’;a.click();URL.revokeObjectURL(u);});},i*500);});}else{const idx=parseInt(choice)-1;if(blobs[idx]){fetch(blobs[idx].url).then(r=>r.blob()).then(b=>{const u=URL.createObjectURL(b);const a=document.createElement(’a’);a.href=u;a.download=’audio-’+Date.now()+’.mp3’;a.click();URL.revokeObjectURL(u);});}}}}}})();

Installation:

So erstellst du das Bookmarklet: Name vergeben und den JavaScript-Code als URL einfügen

1. Lesezeichenleiste einblenden: Cmd + Shift + B (Mac) oder Ctrl + Shift + B (Windows)

2. Rechtsklick in die Leiste → “Seite hinzufügen”

3. Name: “Audio Download” (oder wie im Screenshot: “Blob-URL”)

4. URL: Code von oben einfügen

5. Speichern

Fertig.

Mein Workflow jetzt:

Seite auf → Bookmarklet klick → Download → Gemini → Übersetzen → MP3 löschen. Oder auch nicht.

Von 5 Minuten auf 10 Sekunden. Pro Audio-Datei.

WICHTIG - Ethik:

Ich hab für den Content bezahlt. Paar 100 Tacken. Für Privatgebrauch ist das für mich okay.

Aber: Nutzt das Tool verantwortungsvoll. Premium-Kurse rippen und weiterverkaufen? Netflix-Content clippen und verbreiten? Creators um ihr Einkommen bringen?

Dann soll dich der Blitz beim Kacken treffen.

Für deinen eigenen bezahlten Content, den du übersetzen oder offline nutzen willst? Go for it.

---

---

Funktioniert auf jeder Website mit Audio/Video Blobs. Podcast-Player. Video-Plattformen. Online-Kurse.

Fast 40 Jahre nachdem mir Englisch verwehrt wurde, hack ich mir meinen Weg mit einem 1-Klick-Downloader.

Tool Master > Problem Solver.

Mehr Browser-Hacks? Reply mit “HACK”.

Steven

P.S.: Mein Russisch ist trotzdem Kacke geblieben.

P.P.S.:Zum Verständnis - hier die lesbare Version:

javascript:(function() {
  const blobs = [];
  
  // Suche alle audio/video Tags
  document.querySelectorAll(’audio,video’).forEach(el => {
    if(el.src && el.src.startsWith(’blob:’)) {
      blobs.push({type:’Audio/Video’, url:el.src});
    }
  });
  
  // Suche auch im Shadow DOM
  document.querySelectorAll(’*’).forEach(el => {
    if(el.shadowRoot) {
      el.shadowRoot.querySelectorAll(’audio,video’).forEach(se => {
        if(se.src && se.src.startsWith(’blob:’)) {
          blobs.push({type:’Shadow DOM’, url:se.src});
        }
      });
    }
  });
  
  // Keine Blobs gefunden
  if(blobs.length === 0) {
    alert(’❌ Keine Audio/Video Blobs gefunden!’);
  }
  // Genau 1 Blob → direkt downloaden
  else if(blobs.length === 1) {
    fetch(blobs[0].url)
      .then(r => r.blob())
      .then(b => {
        const u = URL.createObjectURL(b);
        const a = document.createElement(’a’);
        a.href = u;
        a.download = ‘audio-’ + Date.now() + ‘.mp3’;
        a.click();
        URL.revokeObjectURL(u);
        alert(’✅ Download gestartet!’);
      });
  }
  // Mehrere Blobs → User fragen
  else {
    const list = blobs.map((b,i) => `${i+1}. ${b.type}`).join(’\n’);
    const choice = prompt(`✅ ${blobs.length} Audio/Video gefunden:\n\n${list}\n\nWelche Nummer? (oder “all”)`);
    
    if(choice) {
      // “all” → alle downloaden
      if(choice.toLowerCase() === ‘all’) {
        blobs.forEach((b,i) => {
          setTimeout(() => {
            fetch(b.url)
              .then(r => r.blob())
              .then(bl => {
                const u = URL.createObjectURL(bl);
                const a = document.createElement(’a’);
                a.href = u;
                a.download = ‘audio-’+(i+1)+’-’+Date.now()+’.mp3’;
                a.click();
                URL.revokeObjectURL(u);
              });
          }, i*500); // 500ms Delay zwischen Downloads
        });
      }
      // Nummer → nur diese downloaden
      else {
        const idx = parseInt(choice) - 1;
        if(blobs[idx]) {
          fetch(blobs[idx].url)
            .then(r => r.blob())
            .then(b => {
              const u = URL.createObjectURL(b);
              const a = document.createElement(’a’);
              a.href = u;
              a.download = ‘audio-’+Date.now()+’.mp3’;
              a.click();
              URL.revokeObjectURL(u);
            });
        }
      }
    }
  }
})();