Создание файлов с помощью средства BlobBuilder
По мере того, как веб-сайты все больше превращаются в веб-приложения, увеличивается необходимость обеспечить удобную работу с файлами. Начиная со второй версии Platform Preview Internet Explorer 10 поддерживает интерфейс File API, позволяющий разработчикам читать файлы и разбивать их на клиенте. В Platform Preview 4 добавлена поддержка средства BlobBuilder, позволяющая разработчикам создавать новые файлы. В Internet Explorer 10 также есть два новых метода для сохранения больших двоичных объектов на компьютере, что очень удобно при работе с данными, хранящимися на клиентах.
На сайте тестирования Internet Explorer 10 Test Drive мы создали веселую демонстрацию пианино, показывающую возможности BlobBuilder и File API. При нажатии клавиши пианино сайт создает два файла: музыкальный MP3-файл и SVG-файл с нотами. Можно увидеть, как размер обоих файлов меняется при каждом нажатии клавиши. Нажмите кнопку воспроизведения, чтобы прослушать песню, или загрузите музыкальный или SVG-файл, щелкнув ссылки над клавишами пианино. Далее в этой записи блога я опишу, как работает эта демонстрация, уделив основное внимание возможностям BlobBuilder и File API.
Возможности объекта BlobBuilder
BlobBuilder (буквально — построитель BLOB-объектов), как следует из названия, — это способ построения больших двоичных объектов на клиенте. Основной метод для этого — append. Функция append принимает три типа данных:
- большие двоичные объекты;
- обычный текст;
- буферы массивов.
Демонстрация с пианино создает MP3-файл, добавляя большие двоичные объекты друг к другу, используя один объект для каждой ноты. Демонстрация создает SVG-файл с нотами, добавляя текст с источником SVG.
getBlob — это еще один метод, доступный в объекте BlobBuilder, который возвращает большой двоичный объект со всеми ранее добавленными элементами. Вот простой пример, в котором 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");
О методе getBlob следует сказать следующее: при вызове getBlob в Internet Explorer 10 и Firefox очищается содержимое объекта BlobBuilder, поэтому следующий вызов метода append аналогичен добавлению данных в новый объект BlobBuilder. На данный момент WebKit не очищает содержимое BlobBuilder после вызова getBlob. Рассмотрим следующий пример:
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 будет содержать текст «Hello World!». Но для blob2 все будет по-другому. В Internet Explorer 10 и Firefox blob2 будет содержать текст «BlobBuilder is great», а в браузерах на основе WebKit он будет содержать текст «Hello World!BlobBuilder is great». Эта несогласованность все еще обсуждается в рабочей группе Web Applications.
Получение больших двоичных объектов с помощью XHR
Интерфейс File API упрощает доступ к файлам, выбранным пользователем, как было показано в демонстрации Magnetic Poetry. Это прекрасно, если вы хотите встроить данные пользователей в собственный сайт. Но в демонстрации с пианино мне нужно было встроить файлы нот. Если необходимо работать с большими двоичными объектами и при этом предоставлять данные, можно использовать XHR.
В Internet Explorer 10 представлено новое свойство XHR — responseType. Свойство responseType поддерживает четыре значения: blob, array buffer, text и document. В методе инициализации, который используется в демонстрации с пианино, — getBlobs() — вы увидите следующее:
var req = new XMLHttpRequest();
var url = 'PianoNotes/AllNotes2.mp3';
req.open('GET', url, false);
req.responseType = "blob";
req.onload = function () { /* ... */ };
req.send(null);
Следует отметить, что в демонстрации выполняется один запрос XHR. Загружается только один файл, содержащий все ноты, используемые в демонстрации. Но если нажать клавишу в демонстрации, проигрывается только одна нота, а сайт добавляет в MP3-файл только одну ноту. Чтобы реализовать это, после загрузки файла со всеми нотами сайт разбивает файл с помощью метода slice интерфейса File API и извлекает 24 отдельные ноты. Это значительно повышает производительность по сравнению с загрузкой 24 отдельных файлов.
Создание музыкального файла
После получения большого двоичного объекта для каждой ноты в демонстрации будет легко создать MP3-файл. При каждом нажатии клавиши мы вызываем:
musicBlobBuilder.append(noteBlob);
Чтобы обновить размер файла, я получаю большой двоичный объект и затем получаю размер файла.
var musicBlob = musicBlobBuilder.getBlob("audio/mp3");
// display musicBlob.size
Так как я знаю, что объект BlobBuilder был очищен после вызова getBlob, я просто добавлю большой двоичный объект назад в:
musicBlobBuilder.append(musicBlob);
Создание SVG-файла
При каждом нажатии клавиши в демонстрации нота добавляется в нотную запись. Ноты рисуются одним SVG-элементом в div с идентификатором «scoreContainer». При каждом нажатии клавиши выполняется скрипт, который добавляет ноту в SVG-элемент, после чего создается SVG-файл за счет дополнения источника:
svgBlobBuilder.append(document.getElementById("scoreContainer").innerHTML);
var svgBlob = svgBlobBuilder.getBlob("image/svg+xml");
// display svgBlob.size
В этом случае я не заполняю svgBlobBuilder повторно, потому что хочу начать с чистого листа, когда пользователь в следующий раз нажмет клавишу.
Сохранение файлов на диск
Последняя часть демонстрации — сохранение файлов на диск. Если перейти по ссылкам «Music File» (Музыкальный файл) и «Musical Score File» (Файл нотной записи) над клавишами пианино, вы сможете сохранить файл точно так же, как вы загружаете файл:
Учтите, что строка уведомления недоступна в версиях Platform Preview. Вместо нее используется диалоговое окно сохранения файла.
Каждая ссылка вызывает метод saveSong() или saveSheetMusic(). Если рассмотреть каждый из них, то можно увидеть, что они используют функцию msSaveOrOpenBlob:
window.navigator.msSaveOrOpenBlob(svgBlob, "MusicScore.svg");
msSaveOrOpenBlob и msSaveBlob — это два метода, доступные в Internet Explorer 10 и позволяющие запросить у пользователя сохранение большого двоичного объекта на компьютер.
При вызове msSaveOrOpenBlob в строке уведомления можно выбрать команду открытия файла (помимо сохранения и отмены). При вызове msSaveBlob предоставляется только возможность сохранить файл или отменить операцию. Хотя эти функции еще не включены в какой-либо стандарт, мы считаем, что они чрезвычайно полезны для написания полных сценариев с данными больших двоичных объектов, и надеемся, что они смогут стать стандартными в определенное время.
Создание демонстрации пианино было веселым опытом, и я с нетерпением жду, как вы будете использовать BlobBuilder. Ждем ваших откликов!
— Шэрон Ньюмэн (Sharon Newman), руководитель программы, Internet Explorer