Criando arquivos com o BlobBuilder

Como os sites estão cada vez mais se tornando aplicativos Web, trabalhar com arquivos de formas significativas está se tornando cada vez mais importante. A partir do Platform Preview 2, o IE10 inclui suporte ao File API, permitindo aos desenvolvedores ler e dividir arquivos no cliente. O Platform Preview 4 adiciona suporte ao BlobBuilder, uma maneira de os desenvolvedores criarem novos arquivos. O IE10 também tem dois novos métodos que permitem ao usuário salvar blobs em seu computador, permitindo experiências completas excelentes ao se trabalhar com dados residentes no cliente.

No test drive do IE, temos uma divertida demonstração de piano que mostra as funcionalidades do BlobBuilder e do File API. Quando você pressiona teclas no piano, o site cria dois arquivos: um arquivo de música mp3 e um arquivo SVG com a partitura musical. Você pode ver como o tamanho dos dois arquivos é alterado cada vez que uma tecla é pressionada. Pressione o botão de execução para escutar a sua música ou baixe o arquivo da música ou o arquivo SVG da partitura, pressionando os links acima das teclas do piano. Nesta postagem, falarei sobre como funciona a demonstração, focando as funcionalidades do BlobBuilder e do File API.

Funcionalidades do BlobBuilder

O BlobBuilder, como o nome original indica, é uma maneira de criar blobs no cliente. O principal método para isso é o append. A função append aceita três tipos de dados:

• Objetos Blob
• Texto sem formatação
• Buffers de matriz

A demonstração de piano cria o arquivo mp3 acrescentando blobs juntos, usando um blob para cada nota. A demonstração cria o arquivo SVG da partitura musical acrescentando texto que contém a fonte do SVG.

O getBlob é outro método disponível no objeto do BlobBuilder que retorna um objeto blob contendo todos os itens reunidos anteriormente. Veja este exemplo muito simples que usa o BlobBuilder para criar um arquivo de texto:

// 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");

Algo a ser observado sobre o método getBlob é que, quando você chama o getBlob no IE10 e Firefox, ele limpa todo o conteúdo do objeto do BlobBuilder, portanto, na vez seguinte que chamar o acréscimo, será como se você estivesse fazendo um acréscimo a um novo objeto do BlobBuilder. No momento, o WebKit não limpa o conteúdo do BlobBuilder após chamar o getBlob. Considere este exemplo:

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");

Em todos os navegadores, o blob1 terá o texto “Hello World!”. Entretanto, o blob2 será diferente. No IE10 e no Firefox, o blob2 terá o texto “BlobBuilder is great” enquanto que os navegadores baseados no WebKit terão o texto “Hello World!BlobBuilder is great”. Essa discrepância ainda está em discussão no grupo de trabalho dos aplicativos Web.

Obtendo blobs via XHR

O File API facilita o acesso a arquivos selecionados pelo usuário, algo que mostrei na demonstração Magnetic Poetry (Poesia magnética). É ótimo quando você deseja incorporar os próprios dados dos usuários ao seu site. Entretanto, na demonstração de piano, eu precisava que os arquivos das notas fossem criados na demonstração. Quando você desejar trabalhar com blobs, mas quiser fornecer os dados, poderá usar o XHR.

Uma novidade no IE10 é a propriedade responseType do XHR. A propriedade responseType dá suporte a quatro valores: blob, array buffer, text e document. No método de inicialização da demonstração do piano - getBlobs() - veremos o seguinte:

var req = new XMLHttpRequest();

var url = 'PianoNotes/AllNotes2.mp3';

req.open('GET', url, false);

req.responseType = "blob";

req.onload = function () { /* ... */ };

req.send(null);

Algo que podemos observar é que a demonstração somente faz uma solicitação do XHR. Ela baixa somente um arquivo que contém todas as notas usadas na demonstração. Entretanto, quando pressionamos uma tecla na demonstração, somente uma nota é executada e o site acrescenta somente essa nota ao arquivo mp3. Para que isso funcione, após baixar o conteúdo do arquivo que contém todas as notas, o site divide o arquivo usando o método slice do File API e extrai 24 notas individuais. Isso significa uma grande economia em termos de desempenho, pois não é necessário baixar 24 arquivos separados.

Criando o arquivo da música

Tendo um blob para cada nota na demonstração, fica fácil criar o arquivo mp3. Cada vez que você pressiona uma tecla, eu chamo:

musicBlobBuilder.append(noteBlob);

Para atualizar o tamanho do arquivo, eu obtenho o blob e depois o tamanho do arquivo.

var musicBlob = musicBlobBuilder.getBlob("audio/mp3");

// display musicBlob.size

No final, como sei que o objeto do BlobBuilder foi limpo quando chamei o getBlob, eu acrescento o blob novamente:

musicBlobBuilder.append(musicBlob);

Criando o arquivo SVG

Cada vez que pressiona uma tecla na demonstração, você vê uma nota adicionada à partitura musical. A partitura musical é escrita por um único elemento SVG contido em uma div com a id “scoreContainer”. Cada vez que você pressiona uma tecla, o script é executado e adiciona uma nota ao elemento SVG. O arquivo SVG, então, é criado acrescentando a fonte:

svgBlobBuilder.append(document.getElementById("scoreContainer").innerHTML);

var svgBlob = svgBlobBuilder.getBlob("image/svg+xml");

// display svgBlob.size

Nesse caso, não preencho o svgBlobBuilder novamente porque desejo recomeçar do zero na próxima vez em que um usuário pressionar uma tecla.

Salvando arquivos no disco

A última parte da demonstração é salvar os arquivos no disco. Quando pressionar os links “Music File” (Arquivo de música) e “Musical Score File” (Arquivo da partitura musical) acima das teclas do piano, você poderá salvar o arquivo por meio de uma experiência parecida com o download de um arquivo:

Observe que a barra de notificação não está disponível nos Platform Previews. Em vez dela, é exibida uma caixa de diálogo de salvar.

Cada link chama saveSong() ou saveSheetMusic(). Examinando cada um desses métodos, observamos que eles usam a função msSaveOrOpenBlob:

window.navigator.msSaveOrOpenBlob(svgBlob, "MusicScore.svg");

msSaveOrOpenBlob e msSaveBlob são dois métodos disponíveis no IE10 que permitem que os sites solicitem ao usuário que salve um blob em seu computador.

Chamar o msSaveOrOpenBlob oferecerá uma opção na barra de notificação para, além de salvar ou cancelar, abrir o arquivo. Chamar o msSaveBlob somente oferece a opção de salvar o arquivo ou cancelar. Embora essas funções ainda não estejam incluídas em nenhum padrão, acreditamos que elas sejam extremamente úteis para a gravação de cenários completos com dados blob e esperamos que elas venham a se tornar padrão.

A criação da demonstração do piano foi uma experiência divertida e estou ansiosa para ver como você usará o BlobBuilder. Dê a sua opinião!

—Sharon Newman, gerente de programas, Internet Explorer