BlobBuilder로 파일을 만들어 보세요
웹 사이트가 웹 응용 프로그램으로 빠르게 전환됨에 따라, 보다 의미 있는 방법으로 파일 작업을 하는 것이 더욱 중요해지고 있습니다. 플랫폼 프리뷰 2부터 File API를 지원하기 시작한 IE10을 통해 개발자는 클라이언트상에서 파일을 읽고 조각낼 수 있습니다. 플랫폼 프리뷰 4의 경우에는 개발자가 파일을 새로 만들 수 있는 BlobBuilder 지원 기능도 포함되었습니다. 또한, IE10은 사용자가 자신의 컴퓨터에 Blob을 저장하는 새로운 두 가지 방법을 제공합니다. 따라서, 클라이언트 상주 데이터로 작업할 때 최상의 사용자 경험을 가능하게 합니다.
IE 테스트 드라이브 중에서도 피아노 데모는 색다른 재미를 선사하는 데모로, BlobBuilder 및 File API 기능을 자랑합니다. 피아노 건반을 누르면 사이트에서 MP3 음악 파일과 SVG 악보 파일 등 2개의 파일을 만듭니다. 건반을 누를 때마다 두 파일의 크기가 어떻게 달라지는지 볼 수 있습니다. 재생 단추를 누르면 연주한 음악을 들을 수 있고, 피아노 건반 바로 위에 있는 링크를 누르면 음악 파일이나 SVG 악보 파일을 다운로드할 수 있습니다. 이 글에서는 BlobBuilder 및 File API 기능을 중심으로 피아노 데모가 어떻게 실행되는지 알아보겠습니다.
BlobBuilder의 기능
BlobBuilder는 이름에서 알 수 있듯이 클라이언트에서 Blob을 만드는 방식입니다. 이러한 작업은 주로 append 기능을 통해 구현됩니다. append 기능은 다음의 세 가지 데이터 유형을 지원합니다.
- Blob 개체
- 일반 텍스트
- 배열 버퍼
피아노 데모는 각 음에 하나의 Blob을 사용하고 이러한 Blob을 모두 추가하는 방법으로 MP3 파일을 만듭니다. 한편, SVG 악보 파일의 경우에는 SVG 소스가 포함된 텍스트를 추가하는 방법으로 생성합니다.
getBlob은 BlobBuilder 개체에서 사용할 수 있는 또 다른 방법으로, 이전에 추가된 모든 항목을 포함하는 Blob 개체를 반환할 수 있습니다. 다음은 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 방법에서 알아두어야 할 점은 IE10 및 Firefox에서 getBlob을 호출할 때 BlobBuilder 개체의 내용이 지워진다는 것입니다. 따라서, 사용자가 다음번에 append를 호출하면 새 BlobBuilder 개체에 추가한 것처럼 보입니다. WebKit은 현재 getBlob을 호출한 후 BlobBuilder의 내용을 지우지 않습니다. 다음 예제를 보시기 바랍니다.
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의 경우에는 이와 다릅니다. IE10 및 Firefox에서 blob2는 "BlobBuilder is great" 텍스트를 포함하는 반면, WebKit 기반 브라우저에서는 "Hello World!BlobBuilder is great" 텍스트가 포함됩니다. 이러한 차이에 대한 논의는 웹 응용 프로그램 작업 그룹에서 계속 진행하는 중입니다.
XHR에서 Blob 가져오기
이전에 Magnetic Poetry 데모에서 설명한 것처럼 File API를 활용하면 사용자가 선택한 파일에 쉽게 액세스할 수 있습니다. 이는 사용자의 데이터를 사이트에 포함시키려 할 때 매우 유용합니다. 하지만 피아노 데모에서는 데모에 넣을 음계 파일이 필요했습니다. Blob 작업을 원할 때 데이터를 제공하고 싶다면 XHR을 사용하면 됩니다.
IE10의 새로운 기능은 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 파일에 추가합니다. 이는 모든 음이 포함된 파일을 다운로드한 후 사이트에서 파일 API slice 방법으로 파일을 조각내어 24개의 개별 음을 추출함으로써 가능합니다. 24개의 개별 파일을 다운로드하는 것에 비하면 훨씬 효율적인 방식입니다.
음악 파일 만들기
데모에 각 음을 위한 Blob이 있으면 MP3 파일을 쉽게 만들 수 있습니다. 건반을 누를 때마다 다음이 호출됩니다.
musicBlobBuilder.append(noteBlob);
파일 크기를 업데이트하기 위해 Blob을 가져와 파일 크기를 알아냅니다.
var musicBlob = musicBlobBuilder.getBlob("audio/mp3");
// display musicBlob.size
마지막으로, getBlob을 호출했을 때 BlobBuilder 개체가 지워졌다는 것을 알고 있으므로 Blob을 다시 추가합니다.
musicBlobBuilder.append(musicBlob);
SVG 파일 만들기
데모에서 건반을 누를 때마다 악보에 음표가 추가되는 것을 볼 수 있습니다. 악보는 "scoreContainer"라는 ID의 Div 내에 포함된 하나의 SVG 요소에 의해 그려집니다. 건반을 누를 때마다 스크립트가 실행되어 SVG 요소에 음이 추가되며, 소스가 추가되어 SVG 파일이 생성됩니다.
svgBlobBuilder.append(document.getElementById("scoreContainer").innerHTML);
var svgBlob = svgBlobBuilder.getBlob("image/svg+xml");
// display svgBlob.size
이번 경우에는 다음번에 사용자가 건반을 눌렀을 때 새롭게 시작할 수 있도록 svgBlobBuilder를 다시 채우지 않겠습니다.
파일을 디스크에 저장
데모의 마지막 부분은 파일을 디스크에 저장하는 것입니다. 피아노 건반 위에 있는 "Music File(음악 파일)"과 "Musical Score File(악보 파일)" 링크를 누르면 일반적으로 파일을 다운로드하는 것처럼 파일을 저장할 수 있습니다.
플랫폼 프리뷰에서는 알림 표시줄이 지원되지 않는 대신, 저장 대화 상자가 표시됩니다.
각 링크는 saveSong() 또는 saveSheetMusic()을 호출합니다. 각 방법을 자세히 들여다보면 msSaveOrOpenBlob 기능이 사용된다는 것을 알 수 있습니다.
window.navigator.msSaveOrOpenBlob(svgBlob, "MusicScore.svg");
msSaveOrOpenBlob 및 msSaveBlob은 IE10이 지원하는 두 기능으로, 사이트에서 사용자에게 Blob을 컴퓨터에 저장할 것인지를 묻는 메시지를 제공하게 합니다.
msSaveOrOpenBlob을 호출하면 알림 표시줄에 저장, 취소 옵션과 함께 파일 열기 옵션이 제공됩니다. msSaveBlob은 파일 저장 및 취소 옵션만 제공합니다. 이러한 기능은 아직 표준이 되지 않았지만 Blob 데이터로 전체 시나리오를 작성할 때 매우 유용하므로 언젠가는 표준이 될 것을 희망합니다.
피아노 데모를 만드는 것은 재미있는 경험이었습니다. 여러분이 BlobBuilder를 어떻게 사용하실지 저는 무척 기대가 됩니다. 여러분의 생각을 들려주시기 바랍니다.
- Internet Explorer 프로그램 관리자, Sharon Newman