xm_player.html

   1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"\r
   2           "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">\r
   3 <html>\r
   4 <!--\r
   5 Copyright (c) 2010 The Native Client Authors. All rights reserved.\r
   6 Use of this source code is governed by a BSD-style license that can be\r
   7 found in the LICENSE file.\r
   8 -->\r
   9 <head>\r
  10 <title>XM File Player</title>\r
  11 <meta http-equiv="content-type" content="text/html; charset=utf-8" />\r
  12 <meta name="description" content="XM File Player" /> \r
  13 <meta name="keywords" content="Native Client,jQuery,HTML5,MOD,XM" /> \r
  14 <meta http-equiv="Content-Style-Type" content="text/css" /> \r
  15 <meta http-equiv="Content-Script-Type" content="text/javascript" /> \r
  16 <link type="text/css" href="css/smoothness/jquery-ui-1.8.11.custom.css" rel="stylesheet" />     \r
  17 <script type="text/javascript" src="jquery-1.5.1.js"></script>\r
  18 <script type="text/javascript" src="jquery-ui-1.8.11.custom.js"></script>\r
  19 <script type="text/javascript" src="http://nacl-gallery.appspot.com/check_browser.js"></script> \r
  20 <!-- <script type="text/javascript" src="jquery-1.5.1.min.js"></script> -->\r
  21 <script type="text/javascript">\r
  22 //    var _gaq = _gaq || [];\r
  23 //    _gaq.push(['_setAccount', 'UA-15457703-9']);\r
  24 //    _gaq.push(['_trackPageview']);\r
  25 \r
  26 //    (function() {\r
  27 //      var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;\r
  28 //      ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';\r
  29 //      var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);\r
  30 //    })();\r
  31 \r
  32     var xmPlayer = null;  // Global application object.\r
  33     var reportResult;\r
  34     var status_open = 0;\r
  35     var status_loading = 1;\r
  36     var status_complete = 2;\r
  37     var total_bytes = 0;\r
  38     var handleMessage_ = null;\r
  39     var progress_id = null;\r
  40 \r
  41 \r
  42     function reportLog(log) {\r
  43       $("#GeneralOutput").append(log + "<br/>");\r
  44     }\r
  45 \r
  46     // ロード時処理\r
  47     $().ready(function () {\r
  48 \r
  49       // Naclサポートの切り分けはGoogleのサンプルページのコードをそのまま利用してます。\r
  50       var isValidBrowser = false;\r
  51       var browserSupportStatus = 0;\r
  52       var checker = new browser_version.BrowserChecker(10, navigator["appVersion"], navigator["plugins"]);\r
  53       checker.checkBrowser();\r
  54       isValidBrowser = checker.getIsValidBrowser();\r
  55       browserSupportStatus = checker.getBrowserSupportStatus();\r
  56       switch (browserSupportStatus) {\r
  57         case browser_version.BrowserChecker.StatusValues.NACL_ENABLED:\r
  58           $('#supportStatus').html('<div class="INFO">INFO: Native Clientが有効化されたGoogle Chrome version ' + checker.chromeVersion_ + ' をご使用のため、このアプリケーションの実行が可能です。</div>');\r
  59           break;\r
  60         case browser_version.BrowserChecker.StatusValues.NON_CHROME_BROWSER:\r
  61           $('#supportStatus').html('<div class="WARNING">WARNING: お使いのブラウザはNative Clientをサポートしていません。</div>');\r
  62           break;\r
  63         case browser_version.BrowserChecker.StatusValues.CHROME_VERSION_TOO_OLD:\r
  64           $('#supportStatus').html('<div class="WARNING">WARNING: Native Client はGoogle Chrome version ' + checker.chromeVersion_ +\r
  65           'で実行することはできません。Google Chrome version ' + checker.requiredChromeVersion_ + ' 以上のブラウザをご利用ください。</div>');\r
  66           break;\r
  67         case browser_version.BrowserChecker.StatusValues.NACL_NOT_ENABLED:\r
  68           $('#supportStatus').html('<div class="WARNING">WARNING: Native Client が有効化されていません。Native Clientを有効化するためには' +\r
  69           'アドレスバーで<kbd>about:flags</kbd>を入力し、"ネイティブクライアント"の"有効にする"をクリックしてください。' +\r
  70           '有効化したらブラウザを再起動してください。</div>');\r
  71           break;\r
  72         default:\r
  73           $('#supportStatus').html('<div class="WARNING">WARNING: Native Clientをサポートしているかどうかの検出ができませんでした。</div>');\r
  74       }\r
  75 \r
  76       //      $("#xmfile-url").val("SHADOW.XM");\r
  77       $("button").button().css("font-size", "7pt").css("border", "4px").css("padding", "2px");\r
  78       $("button").attr("disabled", "true");\r
  79       $("#tabs").tabs();\r
  80       $("#listener").ready( function() {\r
  81       reportLog("moduleDidLoad");\r
  82       xmPlayer = $("#xmPlayer")[0];\r
  83       xmPlayer.addEventListener('message', handleMessage, false);\r
  84 \r
  85       $("#load-file").attr("disabled", "").click(\r
  86         function () {\r
  87           try {\r
  88             reportLog("LoadFile");\r
  89             var logElt = document.getElementById('GeneralOutput');\r
  90 \r
  91             handleMessage_ = function (message) {\r
  92               reportLog("### File Loading..." & message.data);\r
  93             \r
  94               var status_info = message.data.split(":");\r
  95               var status = parseInt(status_info[1]);\r
  96               var success = parseInt(status_info[2]) != 0;\r
  97 \r
  98               var logElt = document.getElementById('GeneralOutput');\r
  99               logElt.innerHTML += 'File URL:' + $("#xmfile-url").val() + '<br/>';\r
 100               logElt.innerHTML += 'RESULT:\n' + status_info[3] + '<br/>';\r
 101 \r
 102               // ファイルオープンが成功したら\r
 103               if (status == status_open && success) {\r
 104                 // トータルバイト数を取得する\r
 105                 total_bytes = parseInt(status_info[3]);\r
 106                 logElt.innerHTML += "TotalBytes:" + total_bytes + '<br/>';\r
 107                 $("#status-dialog")\r
 108                   .html("<p>ファイルを読み込んでいます。</p><div id='progress'></div>")\r
 109                   .attr("title", "ファイルロード")\r
 110                   .dialog({ buttons: null});\r
 111 \r
 112                 $("#progress").progressbar({ value: 0 });\r
 113               }\r
 114 \r
 115               if (status == status_loading && success)\r
 116               {\r
 117                   $("GeneralOutput").append( parseInt(status_info[3])+ "<br/>");\r
 118                   $("#progress").progressbar("value", parseInt(status_info[3]) * 100 / total_bytes);\r
 119               }\r
 120 \r
 121               if (status == status_complete && success) {\r
 122                 if (progress_id != null)\r
 123                   clearInterval(progress_id);\r
 124                 $("#Play").click(function () {\r
 125                   //xmPlayer.playSound();\r
 126                   xmPlayer.postMessage("playSound");\r
 127                 }).attr("disabled", "");\r
 128 \r
 129                 $("#Stop").click(function () {\r
 130                   xmPlayer.postMessage("stopSound");\r
 131                   //xmPlayer.stopSound();\r
 132                 }).attr("disabled", "");\r
 133 \r
 134                 $("#status-dialog")\r
 135                 .html("ファイルの読み込みが完了しました。")\r
 136                 .dialog({ buttons: [\r
 137                   {\r
 138                     text: "Ok", click: function () { $(this).dialog("close"); }\r
 139                   }]\r
 140                 });\r
 141               } else if (!success) {\r
 142                 logElt.innerHTML += "Load Failure:" + status_info[3] + "<br/>";\r
 143                 $("#status-dialog").html("ファイルの読み込みが失敗しました。" + result)\r
 144                 .attr("title", "ファイルロード")\r
 145                 .dialog("options", "buttons", [\r
 146                   {\r
 147                     text: "Ok", click: function () { $(this).dialog("close"); }\r
 148                   }]\r
 149                 );\r
 150               }\r
 151             };\r
 152 \r
 153             xmPlayer.postMessage('loadXmFile:' + $("#xmfile-url").val());\r
 154 \r
 155           } catch (e) {\r
 156             var logElt = document.getElementById('GeneralOutput');\r
 157             logElt.innerHTML += "exception: " + e + "<br/>";\r
 158           }\r
 159         }\r
 160         );\r
 161       });\r
 162 \r
 163     });\r
 164 \r
 165     function handleMessage(message_event) \r
 166     {\r
 167       reportLog("handleMessage::" + message_event);\r
 168       if (message_event.data.match(/^GetURLHandler/)) {\r
 169         handleMessage_(message_event);\r
 170       } else {\r
 171         reportLog(message_event.data);\r
 172       }\r
 173     }\r
 174 \r
 175 \r
 176 </script>\r
 177   <style type="text/css">\r
 178     body {font-family:'メイリオ';font-size:10px;width:500px;}\r
 179     #GeneralOutput {font-size:6pt;border:1px solid gray;width:100%;height:100px;overflow:scroll;}\r
 180     #xmfile-url {width:400px;}\r
 181     #player-tab {height:300px;}\r
 182     .INFO { border:1px solid blue;}\r
 183     .WARNING {border:1px solid red;color:Red;}\r
 184     div {padding:2px;}\r
 185   </style>\r
 186 </head>\r
 187 \r
 188 <body id="bodyId">\r
 189   <div id="supportStatus"></div>\r
 190   <h1>XM Player</h1>\r
 191   <div id="tabs" >\r
 192   <ul>\r
 193   <li><a href="#player-tab">Player</a></li>\r
 194   <li><a href="#info-tab">XM File Info.</a></li>\r
 195   <li><a href="#pattern-tab">Pattern</a></li>\r
 196   <li><a href="#instrument-tab">Instrument</a></li>\r
 197   </ul>\r
 198   <div id="player-tab" >\r
 199   <div>再生したいファイルを選択してLoad Fileボタンをクリック、ファイルをロードしてください。その後Playを押して再生します。</div>\r
 200   <div>url:<select id="xmfile-url">\r
 201   <option value="SHOOTING.XM" selected>SHOOTING.XM</option>\r
 202   <option value="SHADOW.XM">SHADOW.XM</option>\r
 203   <option value="DEADLOCK.XM">DEADLOCK.XM</option>\r
 204   <option value="sweetdre.xm">sweetdre.xm</option>\r
 205   <option value="aws_aq16.xm">aws_aq16.xm</option>\r
 206   </select></div>\r
 207  <!-- <input id="xmfile-url" type="text" maxlength="2048" /></div> -->\r
 208   <div>\r
 209   <button id="load-file">Load File</button>\r
 210   <button id="Play">Play</button>\r
 211   <button id="Stop">Stop</button>\r
 212   </div>\r
 213   </div>\r
 214   <div id="info-tab"></div>\r
 215   <div id="pattern-tab"></div>\r
 216   <div id="instrument-tab"></div>\r
 217   </div>\r
 218   <!-- Load the published .nexe.  This includes the 'nacl' attribute which\r
 219   shows how to load multi-architecture modules.  Each entry in the "nexes"\r
 220   object in the  .nmf manifest file is a key-value pair: the key is the runtime\r
 221   ('x86-32', 'x86-64', etc.); the value is a URL for the desired NaCl module.\r
 222   To load the debug versions of your .nexes, set the 'nacl' attribute to the\r
 223   _dbg.nmf version of the manifest file.\r
 224   -->\r
 225  <div>\r
 226   <div>ログ出力</div>\r
 227   <div id="GeneralOutput"></div>\r
 228  </div>\r
 229   <div id="listener">\r
 230   <embed name="nacl_module"\r
 231          id="xmPlayer"\r
 232          width=0 height=0\r
 233          src="xm_player.nmf"\r
 234          type="application/x-nacl"\r
 235  />\r
 236  </div>\r
 237   <div id="status-dialog" title=""></div>\r </body>\r
 238 </html>\r