Skip to content

O
officejs
Commit 5249ca7f authored by Xiaowu Zhang's avatar Xiaowu Zhang
Browse files
Options

fix use iframe bug in audioplayer

parent da19578f
Show whitespace changes
Inline Side-by-side
Showing with 357 additions and 252 deletions
src/audioplayer/audioplayer.css
View file @ 5249ca7f
.title {
position: absolute;
top: 10px;
margin: 50px 0 20px 0;
}
input.notice{
width:400px;
background: black;
color: white;
}
.progress_time{
position: absolute;
top: 420px;
margin: 50px 0 20px 0;
}
progress.pro{
width:400px;
}
\ No newline at end of file
src/audioplayer/audioplayer.js
View file @ 5249ca7f
/*global window, rJS, RSVP, console, $, jQuery */
/*global window, rJS, RSVP, console, $, jQuery, URL */
/*jslint nomen: true*/
(function (window, rJS, $) {
"use strict";
function AnimationClass(control) {
this.canvas = null;
this.mirror = null;
this.control = control;
this.animationPlayId = -1;
var control,
animation,
time,
volume,
title,
totalId = 0;
function nextId() {
return Math.floor(Math.random() * totalId);
}
AnimationClass.prototype.setCanvas = function (canvas, mirror) {
this.canvas = canvas;
this.mirror = mirror;
};
AnimationClass.prototype.play = function () {
var that = this,
canvas = that.canvas,
mirror = that.mirror,
canvasCtx = canvas.getContext('2d'),
mirrorCtx = mirror.getContext('2d'),
cwidth = canvas.width,
cheight = canvas.height - 2,
meterWidth = 10, //width of the meters in the spectrum
capHeight = 2,
meterNum = 3800 / (10 + 2),
array,
drawFrame,
step,
i,
value,
gradient = canvasCtx.createLinearGradient(0, 0, 0, 300);
gradient.addColorStop(1, '#0f0');
gradient.addColorStop(0.5, '#ff0');
gradient.addColorStop(0, '#f00');
window.cancelAnimationFrame(
that.animationPlayId
); //stop the previous animation
drawFrame = function () {
that.control.getFFTValue()
.then(function (e) {
array = e;
canvasCtx.clearRect(0, 0, cwidth, cheight);
step = Math.round(array.length / meterNum);
for (i = 0; i < meterNum; i += 1) {
value = array[i * step];
canvasCtx.fillStyle = gradient;
canvasCtx.fillRect(i * 12,
cheight - value + capHeight,
meterWidth,
cheight); //the meter
}
//draw the mirror
mirrorCtx.clearRect(0, 0, cwidth, cheight);
mirrorCtx.drawImage(canvas, 0, -100, cwidth, cheight);
that.animationPlayId = window.requestAnimationFrame(drawFrame);
rJS(window)
.allowPublicAcquisition("setCurrentTime", function (value) {
control.setCurrentTime(value);
})
.allowPublicAcquisition("setVolume", function (value) {
control.setVolume(value);
})
.allowPublicAcquisition("getVolume", function () {
return control.getVolume().then(function (value) {
return value;
});
};
that.animationPlayId = window.requestAnimationFrame(drawFrame);
};
AnimationClass.prototype.stop = function () {
var that = this;
window.cancelAnimationFrame(
that.animationPlayId
); //stop the previous animation
};
rJS(window).ready(function (g) {
var input_context = g.__element.getElementsByTagName('input')[0];
g.playlist = [];
g.currentPlayId = 0;
})
.allowPublicAcquisition("getFFTValue", function () {
return control.getFFTValue().then(function (value) {
return value;
});
})
.allowPublicAcquisition("nextToPlay", function () {
return nextId();
})
.allowPublicAcquisition("sendTotalId", function (value) {
totalId = value;
})
.allowPublicAcquisition("allNotify", function () {
control.getTotalTime().then(function (value) {
time.setMax(value);
});
control.getTitle().then(function (value) {
title.setMessage(value);
});
})
.allowPublicAcquisition("showAnimation", function () {
animation.showAnimation();
})
.allowPublicAcquisition("stopAnimation", function () {
animation.stopAnimation();
})
.ready(function (g) {
var next_context = g.__element.getElementsByTagName('button')[0],
command_context = g.__element.getElementsByTagName('button')[1];
RSVP.all([
g.getDeclaredGadget(
"control"
......@@ -89,82 +69,47 @@
)
])
.then(function (all_param) {
var control = all_param[0],
animation = all_param[1],
time = all_param[2],
volume = all_param[3],
title = all_param[4],
animationObject = new AnimationClass(control);
window.setInterval(function () { //double click to play
control = all_param[0];
animation = all_param[1];
time = all_param[2];
volume = all_param[3];
title = all_param[4];
window.setInterval(function () {
control.getCurrentTime()
.then(function (e) {
time.setValue(e);
});
}, 1000);
volume.setMax(3);
function nextToPlay() {
g.currentPlayId = Math.floor(Math.random()
* g.playlist.length);
control.setSong(g.playlist[g.currentPlayId]);
next_context.onclick = function () {
control.setSong(nextId());
control.playSong();
animation.showAnimation();
title.setMessage(g.playlist[g.currentPlayId].name);
control.getTotalTime()
.then(function (e) {
time.setMax(e);
control.getTotalTime().then(function (value) {
time.setMax(value);
});
}
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.playlist.push(input_context.files[index]);
}
}
};
//time configure
time.setAction('onclick', function (e) {
time.getPositionValue(e).
then(function (value) {
control.setCurrentTime(value);
time.setValue(value);
});
});
//volume configure
volume.setMax(3);
volume.setAction('onclick', function (e) {
volume.getPositionValue(e).
then(function (value) {
volume.setValue(value);
control.setVolume(value);
});
});
//control configure
control.onended(nextToPlay);
//animation configure
animation.setAnimation(animationObject);
animation.setAction('onclick', function () {
control.isPaused()
.then(function (pause) {
if (pause) {
command_context.onclick = function () {
control.isPaused().then(function (paused) {
if (paused) {
control.playSong();
} else {
control.stopSong();
}
});
};
//volume configure
control.getVolume().then(function (value) {
volume.setValue(value);
});
//title configure
title.setMessage("audio player");
title.getSize().then(function (size) {
title.setPosition(size * 2);
});
animation.setAction('ondblclick', nextToPlay);
})
.fail(function (e) {
console.log("[ERROR]: " + e);
......
src/audioplayer/index.html
View file @ 5249ca7f
......@@ -16,27 +16,25 @@
</head>
<body>
<input type = "file" multiple />
<div class = "control" data-gadget-url= "../audioplayer_control/index.html" data-gadget-scope= "control" >
<div class = "audioplayer">
<button type="button">next</button>
<button type="button">play/pause</button>
<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 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 class = "progress_time" data-gadget-url="../audioplayer_progress/index.html" data-gadget-scope="time" >
</div>
<div class = "progress_volume" data-gadget-url= "../audioplayer_progress/index.html" data-gadget-scope= "volume" >
</div>
<div class = "title" data-gadget-url= "../audioplayer_title/index.html" data-gadget-scope= "title" >
<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>
src/audioplayer_animation/animation.js
View file @ 5249ca7f
......@@ -5,26 +5,62 @@
(function (window, rJS) {
"use strict";
var gk = rJS(window);
/*need a animation class, which contents play stop set methods */
gk.declareMethod('setAnimation', function (animation) {
this.animation = animation;
this.animation.setCanvas(this.canvas, this.mirror);
})
gk.declareAcquiredMethod("getFFTValue", "getFFTValue")
.declareMethod('showAnimation', function () {
this.animation.play();
var that = this,
canvas = that.canvas,
mirror = that.mirror,
canvasCtx = canvas.getContext('2d'),
mirrorCtx = mirror.getContext('2d'),
cwidth = canvas.width,
cheight = canvas.height - 2,
meterWidth = 10, //width of the meters in the spectrum
capHeight = 2,
meterNum = 3800 / (10 + 2),
array,
drawFrame,
step,
i,
value,
gradient = canvasCtx.createLinearGradient(0, 0, 0, 300);
gradient.addColorStop(1, '#0f0');
gradient.addColorStop(0.5, '#ff0');
gradient.addColorStop(0, '#f00');
window.cancelAnimationFrame(
that.animationPlayId
); //stop the previous animation
drawFrame = function () {
that.getFFTValue()
.then(function (e) {
array = e.array;
canvasCtx.clearRect(0, 0, cwidth, cheight);
step = Math.round(e.length / meterNum);
for (i = 0; i < meterNum; i += 1) {
value = array[i * step];
canvasCtx.fillStyle = gradient;
canvasCtx.fillRect(i * 12,
cheight - value + capHeight,
meterWidth,
cheight); //the meter
}
//draw the mirror
mirrorCtx.clearRect(0, 0, cwidth, cheight);
mirrorCtx.drawImage(canvas, 0, -100, cwidth, cheight);
that.animationPlayId = window.requestAnimationFrame(drawFrame);
});
};
that.animationPlayId = window.requestAnimationFrame(drawFrame);
})
.declareMethod('stopAnimation', function () {
this.animation.stop();
})
.declareMethod('setAction', function (type, action) {
var that = this;
that.canvas[type] = function () {
action.call(that);
that.showAnimation();
};
window.cancelAnimationFrame(
that.animationPlayId
);
});
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
View file @ 5249ca7f
/*global window, rJS, RSVP, console, URL, Math, FileReader, Uint8Array */
/*global window, rJS, RSVP, console, URL, Math,
FileReader, Uint8Array, File */
/*jslint nomen: true*/
(function (window, rJS) {
"use strict";
var gk = rJS(window);
gk.declareMethod('setSong', function (file) { //configure a song
gk.declareMethod('setSong', function (id) { //configure a song
var gadget = this;
if (gadget.file !== file) {
if ((id >= gadget.lenght) || (id < 0)) {
console.log("invalide play id");
return;
}
if (gadget.currentPlayId !== id) {
gadget.decoded = true;
}
gadget.file = file;
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);
gadget.audio.src = URL.createObjectURL(file);
gadget.audio.src = URL.createObjectURL(gadget.playlist[id]);
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;
this.gain.gain.value = volume;
})
.declareMethod('getVolume', function () {
return Math.round(this.volume * 100) + "%";
return this.volume;
})
.declareMethod('getTitle', function () {
return this.playlist[this.currentPlayId].name;
})
.declareMethod('isPaused', function () {
return this.audio.paused;
......@@ -37,6 +49,7 @@
})
.declareMethod('setCurrentTime', function (currentTime) {
this.audio.currentTime = currentTime;
this.audio.play();
})
.declareMethod('getTotalTime', function () {
return this.getDecodeValue().
......@@ -46,9 +59,12 @@
})
.declareMethod('getFFTValue', function () {
var gadget = this,
tmp = {},
array = new Uint8Array(gadget.analyser.frequencyBinCount);
gadget.analyser.getByteFrequencyData(array);
return array;
tmp.array = array;
tmp.length = array.length;
return tmp;
})
.declareMethod('getDecodeValue', function () {
var gadget = this,
......@@ -67,7 +83,7 @@
resolve(event.target.result);
}
};
reader.readAsArrayBuffer(gadget.file);
reader.readAsArrayBuffer(gadget.playlist[gadget.currentPlayId]);
});
......@@ -86,16 +102,16 @@
return error;
});
})
.declareMethod('onended', function (end) {
if (typeof end === "function") {
this.audio.onended = end;
} else {
console.log("ERROR:[onended] parameter shoude be a function\n");
}
});
.declareAcquiredMethod("sendTotalId", "sendTotalId")
.declareAcquiredMethod("nextToPlay", "nextToPlay")
.declareAcquiredMethod("allNotify", "allNotify")
.declareAcquiredMethod("showAnimation", "showAnimation")
.declareAcquiredMethod("stopAnimation", "stopAnimation");
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 {
......@@ -110,5 +126,29 @@
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);
g.playSong(id);
});
};
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.playlist.push(input_context.files[index]);
}
}
g.sendTotalId(g.playlist.length);
};
});
}(window, rJS));
src/audioplayer_control/index.html
View file @ 5249ca7f
......@@ -13,5 +13,6 @@
</head>
<body>
<input type = "file" multiple />
</body>
</html>
src/audioplayer_progress/index.html
View file @ 5249ca7f
......@@ -18,8 +18,7 @@
<body>
<progress>
<id="progress">
<progress class="pro">
</progress>
......
src/audioplayer_progress/progress.js
View file @ 5249ca7f
......@@ -18,20 +18,16 @@
.declareMethod('getMax', function () {
return this.bar.max;
})
.declareMethod('getPositionValue', function (e) {
var posX = e.clientX,
targetLeft = $(this.bar).offset().left;
posX = ((posX - targetLeft) / $(this.bar).width());
return posX * this.bar.max;
})
.declareMethod('setAction', function (type, action) {
this.bar[type] = function (e) {
action.call(this, e);
};
});
.declareAcquiredMethod("setCurrentTime", "setCurrentTime");
gk.ready(function (g) {
g.bar = g.__element.getElementsByTagName('progress')[0];
g.bar.value = 0;
g.bar.max = 1000;
g.bar.onclick = function (e) {
var posX = e.clientX,
targetLeft = $(g.bar).offset().left;
posX = ((posX - targetLeft) / $(g.bar).width());
g.setCurrentTime(posX * g.bar.max);
};
});
}(window, rJS, jQuery));
src/audioplayer_title/index.html
View file @ 5249ca7f
......@@ -15,9 +15,6 @@
<body>
<form name="noticeForm" action="">
<p><input type="text" name="notice" size="40" ></p>
</form>
<input type="text" class="notice" size="50" >
</body>
</html>
src/audioplayer_title/title.js
View file @ 5249ca7f
......@@ -4,13 +4,12 @@
(function (window, rJS) {
"use strict";
var gk = rJS(window),
scroll;
var gk = rJS(window);
function BannerObject() {
this.msg = " ";
this.msg = "";
this.out = " ";
this.Position = 50;
this.pos = this.Position;
this.Position = 0;
this.pos = 0;
this.delay = 100;
this.i = 0;
this.size = 0;
......@@ -20,48 +19,49 @@
}
gk.declareMethod('setMessage', function (msg) {
scroll.msg = msg;
this.scroll.msg = msg;
})
.declareMethod('setDelay', function (delay) {
scroll.delay = delay;
this.scroll.delay = delay;
})
.declareMethod('setPosition', function (position) {
if (position > this.size) {
position = this.size;
}
scroll.Position = position;
this.scroll.Position = position;
this.scroll.pos = position;
})
.declareMethod('setMaxSize', function (size) {
this.input.size = size;
scroll.size = size;
this.scroll.size = size;
})
.declareMethod('getSize', function (size) {
return this.input.size;
});
gk.ready(function (g) {
scroll = new BannerObject();
g.scroll = new BannerObject();
g.input = g.__element.getElementsByTagName('input')[0];
scroll.size = g.input.size;
g.scroll.size = g.input.size;
function scroller() {
scroll.out += " ";
if (scroll.pos > 0) {
for (scroll.i = 0; scroll.i < scroll.pos; scroll.i += 1) {
scroll.out += " ";
g.scroll.out += " ";
if (g.scroll.pos > 0) {
for (g.scroll.i = 0; g.scroll.i < g.scroll.pos; g.scroll.i += 1) {
g.scroll.out += " ";
}
}
if (scroll.pos >= 0) {
scroll.out += scroll.msg;
if (g.scroll.pos >= 0) {
g.scroll.out += g.scroll.msg;
} else {
scroll.out = scroll.msg.substring(-scroll.pos,
scroll.msg.length);
g.scroll.out = g.scroll.msg.substring(-g.scroll.pos,
g.scroll.msg.length);
}
g.input.value = scroll.out;
scroll.out = " ";
scroll.pos -= 2;
if (scroll.pos < -(scroll.msg.length)) {
scroll.reset();
g.input.value = g.scroll.out;
g.scroll.out = " ";
g.scroll.pos -= 2;
if (g.scroll.pos < -(g.scroll.msg.length)) {
g.scroll.reset();
}
}
window.setInterval(function () {
scroller();
}, scroll.delay);
}, g.scroll.delay);
});
}(window, rJS));
src/audioplayer_volume/index.html 0 → 100644
View file @ 5249ca7f
<!DOCTYPE html>
<html lang="en">
<head>
<title>Progress</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="./volume.js" type="text/javascript"></script>
<link rel="stylesheet" href="../../src/audioplayer_volume/volume.css" media="screen" ></link>
</head>
<body>
<progress class="volume">
</progress>
</body>
</html>
src/audioplayer_volume/volume.css 0 → 100644
View file @ 5249ca7f
progress {
height: 25px;
padding: 5px;
width: 350px;
margin: 50px 0 20px 0;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow: 0 1px 5px #000 inset,0 1px 0 #444;
-webkit-box-shadow: 0 1px 5px #000 inset,0 1px 0 #444;
box-shadow: 0 1px 5px #000 inset,0 1px 0 #444;
}
src/audioplayer_volume/volume.js 0 → 100644
View file @ 5249ca7f
/*global window, rJS, RSVP, console, $, jQuery */
/*jslint nomen: true */
(function (window, rJS, $) {
"use strict";
var gk = rJS(window);
gk.declareMethod('setValue', function (value) {
this.bar.value = value;
})
.declareMethod('setMax', function (max) {
this.bar.max = max;
})
.declareMethod('getValue', function () {
return this.bar.value;
})
.declareMethod('getMax', function () {
return this.bar.max;
})
.declareAcquiredMethod("setVolume", "setVolume")
.declareAcquiredMethod("getVolume", "getVolume"); //xxxx
gk.ready(function (g) {
g.bar = g.__element.getElementsByTagName('progress')[0];
g.bar.max = 1000;
g.bar.onclick = function (e) {
var posX = e.clientX,
targetLeft = $(g.bar).offset().left;
posX = ((posX - targetLeft) / $(g.bar).width()) * g.bar.max;
g.setValue(posX);
g.setVolume(posX);
};
});
}(window, rJS, jQuery));
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
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7