HTML5でオーディオプレーヤー作成 その9

さて、ドラッグ＆ドロップですが、dragenter、dragover、dropというイベントが
発生します。それを処理するには以下のような感じにします。
FileDropIdはdivタグです。

// ドロップイベントの登録
var oFileDropId = document.getElementById("FileDropId");
	
// ドロップイベントの開始
oFileDropId.addEventListener( "dragenter", function( event ) 
{
   // デフォルト・アクションのキャンセル
   event.preventDefault();
}, false);

// ドロップイベントの終了
oFileDropId.addEventListener( "dragover", function( event ) 
{
   // デフォルト・アクションのキャンセル
   event.preventDefault();
}, false);

// ドロップイベント中
oFileDropId.addEventListener( "drop", function( event ) 
{
   // デフォルト・アクションのキャンセル
   event.preventDefault();
   // ファイル読み込みコードはここから。
   // 転送されたデータの内容を取得
    var FileData = event.dataTransfer.files;
}

ローカルファイルのドラッグ＆ドロップを受けるとevent.dataTransfer.filesに
ファイルオブジェクトとして、返却されます。複数ドロップすると配列となって返却されます。
ちなみに、ファイルオブジェクトは1つであっても必ず配列として返却されます。
代入を受けた変数は1つの場合は上の例だとFileData[0]として使用します。
ここで、ファイルオブジェクトを受け取ると以下の内容を参照できます。

File.size ファイルサイズ
File.type ファイルのMIMEタイプ(音声ファイルだとaudio/mpegとか)
File.name ファイル名
File.lastModifiedDate ファイルの最終更新日(不明の場合は空文字)

ファイルオブジェクトからではファイルパスを取得できないので、取得するために
FileAPIのreadAsDataURL関数を使用します。
これを使用したら、非同期でファイルパスがresultに返却されます。
スクリプトはこんな感じでしょうか。

var iFileFlag = 0;
// Chrome or IE9対策。
if( event == null || event == undefined )
{
   iFileFlag = 1;
}
else if( event.target == null || event.target == undefined )
{
   iFileFlag = 2;
}
else if( event.target.files == null || event.target.files == undefined )
{
   iFileFlag = 3;
}
else
{
   iFileFlag = 0;
}
//FileAPIが対応している場合
if( iFileFlag == 0 )
{
   var file = event.target.files;
   FileReader reader = new FileReader();
   reader.readAsDataURL( file[0] );

   reader.onload = function()
   {
      alert(read.result);
   }
}
//FileAPIが対応していない場合
else
{
}

非同期のため、ファイルが複数受け付けられていない場合は問題ないですが、
複数のファイル受け付けている場合がどのファイルを今読み込んでいるのかを
判定するのに苦労しました。

最初うまくいかなくて、表示しているトラックリストと再生したファイルに齟齬が起きました・・・。
その内容を反映させたスクリプトは次回以降～。