OSDN Git Service

0.5バージョンで再生できるように修正
[nacltest/xmplayer.git] / xm_player.html
index 359752e..f3f86d1 100644 (file)
@@ -37,6 +37,8 @@ found in the LICENSE file.
     var status_loading = 1;
     var status_complete = 2;
     var total_bytes = 0;
+    var handleMessage_ = null;
+
     function reportLog(log) {
 //      $("#GeneralOutput").append(log + "<br/>");
       var logElt = document.getElementById('GeneralOutput');
@@ -78,9 +80,9 @@ found in the LICENSE file.
       $("button").attr("disabled", "true");
       $("#tabs").tabs();
       $().unload(function () {
-        if (timerId != null) {
-          clearInterval(timerId);
-        }
+//        if (timerId != null) {
+//          clearInterval(timerId);
+//        }
       });
     });
 
@@ -90,55 +92,79 @@ found in the LICENSE file.
 //      logElt.textContent += 'RESULT:\n' + result + '\n';
 //    }
 
-    function moduleLoad() {
+    
+    function handleMessage(message_event) {
+      reportLog("handleMessage::" + message_event);
+      if (handleMessage_ != null && message_event.data.match(/^GetURLHandler/)) {
+        handleMessage_(message_event);
+      } else {
+        reportLog(message_event.data);
+      }
+//      document.getElementById('frequency_field').value = message_event.data;
+    }
+
+    function moduleDidLoad() {
+      reportLog("moduleDidLoad");
       xmPlayer = document.getElementById("xmPlayer");
+      xmPlayer.addEventListener('message', handleMessage, false);
 
-      timerId = setInterval(function () {
-        if (xmPlayer.checkLog()) {
-          var c = $("#GeneralOutput");
-          while (xmPlayer.checkLog()) {
-            c.append(xmPlayer.getLog() + "<br/>");
-          }
-        }
-      }, 300);
+
+//      timerId = setInterval(function () {
+//        if (xmPlayer.checkLog()) {
+//          var c = $("#GeneralOutput");
+//          while (xmPlayer.checkLog()) {
+//            c.append(xmPlayer.getLog() + "<br/>");
+//          }
+//        }
+//      }, 300);
 
       $("#load-file").attr("disabled", "").click(
         function () {
           try {
+            reportLog("LoadFile");
             var logElt = document.getElementById('GeneralOutput');
 
-            reportResult = function (status, success, result) {
+            handleMessage_ = function (message) {
+              reportLog("### File Loading..." & message.data);
+            
+              var status_info = message.data.split(":");
+              var status = parseInt(status_info[1]);
+              var success = parseInt(status_info[2]) != 0;
+
               var logElt = document.getElementById('GeneralOutput');
               logElt.innerHTML += 'File URL:' + $("#xmfile-url").val() + '<br/>';
-              logElt.innerHTML += 'RESULT:\n' + result + '<br/>';
+              logElt.innerHTML += 'RESULT:\n' + status_info[3] + '<br/>';
 
               // ファイルオープンが成功したら
               if (status == status_open && success) {
                 // トータルバイト数を取得する
-                total_bytes = parseInt(result);
+                total_bytes = parseInt(status_info[3]);
                 logElt.innerHTML += "TotalBytes:" + total_bytes + '<br/>';
                 $("#status-dialog")
                   .html("<p>ファイルを読み込んでいます。</p><div id='progress'></div>")
                   .attr("title", "ファイルロード")
-                  .dialog();
+                  .dialog({ buttons: null});
 
                 $("#progress").progressbar({ value: 0 });
-                // 100ms 毎に進捗を表示
-                progress_id = setInterval(function () {
-                  $("GeneralOutput").append(xmPlayer.receivedBytes + "<br/>");
-                  $("#progress").progressbar("value", parseInt(xmPlayer.receivedBytes * 100 / total_bytes));
-                }, 100);
+              }
+
+              if (status == status_loading && success)
+              {
+                  $("GeneralOutput").append( parseInt(status_info[3])+ "<br/>");
+                  $("#progress").progressbar("value", parseInt(status_info[3]) * 100 / total_bytes);
               }
 
               if (status == status_complete && success) {
                 if (progress_id != null)
                   clearInterval(progress_id);
                 $("#Play").click(function () {
-                  xmPlayer.playSound();
+                  //xmPlayer.playSound();
+                  xmPlayer.postMessage("playSound");
                 }).attr("disabled", "");
 
                 $("#Stop").click(function () {
-                  xmPlayer.stopSound();
+                  xmPlayer.postMessage("stopSound");
+                  //xmPlayer.stopSound();
                 }).attr("disabled", "");
 
                 $("#status-dialog")
@@ -149,9 +175,7 @@ found in the LICENSE file.
                   }]
                 });
               } else if (!success) {
-                if (progress_id != null)
-                  clearInterval(progress_id);
-                logElt.innerHTML += "Load Failure:" + result + "<br/>";
+                logElt.innerHTML += "Load Failure:" + status_info[3] + "<br/>";
                 $("#status-dialog").html("ファイルの読み込みが失敗しました。" + result)
                 .attr("title", "ファイルロード")
                 .dialog("options", "buttons", [
@@ -162,9 +186,7 @@ found in the LICENSE file.
               }
             };
 
-            if (!xmPlayer.loadXmFile($("#xmfile-url").val(), "reportResult")) {
-              logElt.innerHTML += "Load Failure.<br/>";
-            };
+            xmPlayer.postMessage('loadXmFile:' + $("#xmfile-url").val());
 
           } catch (e) {
             var logElt = document.getElementById('GeneralOutput');
@@ -229,13 +251,19 @@ found in the LICENSE file.
   <div>ログ出力</div>
   <div id="GeneralOutput"></div>
  </div>
+  <div id="listener">
+    <script type="text/javascript">
+      document.getElementById('listener')
+           .addEventListener('load', moduleDidLoad, true);
+    </script>
+
   <embed name="nacl_module"
          id="xmPlayer"
          width=0 height=0
-         nacl="xm_player.nmf"
+         src="xm_player.nmf"
          type="application/x-nacl"
-         onload="moduleLoad();"
  />
+ </div>
  <div id="status-dialog" title=""><p>これはこれは</p></div>
  </body>
 </html>