更新功能键：0.0.4

README.md

@@ -25,6 +25,7 @@
 - [x] Web Audio API
 - [x] Setup Package
 - [x] Close Window
+- [x] Function Key
 - [ ] Background image
 - [ ] Auto Render
 - [ ] Export Video

index.html

@@ -18,9 +18,9 @@
 
     <audio id="music" class="hidden" controls></audio>
 
-    <input id="input-file" type="file" class="hidden" accept="audio/mp3" multiple>
+    <input id="input-file" type="file" class="hidden" accept="audio" multiple>
 
-    <h1 id="title">Please drag your music files here</h1>
+    <h1 id="title">Please drag or open your music files here</h1>
 
     <div id="file-list-wrapper">
         <div class="header">Play List</div>
@@ -41,21 +41,44 @@ <h1 id="title">Please drag your music files here</h1>
     <div id="help-wrapper">
         <div id="help-btn">Help</div>
     </div>
-
-    <div id="play-mode"></div>
-    <div id="fullscreen"></div>
+    <div id="buttonForWindow">
+        <div id="play-mode"></div>
+        <div id="fullscreen"></div>
+    </div>
     <div id="song-name"></div>
 
     <script src="lib/jquery.min.js"></script>
     <script src="lib/require.min.js" data-main="js/main"></script>
 
     <script>
+
+        document.onkeydown = function (event) {
+            let e = event || window.event || arguments.callee.caller.arguments[0];
+            if (e && e.keyCode == 112) { // 按 F1
+                let eventon = document.getElementById("buttonForWindow");
+                eventon.style.display = "none"
+            }
+            if (e && e.keyCode == 113) { // 按 F2
+                let eventon = document.getElementById("buttonForWindow");
+                eventon.style.display = "block"
+            }
+            if (e && e.keyCode == 114) { // 按F3
+                let eventon = document.getElementById("song-name");
+                eventon.style.display = "none"
+            }
+            if (e && e.keyCode == 115) { // 按F4
+                let eventon = document.getElementById("song-name");
+                eventon.style.display = "block"
+            }
+        };
+
         function closeWindow() {
             window.opener = null;
             window.close();
         }
     </script>
 
+
 </body>
 
 </html>

js/main.js

@@ -1,5 +1,5 @@
 // 主程序
-require(['util', 'effect'], function(util, effect) {
+require(['util', 'effect'], function (util, effect) {
 
     var $body = $('body'),
         $fileList = $('#file-list'),
@@ -179,7 +179,7 @@ require(['util', 'effect'], function(util, effect) {
             currentFile = num;
 
             loadFile(fileList[currentFile]);
-            $fileList.find('li').each(function() {
+            $fileList.find('li').each(function () {
                 if (+$(this).attr('num') == num) {
                     $(this).addClass('playing');
                     var songName = $(this).text();
@@ -198,45 +198,45 @@ require(['util', 'effect'], function(util, effect) {
         audio.pause();
     }
 
-    $body.on('click', '#help-btn', function() {
+    $body.on('click', '#help-btn', function () {
         // 帮助渐隐渐入
         $('#help').fadeIn('fast');
         var $img = $('#help img').first(),
             src = $img.attr('data-src');
         $img.attr('src', src);
-    }).on('click', '#help', function() {
+    }).on('click', '#help', function () {
         $(this).fadeOut('fast');
-    }).on('click', '#title', function() {
+    }).on('click', '#title', function () {
         // 打开文件
         $inputFile.click();
-        title.style.display="none";
-    }).on('click', '#play-mode', function() {
+        title.style.display = "none";
+    }).on('click', '#play-mode', function () {
         // 改变播放模式
         changePlayMode();
-    }).on('click', '#fullscreen', function() {
+    }).on('click', '#fullscreen', function () {
         // 全屏切换
         util.fullscreenSwitch();
-    }).on('click', '#add-file', function() {
+    }).on('click', '#add-file', function () {
         // 打开文件
         $inputFile.click();
     });
 
     // 文件拖曳
-    doc.addEventListener('drop', function(e) {
+    doc.addEventListener('drop', function (e) {
         onDocumentDrop(e);
     }, false);
     doc.addEventListener("dragenter", dragAndDropCommon, false);
     doc.addEventListener("dragexit", dragAndDropCommon, false);
     doc.addEventListener("dragover", dragAndDropCommon, false);
 
-    audio.addEventListener('ended', function() {
+    audio.addEventListener('ended', function () {
         onMusicEnded();
     }, false);
 
-    $body.on('click', '#file-list li', function() {
+    $body.on('click', '#file-list li', function () {
         var songNum = $(this).attr('num');
         playSpecify(+songNum);
-    }).on('contextmenu', function(e) {
+    }).on('contextmenu', function (e) {
         e.preventDefault();
         if ($fileListWrapper.css('left') != '0px') {
             $fileListWrapper.css({ 'left': '0' });
@@ -247,7 +247,7 @@ require(['util', 'effect'], function(util, effect) {
         }
     });
 
-    doc.addEventListener('keydown', function(e) {
+    doc.addEventListener('keydown', function (e) {
         switch (e.keyCode) {
             case 32: // 空格
                 playToggle();
@@ -267,11 +267,11 @@ require(['util', 'effect'], function(util, effect) {
         }
     }, false);
 
-    $(window).on('beforeunload', function() {
+    $(window).on('beforeunload', function () {
         saveSetting();
     });
 
-    $inputFile.on('change', function(e) {
+    $inputFile.on('change', function (e) {
         appendFiles(inputFile.files);
     });
 

main.js

@@ -17,7 +17,7 @@ function createWindow() {
   // and load the index.html of the app.
   mainWindow.loadFile('index.html')
   // Open the DevTools.
-  // mainWindow.webContents.openDevTools()
+  mainWindow.webContents.openDevTools()
 
   // Emitted when the window is closed.
   mainWindow.on('closed', function () {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "promotion-video-producer",
-  "version": "0.0.3",
+  "version": "0.0.4",
   "description": "Promotion Video Producer(a.k.a PVMaker & PV制作器) Is a software that generates music MV for Vocaloid like art work",
   "main": "main.js",
   "dependencies": {