add addmusic page in audioplayer

src/audioplayer/audioplayer.html

@@ -20,6 +20,7 @@
       <a class = "next">next</a>
       <a class = "play">play</a>
       <a class = "stop">stop</a>
+      <a class = "addMusic">addMusic</a>
       <!-- data-gadget-sandbox="iframe" -->
       <div class = "control" data-gadget-url="../audioplayer_control/index.html" data-gadget-scope="control">
       </div>
@@ -36,6 +37,10 @@
     
       <div class = "title" data-gadget-url="../audioplayer_title/index.html" data-gadget-scope="title" >
       </div>
+
+
+      <div class = "io" data-gadget-url="../audioplayer_io/index.html" data-gadget-scope="io" >
+      </div>
     </div>
     
   </body>

src/audioplayer/audioplayer.js

@@ -8,27 +8,28 @@
     time,
     volume,
     title,
+    io,
     totalId = -1,
     that,
     next_context,
     play_context,
     stop_context,
-    currentId,
-    initializeFlag = false;
+    addMusic_context,
+    currentId = -1,
+    initializeFlag = false,
+    playlist = [];
   function nextId() {
-    var tmp;
     if (totalId === -1) {
       return -1;
     }
-    do {
-      tmp =  Math.floor(Math.random() * totalId);
-    } while (currentId === tmp);
-    currentId = tmp;
-    return tmp;
+    currentId += 1;
+    currentId %= totalId;
+    return currentId;
   }
   rJS(window)
     .declareAcquiredMethod("pleaseRedirectMyHash", "pleaseRedirectMyHash")
     .declareAcquiredMethod("showPage", "showPage")
+    .declareAcquiredMethod("addPage", "addPage")
     .declareAcquiredMethod("ErrorPage", "ErrorPage")
     .allowPublicAcquisition("setCurrentTime", function (value) {
       control.setCurrentTime(value[0]);
@@ -47,16 +48,20 @@
       });
     })
     .allowPublicAcquisition("nextToPlay", function () {
-      return nextId();
-    })
-    .allowPublicAcquisition("nextTitle", function (tab) { //unused
-      this.aq_pleasePublishMyState({page: tab[0]})
-        .then(function (url) {
-          that.pleaseRedirectMyHash(url);
+      var id = nextId(),
+        name = playlist[id];
+
+      io.getIO(name).then(function (file) {
+        control.setSong(URL.createObjectURL(file)).then(function () {
+          control.playSong();
+          title.setMessage(name);
+          animation.showAnimation();
+        });
       });
     })
-    .allowPublicAcquisition("sendTotalId", function (value) {
-      totalId = value[0];  //array parameter
+    .allowPublicAcquisition("sendPlaylist", function (value) {
+      playlist = value[0];
+      totalId =  playlist.length;  //array parameter
       if (initializeFlag === false) {
         that.render();
         initializeFlag = true;
@@ -65,21 +70,11 @@
     .allowPublicAcquisition("sendTotalTime", function (value) {
       time.setMax(value[0]);
     })
-    .allowPublicAcquisition("allNotify", function () {
-      control.getTitle().then(function (value) {
-        title.setMessage(value);
-      });
-    })
-    .allowPublicAcquisition("showAnimation", function () {
-      animation.showAnimation();
-    })
-    .allowPublicAcquisition("stopAnimation", function () {
-      animation.stopAnimation();
-    })
     .ready(function (g) {
       next_context = g.__element.getElementsByTagName('a')[0];
       play_context = g.__element.getElementsByTagName('a')[1];
       stop_context = g.__element.getElementsByTagName('a')[2];
+      addMusic_context = g.__element.getElementsByTagName('a')[3];
       that = g;
       initializeFlag = false;
       RSVP.all([
@@ -97,6 +92,9 @@
         ),
         g.getDeclaredGadget(
           "title"
+        ),
+        g.getDeclaredGadget(
+          "io"
         )
       ])
         .then(function (all_param) {
@@ -105,6 +103,7 @@
           time = all_param[2];
           volume = all_param[3];
           title = all_param[4];
+          io = all_param[5];
           window.setInterval(function () {
             control.getCurrentTime()
               .then(function (e) {
@@ -118,6 +117,10 @@
           that.showPage("stop").then(function (result) {
             stop_context.href = result;
           });
+
+          that.showPage("addMusic").then(function (result) {
+            addMusic_context.href = result;
+          });
           //volume configure
           control.getVolume().then(function (value) {
             volume.setValue(value);
@@ -137,39 +140,50 @@
 
   rJS(window)
     .declareMethod("render", function (options) {
+      var id = nextId(),
+        name = playlist[id];
       if (initializeFlag === false) {
         return;
       }
-      control.getTitle(nextId()).then(function (title) {
-        that.showPage(title)
+
+      that.showPage(name)
         .then(function (result) {
           next_context.href = result;
         });
-      });
+
       if (options.page !== undefined) {
         if (options.page === "play") {
           control.playSong();
+          animation.showAnimation();
           return;
         }
         if (options.page === "stop") {
           control.stopSong();
+          animation.stopAnimation();
           return;
         }
-        control.setSong(options.page).then(function (result) {
-          if (result === -1) {
+        if (options.page === "addMusic") {
+          animation.stopAnimation();
+          control.stopSong()
+            .then(that.addPage());
+          return;
+        }
+
+        if (playlist.indexOf(options.page) === -1) {
+          animation.stopAnimation();
           control.stopSong()
-              .then(that.dropGadget("title"))
-              .then(that.dropGadget("control"))
-              .then(that.dropGadget("animation"))
-              .then(that.dropGadget("time"))
-              .then(that.dropGadget("volume"))
             .then(that.ErrorPage())
-              .fail(function () {
-                console.log("error drop gadget");
+            .fail(function (e) {
+              console.log("error drop gadget " + e);
             });
           return;
         }
+        io.getIO(options.page).then(function (file) {
+          control.setSong(URL.createObjectURL(file)).then(function () {
             control.playSong();
+            title.setMessage(options.page);
+            animation.showAnimation();
+          });
         });
       }
     });

src/audioplayer/interface.js

@@ -3,41 +3,47 @@
 (function (window, rJS, $) {
   "use strict";
   var gadget,
-    top;
+    top,
+    innerHTML;
   rJS(window)
     .allowPublicAcquisition("ErrorPage", function () {
       top.__element.innerHTML = "ERROR:music does't exist";
-      top.error = true;
+      top.dropGadget("audioplayer");
+      top.newPage = true;
+    })
+    .allowPublicAcquisition("addPage", function () {
+      innerHTML = top.__element.innerHTML;
+      top.__element.innerHTML = " ";
+      top.declareGadget("../audioplayer_io/index.html",
+                        { element: top.__element,
+                          scope : "io"
+                        }
+                       );
+      top.newPage = true;
+      top.addPage = true;
     })
     .allowPublicAcquisition("showPage", function (param_list) {
       return this.aq_pleasePublishMyState({page: param_list[0]});
     })
     .ready(function (g) {
       top = g;
-      top.error = false;
+      top.newPage = false;
+      top.addPage = false;
       top.declareGadget("./audioplayer.html",
-                        { element: top.__element,
-                          scope : "audioplayer"
-                        }
+                        {element: top.__element}
                        )
         .then(function (result) {
           gadget = result;
         });
     })
     .declareMethod("render", function (options) {
-      if (top.error === true) {
-        top.__element.innerHTML = " ";
-        top.dropGadget("audioplayer").then(function () {
-          top.declareGadget("./audioplayer.html",
-                            { element: top.__element,
-                              scope : "audioplayer"}
-                           )
-            .then(function (result) {
-              gadget = result;
-              result.render(options);
-            });
-        });
-        top.error = false;
+      if (top.newPage === true) {
+        if (top.addPage === true) {
+          top.addPage = false;
+          top.dropGadget("io");
+        }
+        top.__element.innerHTML = innerHTML;
+        top.newPage = false;
       } else {
         if (gadget !== undefined) {
           gadget.render(options);

src/audioplayer_animation/animation.js

@@ -26,10 +26,11 @@
       gradient.addColorStop(1, '#0f0');
       gradient.addColorStop(0.5, '#ff0');
       gradient.addColorStop(0, '#f00');
+      that.play = true;
+      drawFrame = function () {
         window.cancelAnimationFrame(
           that.animationPlayId
         ); //stop the previous animation
-      drawFrame = function () {
         that.getFFTValue()
           .then(function (e) {
             array = e.array;
@@ -46,21 +47,22 @@
             //draw the mirror
             mirrorCtx.clearRect(0, 0, cwidth, cheight);
             mirrorCtx.drawImage(canvas, 0, -100, cwidth, cheight);
+            if (that.play === true) {
               that.animationPlayId = window.requestAnimationFrame(drawFrame);
+            }
           });
       };
       that.animationPlayId = window.requestAnimationFrame(drawFrame);
     })
     .declareMethod('stopAnimation', function () {
-      var that = this;
+      this.play = false;
       window.cancelAnimationFrame(
-        that.animationPlayId
-      );
+        this.animationPlayId
+      ); //stop the previous animation
     });
 
   gk.ready(function (g) {
     g.canvas = g.__element.getElementsByTagName('canvas')[0];
     g.mirror = g.__element.getElementsByTagName('canvas')[1];
-    g.animationPlayId = -1;
   });
 }(window, rJS));

src/audioplayer_control/control.js

@@ -5,40 +5,23 @@
 (function (window, rJS) {
   "use strict";
   var gk = rJS(window);
-  gk.declareMethod('setSong', function (id) {  //configure a song
+  gk.declareMethod('setSong', function (url) {  //configure a song
     var gadget = this;
-    if (typeof id === "string") {
-      id = gadget.playlist.indexOf(id);
-    }
-    if ((id >= gadget.lenght) || (id < 0)) {
-      console.log("invalide play id");
-      return -1;
-    }
-    if (gadget.currentPlayId !== id) {
-      gadget.decoded = true;
-    }
-    gadget.currentPlayId = id;
     gadget.source.connect(gadget.analyser);
     gadget.analyser.connect(gadget.gain);
     gadget.gain.gain.value = gadget.volume;
     gadget.gain.connect(gadget.audioCtx.destination);
-    return gadget.io.getIO(gadget.playlist[id]).then(function (file) {
-      gadget.audio.src =  URL.createObjectURL(file);
+    gadget.audio.src = url;
     gadget.audio.onloadedmetadata = function () {
       gadget.sendTotalTime(gadget.audio.duration);
     };
-      gadget.file = file;
     gadget.audio.load();
-      gadget.allNotify();
-    });
   })
     .declareMethod('stopSong', function () {
       this.audio.pause();
-      this.stopAnimation();
     })
     .declareMethod('playSong', function () {
       this.audio.play();
-      this.showAnimation();
     })
     .declareMethod('setVolume', function (volume) {
       this.volume = volume;
@@ -76,111 +59,25 @@
       tmp.length = array.length;
       return tmp;
     })
-    .declareMethod('getDecodeValue', function () {  //unused
-      var gadget = this,
-        promiseReadFile;
-      if (gadget.decoded === false) {  //if decoded,return buffer saved 
-        return gadget.buffer;
-      }
-      gadget.decoded = false;
-
-      promiseReadFile = new Promise(function (resolve, reject) {
-        var reader = new FileReader();
-        reader.onloadend = function (event) {
-          if (reader.error) {
-            reject(reader.error);
-          } else {
-            resolve(event.target.result);
-          }
-        };
-        reader.readAsArrayBuffer(gadget.file);
-      });
-
-
-      return promiseReadFile.then(function (response) {
-        return new Promise(function (resolve, reject) {
-          gadget.audioCtx.decodeAudioData(response, function (buffer) {
-            gadget.buffer = buffer;
-            resolve(buffer);
-          }, function () {
-            reject("decode error");
-          });
-        });
-      }).then(function (response) {
-        return response;
-      }).catch(function (error) {
-        return error;
-      });
-    })
-    .declareAcquiredMethod("sendTotalId", "sendTotalId")
     .declareAcquiredMethod("nextToPlay", "nextToPlay")
-    .declareAcquiredMethod("nextTitle", "nextTitle")
-    .declareAcquiredMethod("allNotify", "allNotify")
-    .declareAcquiredMethod("sendTotalTime", "sendTotalTime")
-    .declareAcquiredMethod("showAnimation", "showAnimation")
-    .declareAcquiredMethod("stopAnimation", "stopAnimation");
+    .declareAcquiredMethod("sendTotalTime", "sendTotalTime");
   gk.ready(function (g) {
-    var input_context = g.__element.getElementsByTagName('input')[0];
     g.volume = 1;
-    g.playlist = [];
-    g.currentPlayId = 0;
     window.AudioContext = window.AudioContext || window.webkitAudioContext
       || window.mozAudiocontext || window.msAudioContext;
     try {
       g.audioCtx = new window.AudioContext();
     } catch (e) {
       console.log(
-        "ERROR:[configure] Your browser does not support AudioContext"
+        "ERROR:[control] " + e
       );
     }
-    g.getDeclaredGadget("io").then(function (e) {
-      g.io = e;
-      g.io.createIO({ "type" : "indexeddb",
-                      "database": "test"},
-                    "m")
-        .then(function () {
-          g.io.showAllIO().then(function (result) {
-            var array = Object.keys(result),
-              i;
-            for (i = 0; i < array.length; i += 1) {
-              g.playlist.push(array[i]);
-            }
-            g.sendTotalId(g.playlist.length);
-          });
-        });
-    });
     g.audio = new window.Audio();
     g.source = g.audioCtx.createMediaElementSource(g.audio);
     g.analyser = g.audioCtx.createAnalyser();
     g.gain = g.audioCtx.createGain();
-    g.decoded = true;
     g.audio.onended = function () {
-      g.nextToPlay().then(function (id) {
-        g.setSong(id).then(function () {
-          g.playSong();
-          g.allNotify();
-        });
-      });
-    };
-    input_context.onchange = function () {
-      var tmp,
-        index,
-        found;
-      for (index = 0; index < input_context.files.length; index += 1) {
-        found = false;
-        for (tmp = 0; tmp < g.playlist.length; tmp += 1) {
-          if (g.playlist[tmp].name === input_context.files[index].name) {
-            found = true;
-            break;
-          }
-        }
-        if (found === false) {
-          g.io.setIO(input_context.files[index].name,
-                     input_context.files[index]);
-          g.playlist.push(input_context.files[index].name);
-        }
-      }
-      g.sendTotalId(g.playlist.length);
+      g.nextToPlay();
     };
   });
 }(window, rJS));

src/audioplayer_control/index.html

@@ -13,12 +13,7 @@
     
     <!-- custom script -->
     <script src="./control.js" type="text/javascript"></script>
-  
-    <div class ="io" data-gadget-url="../audioplayer_io/index.html" data-gadget-scope="io">
-    </div>    
-  
   </head>
   <body>
-    <input type = "file" multiple /> 
   </body>
 </html>

src/audioplayer_io/index.html

@@ -20,6 +20,6 @@
   
 
   <body>
-    
+    <input type = "file" multiple /> 
   </body>
 </html>

src/audioplayer_io/io.js

@@ -52,5 +52,44 @@
       }).fail(function (error) {
         return "ERROR : " + error;
       });
+    })
+    .declareAcquiredMethod("sendPlaylist", "sendPlaylist");
+  gk.ready(function (g) {
+    var input_context = g.__element.getElementsByTagName('input')[0];
+    g.playlist = [];
+    g.createIO({ "type" : "indexeddb",
+                 "database": "test"},
+               "m")
+      .then(function () {
+        g.showAllIO().then(function (result) {
+          var array = Object.keys(result),
+            i;
+          for (i = 0; i < array.length; i += 1) {
+            g.playlist.push(array[i]);
+          }
+          g.sendPlaylist(g.playlist);
+        });
+      });
+
+    input_context.onchange = function () {
+      var tmp,
+        index,
+        found;
+      for (index = 0; index < input_context.files.length; index += 1) {
+        found = false;
+        for (tmp = 0; tmp < g.playlist.length; tmp += 1) {
+          if (g.playlist[tmp].name === input_context.files[index].name) {
+            found = true;
+            break;
+          }
+        }
+        if (found === false) {
+          g.setIO(input_context.files[index].name,
+                     input_context.files[index]);
+          g.playlist.push(input_context.files[index].name);
+        }
+      }
+      g.sendPlaylist(g.playlist);
+    };
   });
 }(window, jIO, rJS));

src/audioplayer_title/title.js

@@ -10,7 +10,7 @@
     this.out = " ";
     this.Position = 0;
     this.pos = 0;
-    this.delay = 100;
+    this.delay = 200;
     this.i = 0;
     this.size = 0;
     this.reset = function () {

src/audioplayer_volume/volume.js

@@ -5,7 +5,6 @@
 (function (window, rJS, $) {
   "use strict";
   var gk = rJS(window);
-
   gk.declareMethod('setValue', function (value) {
     this.bar.value = value;
   })