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