Free MP3 Splitter als Webanwendung
10.02.2024
Wer eine Radiosendung als MP3-Datei aufnimmt, möchte möglicherweise ein Lied aus der Radiosendung herausschneiden. Dieser kostenlose MP3 Splitter ist für die beschriebene Aufgabenstellung geeignet und als Webanwendung unabhängig vom Betriebssystem und der Hardware nutzbar. Der MP3-Splitter läuft z.B. unter Linux, Windows, Mac, Android, auf Smartphones, Desktops und anderen Geräten mit einem Webbrowser. Es wäre sogar möglich diesen MP3 Splitter auch offline im Webbrowser ohne Internetverbindung zu benutzen, wenn man die folgende Webseite herunterlädt. Der Fachbegriff für Webanwendungen ist "Progressive Web App" (PWA). Diese PWAs sind deutlich flexibler und offener als Apps, die nur auf einem Smartphone laufen.
Demo
Weiter unten auf dieser Seite gibt es eine Anleitung mit einem Video zur Benutzung des MP3 Splitters.
Zum Ausprobieren kann die folgende Beispiel-Radiosendung "radio_example.mp3" heruntergeladen werden.
Anschließend kann die Webseite mit dem MP3 Splitter mp3Split.html geöffnet und die zuvor heruntergeladene Datei "radio_example.mp3" mit "Durchsuchen..." bzw. "Browse..." geladen werden.
Keine Gewährleistung für die Korrektheit der Software. Software-Lizenz: GPL v3. Zur Hervorhebung von Wörtern im Textbereich wurde Jquery Highlighttextarea eingebunden.
Die im Beispiel verwendeten Musikstücke sind:
- BOCrew - Shine 2024, auf ccmixter, Lizenz: CC BY-NC 3.0
- cdk - Demons, Lizenz: CC BY 3.0
- BOCrew - Dear Huey (Remix 2023), auf ccmixter, Lizenz: CC BY-NC 3.0
Die Original-Musikstücke wurden für die Demo mit einer anderen Bitrate kodiert und teilweise abgeschnitten.
Anleitung
Das folgende Video zeigt, wie sich der MP3-Splitter bedienen lässt. Mit Doppelklick lässt sich das Video vergrößern.
Nach Auswahl einer lokal gespeicherten MP3-Datei mit "Durchsuchen..." bzw. "Browse..." wird man im Firefox Browser gefragt, ob man das Speichern von Daten im "dauerhaften Speicher" erlauben möchte. Hier kann man "OK" auswählen und ermöglicht somit das Speichern der Playlist für eine MP3-Datei. Durch das Drücken auf die Taste "play" wird die ausgewählte MP3-Datei abgespielt. Die Taste "1 m" bedeutet, dass eine Minute in der Radiosendung vorgesprungen werden kann. "-1 m" springt eine Minute zurück. "10 s" sind 10 Sekunden vor und so weiter.
Die Taste "start" nimmt die aktuelle Zeitposition und trägt sie als Start des aktuellen Liedes in den Textbereich unten ein. Die Taste "end" nimmt die aktuelle Zeitposition als Ende des aktuellen Liedes. Durch Klicken auf "title" springt der Cursor in den Textbereich, wodurch man einen Titel für den Zeitabschnitt eintragen kann.
Die Taste "prev" springt bei bereits eingetragener Playlist zum vorher gesetzen Zeitpunkt. Dementsprechend springt die Position durch die Taste "next" zur nächsten Zeitmarkierung.
Die Taste "cut l" schneidet schließlich das aktuell mit "#cut" oder "#new" markierte Lied aus.
Für das obige Beispiel "radio_example.mp3" würde die Playlist zum Schneiden eines Liedes zum Beispiel so aussehen:
3:12.2 - 7:24.2 cdk - Demons #cut
7:24.3 - 7:51.8 BOCrew - Dear Huey (Remix 2023)
Die Taste "Cnext" springt zum nächsten Lied, das ausgeschnitten werden soll (cut next).
"save l" steht für "save locally" - damit wird die eingegebene Playlist lokal im Webbrowser gespeichert. "load l" lädt die gespeicherte Playlist wieder.
In dem Eingabefeld oben neben der Zeitanzeige lässt sich die MP3-Datei über die Tastatur steuern. Die Taste "p" wird dabei für Play und Pause benutzt, "g" fürs Zurückspringen und "h" fürs Vorspringen um 10 Sekunden.
Erläuterungen zu Webanwendungen
Es gibt einfache Programme, die nach dem EVA-Prinzip arbeiten - also Eingabe, Verarbeitung, Ausgabe. Diese Programme lassen sich heutzutage als Webanwendung programmieren. Der Fachbegriff dafür ist "Progressive Web App" (PWA). Diese Webanwendungen laufen auf allen Geräten, auf denen es einen Webbrowser gibt und sind somit nicht wie Apps aus einem App-Store auf Smartphones beschränkt.
HTML-Seiten können durch sogenanntes "responsive Webdesign" für unterschiedliche Bildschirmgrößen angepasst werden. Dadurch kann eine Webapp sowohl auf großen Desktop-Bildschirmen als auch auf kleinen Smartphone-Bildschirmen als grafische Benutzeroberfläche dienen (GUI).
Für das EVA-Prinzip wird zunächst eine lokale Datei über das "input"-Tag der HTML-Seite in den Webbrowser eingelesen:
In der eigens definierten Javascript-Funktion "on_file_change" kann dann die Datei über den "FileReader" zum Beispiel als "Uint8Array" eingelesen werden. Im folgenden Beispiel werden die ersten Bytes einer geladenen Datei überprüft und somit sichergestellt, dass es sich um eine MP3-Datei handelt.
reader.onload = function () {
const byteArray = new Uint8Array(reader.result);
let dataView = new DataView(byteArray.buffer);
let startBytes = dataView.getInt32(0, false);
// check for ID3 tag or MP3 header 0xFF FB which is -5
if ( ((startBytes>>8) == 0x494433) || ((startBytes>>16) == -5) ) {
console.log("valid start bytes for MP3 found");
} else {
alert("This file cannot be processed by this app.\nPlease use standard MP3 files.");
}
}
reader.readAsArrayBuffer(input.files[0]);
Nach der Verarbeitung der Datei mit Javascript als Array kann die Datei schließlich über ein generiertes Link-Element (<a href=...) und einen automatischen Klick auf diesen Link über die Download-Funktion des Browsers wieder lokal gespeichert werden. Blob steht dabei für "Binary Large OBject".
var file = new Blob([audio_part], {type: 'audio/mpeg'});
url = URL.createObjectURL(file);
var a = document.createElement("a");
a.href = url;
a.download = filename;
document.body.appendChild(a);
a.click();
setTimeout(function() {
document.body.removeChild(a);
window.URL.revokeObjectURL(url);
}, 0);
Da die Javascript-Funktion "console.log" im mobilen Firefox auf Smartphones keine sichtbaren Ausgaben erzeugt, könnte man z.B. den localStorage zum Speichern von Log-Meldungen benutzen. Später könnte dann der localStorage bei Problemen ausgelesen werden.
if (debug_to_database) {
localStorage["myApplog"] = ""
}
function data_base_debug() {
if (debug_to_database) {
var message = "\n "+(new Date).toISOString() + " :: "+
Array.prototype.join.call(arguments," , "); // the arguments
localStorage["myApplog"] += message;
}
}
data_base_debug("do your debugging");
Der Javascript Quellcode des MP3 Splitters kann in der HTML-Seite von mp3Split.html angesehen werden.
Ein weiteres Beispiel für eine Webapp ist der Hexeditor "Hexedit" https://hexed.it.
Viel Spaß beim Ausprobieren! Falls noch etwas unklar sein sollte, dann kannst du die Kommentar-Funktion benutzen.