Création de fichiers avec BlobBuilder
Alors que les sites Web s'apparentent de plus en plus aux applications Web, il devient primordial d'utiliser les fichiers de façon significative. À partir du deuxième aperçu de la plateforme, IE10 prend en charge l'API de fichier, permettant ainsi aux développeurs de lire et de fractionner les fichiers sur le client. Le quatrième aperçu de la plateforme prend maintenant en charge BlobBuilder, qui permet aux développeurs de créer de nouveaux fichiers. IE10 offre également deux méthodes permettant à l'utilisateur d'enregistrer des objets blob sur son ordinateur, ce qui donne lieu à des expériences de bout en bout extraordinaires lors de l'utilisation de données résidant sur le client.
Parmi les tests IE, nous avons une démonstration du piano amusante mettant en valeur les fonctionnalités BlobBuilder et de l'API de fichier. Lorsque vous appuyez sur les touches du piano, le site crée deux fichiers : un fichier musical mp3 et un fichier de la partition musicale SVG. Vous pouvez voir la façon dont la taille des deux fichiers évolue à chaque fois que vous appuyez sur une note. Appuyez sur le bouton de lecture pour écouter votre chanson ou téléchargez le fichier musical ou le fichier de la partition SVG en appuyant sur les liens qui se trouvent juste au-dessus des touches du piano. Dans le reste de ce billet de blog, je vais expliquer la façon dont la démonstration fonctionne, en me concentrant sur les fonctionnalités de BlobBuilder et de l'API de fichier.
Fonctionnalités BlobBuilder
BlobBuilder, comme son nom le suggère, est une façon de créer des objets blob sur le client. Pour ce faire, la méthode principale est append. La fonction append accepte trois types de données :
- Objets blob
- Texte brut
- Mémoires tampons de tableaux
La démonstration du piano crée le fichier mp3 en ajoutant des objets blob ensemble, à l'aide d'un blob par note. La démonstration crée le fichier SVG de la partition musicale en ajoutant du texte contenant la source SVG.
getBlob est une autre méthode disponible sur l'objet BlobBuilder qui renvoie un objet blob contenant tous les éléments précédemment ajoutés. Voici un exemple très simple qui fait appel à BlobBuilder pour créer un fichier texte :
// 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");
Au sujet de la méthode getBlob, il est à noter que lorsque vous appelez getBlob dans IE10 et Firefox, le contenu de l'objet BlobBuilder est effacé, de sorte que la prochaine fois que vous l'ajoutez, ce sera comme si vous l'ajoutiez dans un nouvel objet BlobBuilder. WebKit n'efface actuellement pas le contenu de l'objet BlobBuilder après avoir appelé getBlob. Regardez cet exemple :
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");
Dans tous les navigateurs, blob1 contiendra le texte « Hello World! ». Toutefois, blob2 sera différent. Dans IE10 et Firefox, blob2 contiendra le texte « BlobBuilder is great », tandis que dans les navigateurs WebKit, il contiendra le texte « Hello World!BlobBuilder is great ». Cette différence fait toujours l'objet de discussions au sein du groupe de travail sur les applications Web.
Obtention d'objets blob via XHR
L'API de fichier facilite l'accès aux fichiers sélectionnés par l'utilisateur, ce que j'ai mis en avant dans la démonstration Magnetic Poetry. Cela est parfait lorsque vous souhaitez incorporer les propres données de l'utilisateur dans votre site. Toutefois, dans la démonstration du piano, il était nécessaire que les fichiers de notes soient créés dans la démonstration. Lorsque vous voulez utiliser des objets blob tout en fournissant les données, vous pouvez utiliser XHR.
La propriété responseType XHR est nouvelle dans IE10. La propriété responseType prend en charge quatre valeurs : blob, array buffer, text et document. Dans la méthode d'initialisation de la démonstration du piano (getBlobs()), vous verrez ce qui suit :
var req = new XMLHttpRequest();
var url = 'PianoNotes/AllNotes2.mp3';
req.open('GET', url, false);
req.responseType = "blob";
req.onload = function () { /* ... */ };
req.send(null);
Vous pouvez noter que la démonstration n'effectue qu'une seule requête XHR. Elle ne télécharge qu'un fichier qui contient toutes les notes utilisées dans la démonstration. Toutefois, lorsque vous appuyez sur une touche dans la démonstration, une seule note est jouée et le site n'ajoute qu'une seule note au fichier mp3. Pour que cela fonctionne, après le téléchargement du fichier contenant toutes les notes, le site fractionne le fichier à l'aide de la méthode slice de l'API de fichier et extrait 24 notes individuelles. Cette opération représente une énorme économie en termes de performances par rapport au téléchargement de 24 fichiers individuels.
Création d'un fichier musical
Une fois que j'ai un objet blob pour chaque note de la démonstration, la création du fichier mp3 est facile. Chaque fois que vous appuyez sur une touche, j'appelle :
musicBlobBuilder.append(noteBlob);
Afin d'actualiser la taille du fichier, j'obtiens l'objet blob, puis la taille du fichier.
var musicBlob = musicBlobBuilder.getBlob("audio/mp3");
// display musicBlob.size
Enfin, comme je sais que l'objet BlobBuilder a été effacé lorsque j'ai appelé getBlob, je réintègre simplement l'objet blob :
musicBlobBuilder.append(musicBlob);
Création d'un fichier SVG
Chaque fois que vous appuyez sur une touche dans la démonstration, une note est ajoutée à la partition musicale. La partition musicale est représentée par un seul élément SVG contenu dans un élément de division (div) doté de l'identifiant « scoreContainer ». Chaque fois que vous appuyez sur une touche, le script s'exécute et ajoute une note à l'élément SVG, puis le fichier SVG est créé par l'ajout de la source :
svgBlobBuilder.append(document.getElementById("scoreContainer").innerHTML);
var svgBlob = svgBlobBuilder.getBlob("image/svg+xml");
// display svgBlob.size
Dans ce cas, je ne remplis pas de nouveau le svgBlobBuilder, car je souhaite recommencer complètement la prochaine fois que l'utilisateur appuie sur une touche.
Enregistrement des fichiers sur le disque
La dernière partie de la démonstration porte sur l'enregistrement des fichiers sur le disque. Lorsque vous cliquez sur les liens « Music File » (fichier musical) et « Musical Score File » (fichier de la partition musicale) au-dessus du clavier, vous pouvez enregistrer le fichier d'une façon semblable à celle du téléchargement d'un fichier :
Notez que la barre de notification n'est pas disponible dans les aperçus de la plateforme. À la place, une boîte de dialogue d'enregistrement apparaît.
Chaque lien appelle saveSong() ou saveSheetMusic(). En observant chacune de ces méthodes, nous réalisons qu'elles utilisent la fonction msSaveOrOpenBlob :
window.navigator.msSaveOrOpenBlob(svgBlob, "MusicScore.svg");
msSaveOrOpenBlob et msSaveBlob sont deux méthodes disponibles dans IE10 qui permettent aux sites de demander à l'utilisateur d'enregistrer un objet blob sur son ordinateur.
Le fait d'appeler msSaveOrOpenBlob fait apparaître sur la barre de notification une option d'ouverture du fichier, en plus des options d'enregistrement ou d'annulation. Le fait d'appeler msSaveBlob ne fait apparaître que les options d'enregistrement du fichier ou d'annulation. Bien que ces fonctions ne soient pas encore encadrées dans des normes, nous pensons qu'elles sont extrêmement utiles pour écrire des scénarios de bout en bout avec des données blob et nous espérons qu'elles pourront être normalisées à l'avenir.
La création de la démonstration du piano a été une expérience amusante et j'ai hâte de voir comment vous allez utiliser BlobBuilder. Dites-nous ce que vous en pensez !
—Sharon Newman, Chef de projet, Internet Explorer