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*/ /*jslint nomen: true*/
(function (window, rJS, $) { (function (window, rJS, $) {
"use strict"; "use strict";
function AnimationClass(control) { var control,
this.canvas = null; animation,
this.mirror = null; time,
this.control = control; volume,
this.animationPlayId = -1; title,
totalId = 0;
function nextId() {
return Math.floor(Math.random() * totalId);
} }
rJS(window)
AnimationClass.prototype.setCanvas = function (canvas, mirror) { .allowPublicAcquisition("setCurrentTime", function (value) {
this.canvas = canvas; control.setCurrentTime(value);
this.mirror = mirror; })
}; .allowPublicAcquisition("setVolume", function (value) {
control.setVolume(value);
AnimationClass.prototype.play = function () { })
var that = this, .allowPublicAcquisition("getVolume", function () {
canvas = that.canvas, return control.getVolume().then(function (value) {
mirror = that.mirror, return value;
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);
}); });
}; })
that.animationPlayId = window.requestAnimationFrame(drawFrame); .allowPublicAcquisition("getFFTValue", function () {
}; return control.getFFTValue().then(function (value) {
AnimationClass.prototype.stop = function () { return value;
var that = this; });
window.cancelAnimationFrame( })
that.animationPlayId .allowPublicAcquisition("nextToPlay", function () {
); //stop the previous animation return nextId();
}; })
.allowPublicAcquisition("sendTotalId", function (value) {
rJS(window).ready(function (g) { totalId = value;
})
var input_context = g.__element.getElementsByTagName('input')[0]; .allowPublicAcquisition("allNotify", function () {
g.playlist = []; control.getTotalTime().then(function (value) {
g.currentPlayId = 0; 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([ RSVP.all([
g.getDeclaredGadget( g.getDeclaredGadget(
"control" "control"
...@@ -89,82 +69,47 @@ ...@@ -89,82 +69,47 @@
) )
]) ])
.then(function (all_param) { .then(function (all_param) {
var control = all_param[0], control = all_param[0];
animation = all_param[1], animation = all_param[1];
time = all_param[2], time = all_param[2];
volume = all_param[3], volume = all_param[3];
title = all_param[4], title = all_param[4];
animationObject = new AnimationClass(control); window.setInterval(function () {
window.setInterval(function () { //double click to play
control.getCurrentTime() control.getCurrentTime()
.then(function (e) { .then(function (e) {
time.setValue(e); time.setValue(e);
}); });
}, 1000); }, 1000);
volume.setMax(3); volume.setMax(3);
function nextToPlay() {
g.currentPlayId = Math.floor(Math.random() next_context.onclick = function () {
* g.playlist.length); control.setSong(nextId());
control.setSong(g.playlist[g.currentPlayId]);
control.playSong(); control.playSong();
animation.showAnimation(); animation.showAnimation();
title.setMessage(g.playlist[g.currentPlayId].name); control.getTotalTime().then(function (value) {
control.getTotalTime() time.setMax(value);
.then(function (e) {
time.setMax(e);
}); });
}
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]);
}
}
}; };
command_context.onclick = function () {
//time configure control.isPaused().then(function (paused) {
time.setAction('onclick', function (e) { if (paused) {
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) {
control.playSong(); control.playSong();
} else { } else {
control.stopSong(); 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) { .fail(function (e) {
console.log("[ERROR]: " + e); console.log("[ERROR]: " + e);
......
src/audioplayer/index.html
View file @ 5249ca7f
...@@ -16,27 +16,25 @@ ...@@ -16,27 +16,25 @@
</head> </head>
<body> <body>
<div class = "audioplayer">
<button type="button">next</button>
<input type = "file" multiple /> <button type="button">play/pause</button>
<div class = "control" data-gadget-url="../audioplayer_control/index.html" data-gadget-scope="control" >
<div class = "control" data-gadget-url= "../audioplayer_control/index.html" data-gadget-scope= "control" >
</div> </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>
<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>
<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>
<div class = "title" data-gadget-url="../audioplayer_title/index.html" data-gadget-scope="title">
</div>
</div>
</body> </body>
</html> </html>
src/audioplayer_animation/animation.js
View file @ 5249ca7f
...@@ -5,26 +5,62 @@ ...@@ -5,26 +5,62 @@
(function (window, rJS) { (function (window, rJS) {
"use strict"; "use strict";
var gk = rJS(window); var gk = rJS(window);
/*need a animation class, which contents play stop set methods */ gk.declareAcquiredMethod("getFFTValue", "getFFTValue")
gk.declareMethod('setAnimation', function (animation) {
this.animation = animation;
this.animation.setCanvas(this.canvas, this.mirror);
})
.declareMethod('showAnimation', function () { .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 () { .declareMethod('stopAnimation', function () {
this.animation.stop();
})
.declareMethod('setAction', function (type, action) {
var that = this; var that = this;
that.canvas[type] = function () { window.cancelAnimationFrame(
action.call(that); that.animationPlayId
that.showAnimation(); );
};
}); });
gk.ready(function (g) { gk.ready(function (g) {
g.canvas = g.__element.getElementsByTagName('canvas')[0]; g.canvas = g.__element.getElementsByTagName('canvas')[0];
g.mirror = g.__element.getElementsByTagName('canvas')[1]; g.mirror = g.__element.getElementsByTagName('canvas')[1];
g.animationPlayId = -1;
}); });
}(window, rJS)); }(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) { (function (window, rJS) {
"use strict"; "use strict";
var gk = rJS(window); var gk = rJS(window);
gk.declareMethod('setSong', function (file) { //configure a song gk.declareMethod('setSong', function (id) { //configure a song
var gadget = this; 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.decoded = true;
} }
gadget.file = file; gadget.currentPlayId = id;
gadget.source.connect(gadget.analyser); gadget.source.connect(gadget.analyser);
gadget.analyser.connect(gadget.gain); gadget.analyser.connect(gadget.gain);
gadget.gain.gain.value = gadget.volume; gadget.gain.gain.value = gadget.volume;
gadget.gain.connect(gadget.audioCtx.destination); gadget.gain.connect(gadget.audioCtx.destination);
gadget.audio.src = URL.createObjectURL(file); gadget.audio.src = URL.createObjectURL(gadget.playlist[id]);
gadget.audio.load(); gadget.audio.load();
gadget.allNotify();
}) })
.declareMethod('stopSong', function () { .declareMethod('stopSong', function () {
this.audio.pause(); this.audio.pause();
this.stopAnimation();
}) })
.declareMethod('playSong', function () { .declareMethod('playSong', function () {
this.audio.play(); this.audio.play();
this.showAnimation();
}) })
.declareMethod('setVolume', function (volume) { .declareMethod('setVolume', function (volume) {
this.volume = volume; this.volume = volume;
this.gain.gain.value = volume; this.gain.gain.value = volume;
}) })
.declareMethod('getVolume', function () { .declareMethod('getVolume', function () {
return Math.round(this.volume * 100) + "%"; return this.volume;
})
.declareMethod('getTitle', function () {
return this.playlist[this.currentPlayId].name;
}) })
.declareMethod('isPaused', function () { .declareMethod('isPaused', function () {
return this.audio.paused; return this.audio.paused;
...@@ -37,6 +49,7 @@ ...@@ -37,6 +49,7 @@
}) })
.declareMethod('setCurrentTime', function (currentTime) { .declareMethod('setCurrentTime', function (currentTime) {
this.audio.currentTime = currentTime; this.audio.currentTime = currentTime;
this.audio.play();
}) })
.declareMethod('getTotalTime', function () { .declareMethod('getTotalTime', function () {
return this.getDecodeValue(). return this.getDecodeValue().
...@@ -46,9 +59,12 @@ ...@@ -46,9 +59,12 @@
}) })
.declareMethod('getFFTValue', function () { .declareMethod('getFFTValue', function () {
var gadget = this, var gadget = this,
tmp = {},
array = new Uint8Array(gadget.analyser.frequencyBinCount); array = new Uint8Array(gadget.analyser.frequencyBinCount);
gadget.analyser.getByteFrequencyData(array); gadget.analyser.getByteFrequencyData(array);
return array; tmp.array = array;
tmp.length = array.length;
return tmp;
}) })
.declareMethod('getDecodeValue', function () { .declareMethod('getDecodeValue', function () {
var gadget = this, var gadget = this,
...@@ -67,7 +83,7 @@ ...@@ -67,7 +83,7 @@
resolve(event.target.result); resolve(event.target.result);
} }
}; };
reader.readAsArrayBuffer(gadget.file); reader.readAsArrayBuffer(gadget.playlist[gadget.currentPlayId]);
}); });
...@@ -86,16 +102,16 @@ ...@@ -86,16 +102,16 @@
return error; return error;
}); });
}) })
.declareMethod('onended', function (end) { .declareAcquiredMethod("sendTotalId", "sendTotalId")
if (typeof end === "function") { .declareAcquiredMethod("nextToPlay", "nextToPlay")
this.audio.onended = end; .declareAcquiredMethod("allNotify", "allNotify")
} else { .declareAcquiredMethod("showAnimation", "showAnimation")
console.log("ERROR:[onended] parameter shoude be a function\n"); .declareAcquiredMethod("stopAnimation", "stopAnimation");
}
});
gk.ready(function (g) { gk.ready(function (g) {
var input_context = g.__element.getElementsByTagName('input')[0];
g.volume = 1; g.volume = 1;
g.playlist = [];
g.currentPlayId = 0;
window.AudioContext = window.AudioContext || window.webkitAudioContext window.AudioContext = window.AudioContext || window.webkitAudioContext
|| window.mozAudiocontext || window.msAudioContext; || window.mozAudiocontext || window.msAudioContext;
try { try {
...@@ -110,5 +126,29 @@ ...@@ -110,5 +126,29 @@
g.analyser = g.audioCtx.createAnalyser(); g.analyser = g.audioCtx.createAnalyser();
g.gain = g.audioCtx.createGain(); g.gain = g.audioCtx.createGain();
g.decoded = true; 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)); }(window, rJS));
src/audioplayer_control/index.html
View file @ 5249ca7f
...@@ -13,5 +13,6 @@ ...@@ -13,5 +13,6 @@
</head> </head>
<body> <body>
<input type = "file" multiple />
</body> </body>
</html> </html>
src/audioplayer_progress/index.html
View file @ 5249ca7f
...@@ -18,8 +18,7 @@ ...@@ -18,8 +18,7 @@
<body> <body>
<progress> <progress class="pro">
<id="progress">
</progress> </progress>
......
src/audioplayer_progress/progress.js
View file @ 5249ca7f
...@@ -18,20 +18,16 @@ ...@@ -18,20 +18,16 @@
.declareMethod('getMax', function () { .declareMethod('getMax', function () {
return this.bar.max; return this.bar.max;
}) })
.declareMethod('getPositionValue', function (e) { .declareAcquiredMethod("setCurrentTime", "setCurrentTime");
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);
};
});
gk.ready(function (g) { gk.ready(function (g) {
g.bar = g.__element.getElementsByTagName('progress')[0]; g.bar = g.__element.getElementsByTagName('progress')[0];
g.bar.value = 0; g.bar.value = 0;
g.bar.max = 1000; 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)); }(window, rJS, jQuery));
src/audioplayer_title/index.html
View file @ 5249ca7f
...@@ -15,9 +15,6 @@ ...@@ -15,9 +15,6 @@
<body> <body>
<form name="noticeForm" action=""> <input type="text" class="notice" size="50" >
<p><input type="text" name="notice" size="40" ></p>
</form>
</body> </body>
</html> </html>
src/audioplayer_title/title.js
View file @ 5249ca7f
...@@ -4,13 +4,12 @@ ...@@ -4,13 +4,12 @@
(function (window, rJS) { (function (window, rJS) {
"use strict"; "use strict";
var gk = rJS(window), var gk = rJS(window);
scroll;
function BannerObject() { function BannerObject() {
this.msg = " "; this.msg = "";
this.out = " "; this.out = " ";
this.Position = 50; this.Position = 0;
this.pos = this.Position; this.pos = 0;
this.delay = 100; this.delay = 100;
this.i = 0; this.i = 0;
this.size = 0; this.size = 0;
...@@ -20,48 +19,49 @@ ...@@ -20,48 +19,49 @@
} }
gk.declareMethod('setMessage', function (msg) { gk.declareMethod('setMessage', function (msg) {
scroll.msg = msg; this.scroll.msg = msg;
}) })
.declareMethod('setDelay', function (delay) { .declareMethod('setDelay', function (delay) {
scroll.delay = delay; this.scroll.delay = delay;
}) })
.declareMethod('setPosition', function (position) { .declareMethod('setPosition', function (position) {
if (position > this.size) { this.scroll.Position = position;
position = this.size; this.scroll.pos = position;
}
scroll.Position = position;
}) })
.declareMethod('setMaxSize', function (size) { .declareMethod('setMaxSize', function (size) {
this.input.size = size; this.input.size = size;
scroll.size = size; this.scroll.size = size;
})
.declareMethod('getSize', function (size) {
return this.input.size;
}); });
gk.ready(function (g) { gk.ready(function (g) {
scroll = new BannerObject(); g.scroll = new BannerObject();
g.input = g.__element.getElementsByTagName('input')[0]; g.input = g.__element.getElementsByTagName('input')[0];
scroll.size = g.input.size; g.scroll.size = g.input.size;
function scroller() { function scroller() {
scroll.out += " "; g.scroll.out += " ";
if (scroll.pos > 0) { if (g.scroll.pos > 0) {
for (scroll.i = 0; scroll.i < scroll.pos; scroll.i += 1) { for (g.scroll.i = 0; g.scroll.i < g.scroll.pos; g.scroll.i += 1) {
scroll.out += " "; g.scroll.out += " ";
} }
} }
if (scroll.pos >= 0) { if (g.scroll.pos >= 0) {
scroll.out += scroll.msg; g.scroll.out += g.scroll.msg;
} else { } else {
scroll.out = scroll.msg.substring(-scroll.pos, g.scroll.out = g.scroll.msg.substring(-g.scroll.pos,
scroll.msg.length); g.scroll.msg.length);
} }
g.input.value = scroll.out; g.input.value = g.scroll.out;
scroll.out = " "; g.scroll.out = " ";
scroll.pos -= 2; g.scroll.pos -= 2;
if (scroll.pos < -(scroll.msg.length)) { if (g.scroll.pos < -(g.scroll.msg.length)) {
scroll.reset(); g.scroll.reset();
} }
} }
window.setInterval(function () { window.setInterval(function () {
scroller(); scroller();
}, scroll.delay); }, g.scroll.delay);
}); });
}(window, rJS)); }(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