Skip to content

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

add video(mp4) support

parent 9eb57864
Hide whitespace changes
Inline Side-by-side
Showing with 98 additions and 16 deletions
dev/audioplayer_control/control.css
View file @ aa60d3b9
button.loop{width:10em}#visualizer{text-align:center}canvas#can{width:50%;height:20%}progress.bar{position:inherit;display:block;height:1em;width:100%;-moz-border-radius:.5em;-webkit-border-radius:.5em;border-radius:.5em;-moz-box-shadow:0 .1em .5em #000 inset,0 .1em 0 #444;-webkit-box-shadow:0 .1em .5em #000 inset,0 .1em 0 #444;box-shadow:0 .1em .5em #000 inset,0 .1em 0 #444}
\ No newline at end of file
button.loop{width:10em}#visualizer{text-align:center}#video{text-align:center}video#videoControl{width:50%;height:20%}canvas#can{width:50%;height:20%}progress.bar{position:inherit;display:block;height:1em;width:100%;-moz-border-radius:.5em;-webkit-border-radius:.5em;border-radius:.5em;-moz-box-shadow:0 .1em .5em #000 inset,0 .1em 0 #444;-webkit-box-shadow:0 .1em .5em #000 inset,0 .1em 0 #444;box-shadow:0 .1em .5em #000 inset,0 .1em 0 #444}
\ No newline at end of file
dev/audioplayer_control/control.js
View file @ aa60d3b9
......@@ -59,7 +59,7 @@
gadget.analyser.getByteFrequencyData(array);
return array;
}
function setSong(url) {
function set(url) {
//configure a song
var gadget = this;
gadget.source.connect(gadget.filter);
......@@ -68,6 +68,10 @@
gadget.gain.connect(audioCtx.destination);
gadget.audio.src = url;
gadget.audio.load();
if (gadget.type === "video/mp4") {
gadget.video.src = url;
gadget.video.load();
}
}
function promiseRequestAnimation(callback) {
var animationId, callback_promise;
......@@ -92,13 +96,14 @@
}
return new RSVP.Promise(resolver, canceller);
}
function playSong() {
function play() {
var that = this, canvas = that.canvas, canvasCtx = canvas.getContext("2d"), cwidth = canvas.width, cheight = canvas.height - 2, meterWidth = 8, //width of the meters in the spectrum
capHeight = 2, meterNum = 300, array, drawFrame, step, i, value, bar_context = that.__element.getElementsByClassName("bar")[0], time_context = that.__element.getElementsByClassName("time")[0], gradient = canvasCtx.createLinearGradient(0, 0, 0, 300);
capHeight = 2, meterNum = 300, array, drawFrame, showTime, step, i, value, bar_context = that.__element.getElementsByClassName("bar")[0], time_context = that.__element.getElementsByClassName("time")[0], gradient = canvasCtx.createLinearGradient(0, 0, 0, 300);
gradient.addColorStop(1, "#0f0");
gradient.addColorStop(.5, "#ff0");
gradient.addColorStop(0, "#f00");
that.audio.play();
that.video.play();
drawFrame = function() {
array = getFFTValue(that);
canvasCtx.clearRect(0, 0, cwidth, cheight);
......@@ -111,7 +116,18 @@
canvasCtx.fillRect(i * 12, cheight - value + capHeight, meterWidth, cheight);
}
};
return promiseRequestAnimation(drawFrame);
showTime = function() {
bar_context.value = that.audio.currentTime;
time_context.innerHTML = timeFormat(that.audio.duration - that.audio.currentTime);
};
if (that.type !== "video/mp4") {
canvas.style.display = "";
that.video.style.display = "none";
return promiseRequestAnimation(drawFrame);
}
that.video.style.display = "";
canvas.style.display = "none";
return promiseRequestAnimation(showTime);
}
gk.declareAcquiredMethod("jio_getAttachment", "jio_getAttachment").declareAcquiredMethod("jio_get", "jio_get").declareAcquiredMethod("jio_remove", "jio_remove").declareAcquiredMethod("plSave", "plSave").declareAcquiredMethod("plGive", "plGive").declareAcquiredMethod("displayThisPage", "displayThisPage").declareAcquiredMethod("displayThisTitle", "displayThisTitle").declareAcquiredMethod("allDocs", "allDocs").declareAcquiredMethod("plEnablePage", "plEnablePage").declareAcquiredMethod("pleaseRedirectMyHash", "pleaseRedirectMyHash").declareMethod("render", function(options) {
var g = this;
......@@ -132,6 +148,7 @@
}).push(function(result) {
var share_context = g.__element.getElementsByClassName("share")[0];
share_context.href = "https://twitter.com/intent/tweet?hashtags=MusicPlayer&text=" + encodeURI(result.data.title);
g.type = result.data.type;
return g.displayThisTitle(options.action + " : " + result.data.title);
}).push(function() {
return g.allDocs({
......@@ -174,7 +191,7 @@
var g = this, command_context = g.__element.getElementsByClassName("command")[0], mute_context = g.__element.getElementsByClassName("mute")[0], bar_context = g.__element.getElementsByClassName("bar")[0], box_context = g.__element.getElementsByClassName("box")[0], filter_context = g.__element.getElementsByClassName("filter")[0], filter_type = $("select"), loop_context = g.__element.getElementsByClassName("loop")[0], loop = false, time_context = g.__element.getElementsByClassName("time")[0];
bar_context.value = 0;
return new RSVP.Queue().push(function() {
setSong.call(g, g.url);
set.call(g, g.url);
return promiseEventListener(g.audio, "loadedmetadata", false);
}).push(function() {
bar_context.max = g.audio.duration;
......@@ -193,7 +210,7 @@
time_context.style.left = bar_context.style.left;
$(time_context).offset().top = $(bar_context).offset().top + 3;
time_context.innerHTML = timeFormat(g.audio.duration);
return RSVP.any([ playSong.call(g), loopEventListener(mute_context, "click", false, function() {
return RSVP.any([ play.call(g), loopEventListener(mute_context, "click", false, function() {
mute_context.innerHTML = g.gain.gain.value ? "mute on" : "mute off";
g.gain.gain.value = (g.gain.gain.value + 1) % 2;
return g.plSave({
......@@ -203,21 +220,29 @@
if (loop) {
g.audio.load();
g.audio.play();
if (g.type === "video/mp4") {
g.video.load();
g.video.play();
}
} else {
window.location = g.__element.getElementsByClassName("next")[0].href;
}
}), loopEventListener(command_context, "click", false, function() {
if (g.audio.paused) {
g.audio.play();
g.video.play();
command_context.innerHTML = "stop";
} else {
g.audio.pause();
g.video.pause();
command_context.innerHTML = "play";
}
}), loopEventListener(bar_context, "click", false, function(event) {
g.audio.currentTime = getTime(bar_context, event.clientX);
bar_context.value = g.audio.currentTime;
g.video.currentTime = g.audio.currentTime;
g.audio.play();
g.video.play();
command_context.innerHTML = "stop";
}), loopEventListener(bar_context, "mousemove", false, function(event) {
var time = getTime(bar_context, event.clientX);
......@@ -254,5 +279,7 @@
g.gain = audioCtx.createGain();
g.filter = audioCtx.createBiquadFilter();
g.canvas = g.__element.getElementsByTagName("canvas")[0];
g.video = g.__element.getElementsByTagName("video")[0];
g.video.volume = 0;
});
})(window, rJS, RSVP, loopEventListener, jQuery, promiseEventListener);
\ No newline at end of file
dev/audioplayer_control/index.html
View file @ aa60d3b9
......@@ -42,8 +42,18 @@
<audio controls>
<type="audio/mpeg">
Your browser does not support the audio tag.
</audio>
<div id="video">
<video id="videoControl">
<type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
<div data-role="collapsible" data-collapsed-icon="gear" data-expanded-icon="minus">
<h1>Equalizer</h1>
<div data-role="fieldcontain">
......
dev/audioplayer_upload/upload.js
View file @ aa60d3b9
......@@ -26,7 +26,7 @@
var now = new Date();
return g.jio_post({
title: input_context.files[uploaded].name,
type: "file",
type: input_context.files[uploaded].type,
format: input_context.files[uploaded].type,
size: input_context.files[uploaded].size,
modified: now.toUTCString(),
......
src/audioplayer_control/control.js
View file @ aa60d3b9
......@@ -78,7 +78,7 @@
gadget.analyser.getByteFrequencyData(array);
return array;
}
function setSong(url) { //configure a song
function set(url) { //configure a song
var gadget = this;
gadget.source.connect(gadget.filter);
gadget.filter.connect(gadget.analyser);
......@@ -86,6 +86,10 @@
gadget.gain.connect(audioCtx.destination);
gadget.audio.src = url;
gadget.audio.load();
if (gadget.type === "video/mp4") {
gadget.video.src = url;
gadget.video.load();
}
}
function promiseRequestAnimation(callback) {
......@@ -115,7 +119,7 @@
return new RSVP.Promise(resolver, canceller);
}
function playSong() {
function play() {
var that = this,
canvas = that.canvas,
canvasCtx = canvas.getContext('2d'),
......@@ -126,6 +130,7 @@
meterNum = 300,
array,
drawFrame,
showTime,
step,
i,
value,
......@@ -136,6 +141,7 @@
gradient.addColorStop(0.5, '#ff0');
gradient.addColorStop(0, '#f00');
that.audio.play();
that.video.play();
drawFrame = function () {
array = getFFTValue(that);
canvasCtx.clearRect(0, 0, cwidth, cheight);
......@@ -152,7 +158,19 @@
cheight); //the meter
}
};
return promiseRequestAnimation(drawFrame);
showTime = function () {
bar_context.value = that.audio.currentTime;
time_context.innerHTML = timeFormat(that.audio.duration -
that.audio.currentTime);
};
if (that.type !== "video/mp4") {
canvas.style.display = "";
that.video.style.display = "none";
return promiseRequestAnimation(drawFrame);
}
that.video.style.display = "";
canvas.style.display = "none";
return promiseRequestAnimation(showTime);
}
gk.declareAcquiredMethod("jio_getAttachment", "jio_getAttachment")
......@@ -189,6 +207,7 @@
share_context.href =
"https://twitter.com/intent/tweet?hashtags=MusicPlayer&text="
+ encodeURI(result.data.title);
g.type = result.data.type;
return g.displayThisTitle(options.action + " : "
+ result.data.title);
})
......@@ -243,7 +262,7 @@
bar_context.value = 0;
return new RSVP.Queue()
.push(function () {
setSong.call(g, g.url);
set.call(g, g.url);
return promiseEventListener(g.audio, "loadedmetadata", false);
})
.push(function () {
......@@ -269,7 +288,7 @@
$(time_context).offset().top = $(bar_context).offset().top + 3;
time_context.innerHTML = timeFormat(g.audio.duration);
return RSVP.any([
playSong.call(g),
play.call(g),
loopEventListener(mute_context, "click", false, function () {
mute_context.innerHTML = g.gain.gain.value ?
"mute on" : "mute off";
......@@ -281,6 +300,10 @@
if (loop) {
g.audio.load();
g.audio.play();
if (g.type === "video/mp4") {
g.video.load();
g.video.play();
}
} else {
window.location = g.__element
.getElementsByClassName("next")[0].href;
......@@ -290,9 +313,11 @@
loopEventListener(command_context, "click", false, function () {
if (g.audio.paused) {
g.audio.play();
g.video.play();
command_context.innerHTML = "stop";
} else {
g.audio.pause();
g.video.pause();
command_context.innerHTML = "play";
}
}),
......@@ -300,7 +325,9 @@
loopEventListener(bar_context, "click", false, function (event) {
g.audio.currentTime = getTime(bar_context, event.clientX);
bar_context.value = g.audio.currentTime;
g.video.currentTime = g.audio.currentTime;
g.audio.play();
g.video.play();
command_context.innerHTML = "stop";
}),
......@@ -341,5 +368,7 @@
g.gain = audioCtx.createGain();
g.filter = audioCtx.createBiquadFilter();
g.canvas = g.__element.getElementsByTagName('canvas')[0];
g.video = g.__element.getElementsByTagName('video')[0];
g.video.volume = 0;
});
}(window, rJS, RSVP, loopEventListener, jQuery, promiseEventListener));
src/audioplayer_control/control.less
View file @ aa60d3b9
......@@ -4,8 +4,14 @@ width : 10em;
#visualizer {
text-align: center;
}
#video {
text-align: center;
}
video#videoControl {
width: 50%;
height: 20%;
}
canvas#can{
width: 50%;
height: 20%;
......
src/audioplayer_control/index.html
View file @ aa60d3b9
......@@ -42,8 +42,18 @@
<audio controls>
<type="audio/mpeg">
Your browser does not support the audio tag.
</audio>
<div id="video">
<video id="videoControl">
<type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
<div data-role="collapsible" data-collapsed-icon="gear" data-expanded-icon="minus">
<h1>Equalizer</h1>
<div data-role="fieldcontain">
......
src/audioplayer_upload/upload.js
View file @ aa60d3b9
......@@ -42,7 +42,7 @@
}
var now = new Date();
return g.jio_post({ "title" : input_context.files[uploaded].name,
"type" : "file",
"type" : input_context.files[uploaded].type,
"format" : input_context.files[uploaded].type,
"size" : input_context.files[uploaded].size,
"modified" : now.toUTCString(),
......
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