Commit be871646 authored by Xiaowu Zhang's avatar Xiaowu Zhang

add error page to audioplayer

parent fe8c67f8
<!DOCTYPE html>
<html lang="en">
<head>
<title>audioPlayer</title>
<!-- renderjs -->
<script src="../<%= copy.rsvp.relative_dest %>" type="text/javascript"></script>
<script src="../<%= copy.renderjs.relative_dest %>" type="text/javascript"></script>
<script src="../<%= curl.jquery.relative_dest %>" type="text/javascript"></script>
<!-- custom script -->
<script src="./audioplayer.js" type="text/javascript"></script>
<link rel="stylesheet" href="../../src/audioplayer/audioplayer.css" media="screen" ></link>
</head>
<body>
<div class = "audioplayer">
<a class = "next">next</a>
<a class = "command">play/pause</a>
<!-- data-gadget-sandbox="iframe" -->
<div class = "control" data-gadget-url="../audioplayer_control/index.html" data-gadget-scope="control">
</div>
<div class = "animation" data-gadget-url="../audioplayer_animation/index.html" data-gadget-scope="animation">
</div>
<div class = "progress_time" data-gadget-url="../audioplayer_progress/index.html" data-gadget-scope="time">
</div>
<div class = "progress_volume" data-gadget-url="../audioplayer_volume/index.html" data-gadget-scope="volume">
</div>
<div class = "title" data-gadget-url="../audioplayer_title/index.html" data-gadget-scope="title" >
</div>
</div>
</body>
</html>
...@@ -8,13 +8,17 @@ ...@@ -8,13 +8,17 @@
time, time,
volume, volume,
title, title,
totalId = 0, totalId = -1,
that, that,
next_context, next_context,
command_context, command_context,
currentId; currentId,
initializeFlag = false;
function nextId() { function nextId() {
var tmp; var tmp;
if (totalId === -1) {
return -1;
}
do { do {
tmp = Math.floor(Math.random() * totalId); tmp = Math.floor(Math.random() * totalId);
} while (currentId === tmp); } while (currentId === tmp);
...@@ -23,11 +27,13 @@ ...@@ -23,11 +27,13 @@
} }
rJS(window) rJS(window)
.declareAcquiredMethod("pleaseRedirectMyHash", "pleaseRedirectMyHash") .declareAcquiredMethod("pleaseRedirectMyHash", "pleaseRedirectMyHash")
.declareAcquiredMethod("showPage", "showPage")
.declareAcquiredMethod("ErrorPage", "ErrorPage")
.allowPublicAcquisition("setCurrentTime", function (value) { .allowPublicAcquisition("setCurrentTime", function (value) {
control.setCurrentTime(value); control.setCurrentTime(value[0]);
}) })
.allowPublicAcquisition("setVolume", function (value) { .allowPublicAcquisition("setVolume", function (value) {
control.setVolume(value); control.setVolume(value[0]);
}) })
.allowPublicAcquisition("getVolume", function () { .allowPublicAcquisition("getVolume", function () {
return control.getVolume().then(function (value) { return control.getVolume().then(function (value) {
...@@ -42,7 +48,7 @@ ...@@ -42,7 +48,7 @@
.allowPublicAcquisition("nextToPlay", function () { .allowPublicAcquisition("nextToPlay", function () {
return nextId(); return nextId();
}) })
.allowPublicAcquisition("nextTitle", function (tab) { .allowPublicAcquisition("nextTitle", function (tab) { //unused
this.aq_pleasePublishMyState({page: tab[0]}) this.aq_pleasePublishMyState({page: tab[0]})
.then(function (url) { .then(function (url) {
that.pleaseRedirectMyHash(url); that.pleaseRedirectMyHash(url);
...@@ -50,15 +56,18 @@ ...@@ -50,15 +56,18 @@
}) })
.allowPublicAcquisition("sendTotalId", function (value) { .allowPublicAcquisition("sendTotalId", function (value) {
totalId = value[0]; //array parameter totalId = value[0]; //array parameter
if (initializeFlag === false) {
that.render();
initializeFlag = true;
}
})
.allowPublicAcquisition("sendTotalTime", function (value) {
time.setMax(value[0]);
}) })
.allowPublicAcquisition("allNotify", function () { .allowPublicAcquisition("allNotify", function () {
control.getTotalTime().then(function (value) {
time.setMax(value);
});
control.getTitle().then(function (value) { control.getTitle().then(function (value) {
title.setMessage(value); title.setMessage(value);
}); });
animation.showAnimation();
}) })
.allowPublicAcquisition("showAnimation", function () { .allowPublicAcquisition("showAnimation", function () {
animation.showAnimation(); animation.showAnimation();
...@@ -70,6 +79,7 @@ ...@@ -70,6 +79,7 @@
next_context = g.__element.getElementsByTagName('a')[0]; next_context = g.__element.getElementsByTagName('a')[0];
command_context = g.__element.getElementsByTagName('a')[1]; command_context = g.__element.getElementsByTagName('a')[1];
that = g; that = g;
initializeFlag = false;
RSVP.all([ RSVP.all([
g.getDeclaredGadget( g.getDeclaredGadget(
"control" "control"
...@@ -128,20 +138,32 @@ ...@@ -128,20 +138,32 @@
rJS(window) rJS(window)
.declareMethod("render", function (options) { .declareMethod("render", function (options) {
if (options.page !== undefined) { if (initializeFlag === false) {
control.setSong(options.page).then(function () { return;
control.playSong();
control.getTitle();
});
} }
control.getTitle(nextId()).then(function (title) { control.getTitle(nextId()).then(function (title) {
if (title === undefined) { that.showPage(title)
title = "start";
}
that.aq_pleasePublishMyState({page: title})
.then(function (result) { .then(function (result) {
next_context.href = result; next_context.href = result;
}); });
}); });
if (options.page !== undefined) {
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();
});
}
}); });
}(window, rJS, jQuery)); }(window, rJS, jQuery));
...@@ -10,32 +10,8 @@ ...@@ -10,32 +10,8 @@
<script src="../<%= curl.jquery.relative_dest %>" type="text/javascript"></script> <script src="../<%= curl.jquery.relative_dest %>" type="text/javascript"></script>
<!-- custom script --> <!-- custom script -->
<script src="./audioplayer.js" type="text/javascript"></script> <script src="./interface.js" type="text/javascript"></script>
<link rel="stylesheet" href="../../src/audioplayer/audioplayer.css" media="screen" ></link>
</head> </head>
<body> <body>
<div class = "audioplayer">
<a class = "next">next</a>
<a class = "command">play/pause</a>
<!-- data-gadget-sandbox="iframe" -->
<div class = "control" data-gadget-url="../audioplayer_control/index.html" data-gadget-scope="control">
</div>
<div class = "animation" data-gadget-url="../audioplayer_animation/index.html" data-gadget-scope="animation">
</div>
<div class = "progress_time" data-gadget-url="../audioplayer_progress/index.html" data-gadget-scope="time">
</div>
<div class = "progress_volume" data-gadget-url="../audioplayer_volume/index.html" data-gadget-scope="volume">
</div>
<div class = "title" data-gadget-url="../audioplayer_title/index.html" data-gadget-scope="title" >
</div>
</div>
</body> </body>
</html> </html>
/*global console, jQuery, rJS, RSVP, alert */
/*jslint nomen: true*/
(function (window, rJS, $) {
"use strict";
var gadget,
top;
rJS(window)
.allowPublicAcquisition("ErrorPage", function () {
top.__element.innerHTML = "ERROR";
top.error = true;
})
.allowPublicAcquisition("showPage", function (param_list) {
return this.aq_pleasePublishMyState({page: param_list[0]});
})
.ready(function (g) {
top = g;
top.error = false;
top.declareGadget("./audioplayer.html",
{ element: top.__element,
scope : "audioplayer"
}
)
.then(function (result) {
gadget = result;
});
})
.declareMethod("render", function (options) {
if (top.error === true) {
top.__element.innerHTML = " ";
top.dropGadget("audioplayer").then(function (e) {
console.log(e);
top.declareGadget("./audioplayer.html",
{ element: top.__element,
scope : "audioplayer"}
)
.then(function (result) {
gadget = result;
result.render(options);
});
});
top.error = false;
} else {
if (gadget !== undefined) {
gadget.render(options);
}
}
});
}(window, rJS, jQuery));
...@@ -16,7 +16,7 @@ ...@@ -16,7 +16,7 @@
cheight = canvas.height - 2, cheight = canvas.height - 2,
meterWidth = 10, //width of the meters in the spectrum meterWidth = 10, //width of the meters in the spectrum
capHeight = 2, capHeight = 2,
meterNum = 3800 / (10 + 2), meterNum = 50,
array, array,
drawFrame, drawFrame,
step, step,
......
...@@ -8,15 +8,11 @@ ...@@ -8,15 +8,11 @@
gk.declareMethod('setSong', function (id) { //configure a song gk.declareMethod('setSong', function (id) { //configure a song
var gadget = this; var gadget = this;
if (typeof id === "string") { if (typeof id === "string") {
if (id === "start") {
id = 0;
} else {
id = gadget.playlist.indexOf(id); id = gadget.playlist.indexOf(id);
} }
}
if ((id >= gadget.lenght) || (id < 0)) { if ((id >= gadget.lenght) || (id < 0)) {
console.log("invalide play id"); console.log("invalide play id");
return; return -1;
} }
if (gadget.currentPlayId !== id) { if (gadget.currentPlayId !== id) {
gadget.decoded = true; gadget.decoded = true;
...@@ -28,6 +24,9 @@ ...@@ -28,6 +24,9 @@
gadget.gain.connect(gadget.audioCtx.destination); gadget.gain.connect(gadget.audioCtx.destination);
return gadget.io.getIO(gadget.playlist[id]).then(function (file) { return gadget.io.getIO(gadget.playlist[id]).then(function (file) {
gadget.audio.src = URL.createObjectURL(file); gadget.audio.src = URL.createObjectURL(file);
gadget.audio.onloadedmetadata = function () {
gadget.sendTotalTime(gadget.audio.duration);
};
gadget.file = file; gadget.file = file;
gadget.audio.load(); gadget.audio.load();
gadget.allNotify(); gadget.allNotify();
...@@ -65,10 +64,8 @@ ...@@ -65,10 +64,8 @@
this.audio.play(); this.audio.play();
}) })
.declareMethod('getTotalTime', function () { .declareMethod('getTotalTime', function () {
return this.getDecodeValue(). console.log(this.audio.duration);
then(function (e) { return this.audio.duration;
return e.duration;
});
}) })
.declareMethod('getFFTValue', function () { .declareMethod('getFFTValue', function () {
var gadget = this, var gadget = this,
...@@ -79,7 +76,7 @@ ...@@ -79,7 +76,7 @@
tmp.length = array.length; tmp.length = array.length;
return tmp; return tmp;
}) })
.declareMethod('getDecodeValue', function () { .declareMethod('getDecodeValue', function () { //unused
var gadget = this, var gadget = this,
promiseReadFile; promiseReadFile;
if (gadget.decoded === false) { //if decoded,return buffer saved if (gadget.decoded === false) { //if decoded,return buffer saved
...@@ -119,6 +116,7 @@ ...@@ -119,6 +116,7 @@
.declareAcquiredMethod("nextToPlay", "nextToPlay") .declareAcquiredMethod("nextToPlay", "nextToPlay")
.declareAcquiredMethod("nextTitle", "nextTitle") .declareAcquiredMethod("nextTitle", "nextTitle")
.declareAcquiredMethod("allNotify", "allNotify") .declareAcquiredMethod("allNotify", "allNotify")
.declareAcquiredMethod("sendTotalTime", "sendTotalTime")
.declareAcquiredMethod("showAnimation", "showAnimation") .declareAcquiredMethod("showAnimation", "showAnimation")
.declareAcquiredMethod("stopAnimation", "stopAnimation"); .declareAcquiredMethod("stopAnimation", "stopAnimation");
gk.ready(function (g) { gk.ready(function (g) {
...@@ -132,7 +130,7 @@ ...@@ -132,7 +130,7 @@
g.audioCtx = new window.AudioContext(); g.audioCtx = new window.AudioContext();
} catch (e) { } catch (e) {
console.log( console.log(
"ERROR:[configure] Tour browser does not support AudioContext" "ERROR:[configure] Your browser does not support AudioContext"
); );
} }
g.getDeclaredGadget("io").then(function (e) { g.getDeclaredGadget("io").then(function (e) {
......
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