Erstellen von Dateien mit BlobBuilder
Im Zuge der raschen Entwicklung von Websites hin zu Web-Apps wird der sinnvolle Umgang mit Dateien zunehmend wichtiger. Ab Platform Preview 2 unterstützt IE10 die File-API, mit der Entwickler Dateien lesen und auf dem Client segmentieren können. Platform Preview 4 unterstützt nun auch BlobBuilder, eine Möglichkeit zum Erstellen neuer Dateien. Außerdem bietet IE10 zwei neue Methoden, mit denen ein Benutzer Blobs auf seinem Computer speichern kann. Dies erhöht die Benutzerfreundlichkeit beim Umgang mit Dateien, die auf Clients gespeichert sind.
Beim IE Test Drive gibt es eine interessante Klavierdemo, mit der die Fähigkeiten von BlobBuilder und der File-API vorgestellt werden. Die Website erstellt zwei Dateien, wenn Sie die Tasten des Klaviers betätigen: eine MP3-Musikdatei und eine SVG-Datei mit der Partitur. Sie sehen, wie sich die Größe beider Dateien bei jeder Betätigung einer der Klaviertasten ändert. Klicken Sie auf die Wiedergabetaste, um den Song abzuspielen, oder klicken Sie auf die Links direkt über den Klaviertasten, um entweder die Musikdatei oder die SVG-Partiturdatei herunterzuladen. Im weiteren Verlauf dieses Blogeintrags möchte ich die Funktionsweise der Demo hinsichtlich BlobBuilder und der File-API erläutern.
Funktionen von BlobBuilder
BlobBuilder dient, wie der Name schon sagt, zum Erstellen von Blobs auf dem Client. Bei der Hauptmethode hierfür handelt es sich um append. Die append-Funktion akzeptiert drei Datentypen:
- Blob-Objekte
- Nur-Text
- Array-Puffer
Die Klavierdemo erstellt die MP3-Datei, indem Blobs zusammenfügt werden, jeweils einen Blob für jede Note. Die SVG-Datei mit der Partitur wird erstellt, indem Textabschnitte angefügt werden, die die SVG-Quelle enthalten.
getBlob ist eine weitere, für das BlobBuilder-Objekt verfügbare Methode, die ein Blob-Objekt mit allen zuvor angefügten Elementen zurückgibt. Im Folgenden finden Sie ein einfaches Beispiel für das Erstellen einer Textdatei mit BlobBuilder:
// The BlobBuilder constructor is prefixed in all browsers.
// Use MSBlobBuilder in IE, MozBlobBuilder in Firefox, and WebKitBlobBuilder in WebKit-based browsers.
var bb = new MSBlobBuilder();
bb.append("Hello World!");
var blob1 = bb.getBlob("text/plain");
Bei der getBlob-Methode ist zu beachten, dass beim Aufrufen von getBlob in IE10 und Firefox der Inhalt des BlobBuilder-Objekts gelöscht wird. Beim nächsten Aufrufen der append-Methode werden die Daten daher an ein neues BlobBuilder-Objekt angefügt. Unter WebKit werden die Inhalte des BlobBuilder-Objekts nach dem Aufrufen von getBlob derzeit nicht gelöscht. Betrachten Sie folgendes Beispiel:
var bb = new MSBlobBuilder();
bb.append("Hello World!");
var blob1 = bb.getBlob("text/plain");
bb.append("BlobBuilder is great");
var blob2 = bb.getBlob("text/plain");
„blob1“ enthält in allen Browsern den Text „Hello World!“. Jedoch verhält sich „blob2“ anders. In IE10 und Firefox enthält „blob2“ den Text „BlobBuilder is great“, während in WebKit-basierten Browsern der Text „Hello World!BlobBuilder is great“ enthalten ist. Dieser Unterschied wird von der Web Applications-Arbeitsgruppe noch diskutiert.
Abrufen von Blobs mit XHR
Die File-API ermöglicht den einfachen Zugriff auf vom Benutzer ausgewählte Dateien,wie bereits in der Demo Magnetic Poetry vorgestellt. Dies ist eine großartige Möglichkeit für Benutzer, eigene Daten auf einer Website zu verwenden. Jedoch musste ich bei der Klavierdemo die Partiturdatei in die Demo integrieren. Wenn Sie Blobs verwenden, die Daten jedoch selbst bereitstellen möchten, bietet sich XHR an.
Die XHR-Eigenschaft responseType ist neu in IE10. Die responseType-Eigenschaft unterstützt vier Werte: blob, array buffer, text und document. In der Initialisierungsmethode der Klavierdemo – getBlobs() – werden Sie Folgendes bemerken:
var req = new XMLHttpRequest();
var url = 'PianoNotes/AllNotes2.mp3';
req.open('GET', url, false);
req.responseType = "blob";
req.onload = function () { /* ... */ };
req.send(null);
Wie Sie sehen, verwendet die Demo nur eine XHR-Anforderung. Es wird nur eine Datei heruntergeladen, die alle Noten der Demo enthält. Wenn Sie jedoch in der Demo eine Taste drücken, wird nur eine Note gespielt und in der MP3-Datei nur eine Note angehängt. Hierzu wird nach dem Herunterladen der Datei mit allen Noten die Datei von der Website mithilfe der File-API-Methode slice segmentiert, und es werden 24 einzelne Noten extrahiert. Dies stellt gegenüber dem Herunterladen von 24 einzelnen Dateien einen wesentichen Leistungsvorteil dar .
Erstellen der Musikdatei
Nachdem ein Blob für jede Note in der Demo vorhanden ist, lässt sich die MP3-Datei problemlos erstellen. Bei jedem Tastendruck wird Folgendes aufgerufen:
musicBlobBuilder.append(noteBlob);
Zum Aktualisieren der Dateigröße wird zunächst der Blob und anschließend die Dateigröße abgerufen.
var musicBlob = musicBlobBuilder.getBlob("audio/mp3");
// display musicBlob.size
Da das BlobBuilder-Objekt beim Aufrufen von getBlob gelöscht wurde, füge ich den Blob als letzten Schritt erneut an:
musicBlobBuilder.append(musicBlob);
Erstellen der SVG-Datei
Jedes Mal, wenn Sie in der Demo eine Taste betätigen, sehen Sie, wie der Partitur eine Note hinzugefügt wird. Die Partitur wird mithilfe eines einzigen SVG-Elements erstellt, das sich in einem „div“-Tag befindet, dessen „id“ den Wert „scoreContainer“ aufweist. Jedes Mal, wenn Sie eine Taste betätigen, wird das Skript ausgeführt und fügt dem SVG-Element eine Note hinzu. Anschließend wird die SVG-Datei durch Anfügen der Quelle erstellt:
svgBlobBuilder.append(document.getElementById("scoreContainer").innerHTML);
var svgBlob = svgBlobBuilder.getBlob("image/svg+xml");
// display svgBlob.size
In diesem Fall bleibt „svgBlobBuilder“ leer, da bei der nächsten Tastenbetätigung von neuem begonnen werden soll.
Speichern der Dateien auf der Festplatte
Der letzte Teil der Demo ist das Speichern der Dateien auf der Festplatte. Wenn Sie auf die Links „Music File“ (Musikdatei) und „Musical Score File“ (Partiturdatei) über den Klaviertasten klicken, können Sie die Datei speichern – genau so, als würden Sie eine Datei herunterladen:
Beachten Sie, dass die Benachrichtigungsleiste in den Platform Previews nicht zur Verfügung steht. Stattdessen wird ein Speicherdialogfeld angezeigt.
Durch die Links wird entweder saveSong() oder saveSheetMusic() aufgerufen. Bei genauerem Hinsehen wird deutlich, dass beide Methoden die msSaveOrOpenBlob-Funktion verwenden:
window.navigator.msSaveOrOpenBlob(svgBlob, "MusicScore.svg");
msSaveOrOpenBlob und msSaveBlob sind die beiden Methoden, die in IE10 zur Verfügung stehen, mit denen ein Benutzer von einer Website aufgefordert werden kann, einen Blob auf dem Computer zu speichern.
Beim Aufrufen von msSaveOrOpenBlob werden in der Benachrichtigungsleiste die Optionen angezeigt, die Datei zu öffnen, zu speichern oder den Vorgang abzubrechen. Der Aufruf von msSaveBlob stellt lediglich die Möglichkeit zur Verfügung, die Datei zu speichern oder den Vorgang abzubrechen. Obwohl diese Funktionen bislang in keinen Standard enthalten sind, halten wir sie für äußerst nützlich beim Erstellen von End-to-End-Szenarien mit Blob-Daten und hoffen, dass die Funktionen in Zukunft in einen Standard aufgenommen werden.
Das Erstellen der Klavierdemo hat Spaß gemacht. Ich freue mich darauf, zu sehen, wie Sie BlobBuilder verwenden. Teilen Sie uns mit, was Sie davon halten!
– Sharon Newman, Program Manager, Internet Explorer