Commit b354cac2 authored by Xiaowu Zhang's avatar Xiaowu Zhang

add addmusic page in audioplayer

parent e7be7c4a
......@@ -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>
......
......@@ -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)
.then(function (result) {
next_context.href = result;
});
});
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) {
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");
});
return;
}
control.playSong();
if (options.page === "addMusic") {
animation.stopAnimation();
control.stopSong()
.then(that.addPage());
return;
}
if (playlist.indexOf(options.page) === -1) {
animation.stopAnimation();
control.stopSong()
.then(that.ErrorPage())
.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();
});
});
}
});
......
......@@ -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);
......
......@@ -26,10 +26,11 @@
gradient.addColorStop(1, '#0f0');
gradient.addColorStop(0.5, '#ff0');
gradient.addColorStop(0, '#f00');
window.cancelAnimationFrame(
that.animationPlayId
); //stop the previous animation
that.play = true;
drawFrame = function () {
window.cancelAnimationFrame(
that.animationPlayId
); //stop the previous animation
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);
that.animationPlayId = window.requestAnimationFrame(drawFrame);
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));
......@@ -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.onloadedmetadata = function () {
gadget.sendTotalTime(gadget.audio.duration);
};
gadget.file = file;
gadget.audio.load();
gadget.allNotify();
});
gadget.audio.src = url;
gadget.audio.onloadedmetadata = function () {
gadget.sendTotalTime(gadget.audio.duration);
};
gadget.audio.load();
})
.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));
......@@ -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>
......@@ -20,6 +20,6 @@
<body>
<input type = "file" multiple />
</body>
</html>
......@@ -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));
......@@ -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 () {
......
......@@ -5,7 +5,6 @@
(function (window, rJS, $) {
"use strict";
var gk = rJS(window);
gk.declareMethod('setValue', function (value) {
this.bar.value = value;
})
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment