Waiting
-
+
-
+
Start Recording
- End Recording
+ End Recording
-
-
{AsyncCodePlayground({updateEditor: this.updateEditor, registerEditorState: this.registerEditor})}
-
-
-
-
+
);
}
});
/* Module.exports instead of normal dom mounting */
module.exports.FollowApp = FollowApp;
-
-//
+
+
+ )
+ }
+});
+
+module.exports = Player;
diff --git a/app/scripts/components/recording_actions/pause-recording-btn.js b/app/scripts/components/recording_actions/pause-recording-btn.js
new file mode 100644
index 0000000..a0e6085
--- /dev/null
+++ b/app/scripts/components/recording_actions/pause-recording-btn.js
@@ -0,0 +1,30 @@
+/** @jsx React.DOM */
+var React = require('react');
+var FCActions = require('../../actions/fc-actions');
+
+var PauseRecordingBtn = React.createClass({
+ propTypes: {
+ audioIsPlaying: React.PropTypes.bool
+ },
+
+ /**
+ * Handles click and broadcasts pauses audio and video
+ */
+ handleClick: function(){
+ FCActions.pauseAudio();
+ FCActions.pauseVideo();
+ },
+
+ render: function(){
+ // If we audio playing - display the pause button
+ var display = this.props.audioIsPlaying ? {display: 'inline-block'} : {display: 'none'};
+
+ return (
+
+
+
+ )
+ }
+});
+
+module.exports = PauseRecordingBtn;
diff --git a/app/scripts/components/recording_actions/recording-actions.js b/app/scripts/components/recording_actions/recording-actions.js
new file mode 100644
index 0000000..25f1c0e
--- /dev/null
+++ b/app/scripts/components/recording_actions/recording-actions.js
@@ -0,0 +1,74 @@
+/** @jsx React.DOM */
+var React = require('react');
+
+// Stores
+var RecorderStore = require('../../stores/recorder');
+var AudioStore = require('../../stores/audio');
+var VideoStore = require('../../stores/video');
+
+// Components
+var RecordingState = require('./recording-state.js');
+var ReplayRecordingBtn = require('./replay-recording-btn.js');
+var StopRecordingBtn = require('./stop-recording-btn');
+var StartRecordingBtn = require('./start-recording-btn');
+var PauseRecordingBtn = require('./pause-recording-btn');
+var Visualizer = require('./visualizer');
+
+// Access state methods
+function _getRecorder(){
+ return { recorder: RecorderStore.getRecorder() };
+}
+function _getAudio(){
+ return { audio: AudioStore.getAudio() };
+}
+function _getVideo(){
+ return { video: VideoStore.getVideo() };
+}
+
+var RecordingActions = React.createClass({
+ getInitialState: function(){
+ return {
+ recorder: _getRecorder().recorder,
+ video: _getVideo().video,
+ audio: _getAudio().audio
+ }
+ },
+
+
+ /**
+ * Register specific changes in state
+ */
+ componentWillMount: function() {
+ RecorderStore.addChangeListener(this._recorderChange);
+ AudioStore.addChangeListener(this._audioChange);
+ VideoStore.addChangeListener(this._videoChange);
+ },
+
+ /*** State setters ***/
+ _recorderChange: function() {
+ this.setState(_getRecorder());
+ },
+ _audioChange: function(){
+ this.setState(_getAudio());
+ },
+ _videoChange: function(){
+ this.setState(_getVideo())
+ },
+
+ render: function(){
+ return (
+
+
+ )
+ }
+});
+
+module.exports = RecordingActions;
diff --git a/app/scripts/components/recording_actions/recording-state.js b/app/scripts/components/recording_actions/recording-state.js
new file mode 100644
index 0000000..09880b7
--- /dev/null
+++ b/app/scripts/components/recording_actions/recording-state.js
@@ -0,0 +1,19 @@
+/** @jsx React.DOM */
+var React = require('react');
+
+var RecordingState = React.createClass({
+ propTypes: {
+ isRecording: React.PropTypes.bool
+ },
+
+ render: function(){
+ var recording = this.props.isRecording ? 'recording' : '';
+ return (
+
+
+
+
+
+
+
+
+
+
+
+ )
+ }
+});
+
+module.exports = RecordingState;
diff --git a/app/scripts/components/recording_actions/replay-recording-btn.js b/app/scripts/components/recording_actions/replay-recording-btn.js
new file mode 100644
index 0000000..0b670a5
--- /dev/null
+++ b/app/scripts/components/recording_actions/replay-recording-btn.js
@@ -0,0 +1,31 @@
+/** @jsx React.DOM */
+var React = require('react');
+var FCActions = require('../../actions/fc-actions');
+
+var ReplayBtn = React.createClass({
+ propTypes: {
+ videoIsReady: React.PropTypes.bool,
+ audioIsReady: React.PropTypes.bool,
+ audioIsPlaying: React.PropTypes.bool
+ },
+
+ /**
+ * Handles click on Replay Recording Btn and starts screencast
+ */
+ handleClick: function(){
+ FCActions.playbackAudio();
+ FCActions.playbackVideo();
+ },
+
+ render: function(){
+ // If we have a video ready, audio ready, and are not currently playing - display the playback button
+ var display = this.props.videoIsReady && this.props.audioIsReady && !this.props.audioIsPlaying ? {display: 'inline-block'} : {display: 'none'};
+ return (
+
+
+
+ )
+ }
+});
+
+module.exports = ReplayBtn;
diff --git a/app/scripts/components/recording_actions/start-recording-btn.js b/app/scripts/components/recording_actions/start-recording-btn.js
new file mode 100644
index 0000000..ecbbb50
--- /dev/null
+++ b/app/scripts/components/recording_actions/start-recording-btn.js
@@ -0,0 +1,33 @@
+/** @jsx React.DOM */
+var React = require('react');
+var FCActions = require('../../actions/fc-actions');
+
+var StartRecordingBtn = React.createClass({
+ propTypes: {
+ recordingIsAllowable: React.PropTypes.bool,
+ isRecording: React.PropTypes.bool,
+ audioIsPlaying: React.PropTypes.bool
+ },
+
+ /**
+ * Handles click on StartRecordingBtn
+ */
+ startRecording: function(){
+ FCActions.startRecordingVideo();
+ FCActions.startRecordingAudio();
+ },
+
+ render: function(){
+ // If recording is allowable for this browser, and we are not currently recording or playing
+ var display = this.props.recordingIsAllowable && !this.props.isRecording && !this.props.audioIsPlaying ?
+ {display: 'inline-block'} : {display: 'none'};
+
+ return (
+
+
+
+ )
+ }
+});
+
+module.exports = StartRecordingBtn;
diff --git a/app/scripts/components/recording_actions/stop-recording-btn.js b/app/scripts/components/recording_actions/stop-recording-btn.js
new file mode 100644
index 0000000..bd6f701
--- /dev/null
+++ b/app/scripts/components/recording_actions/stop-recording-btn.js
@@ -0,0 +1,30 @@
+/** @jsx React.DOM */
+var React = require('react');
+var FCActions = require('../../actions/fc-actions');
+
+var StopRecordingBtn = React.createClass({
+ propTypes: {
+ isRecording: React.PropTypes.bool
+ },
+
+ /**
+ * Handles click on StopRecordingBtn
+ */
+ handleClick: function(){
+ FCActions.stopRecordingVideo();
+ FCActions.stopRecordingAudio();
+ //FCActions.createAudioPlayback();
+ //FCActions.createVideoFormat();
+ },
+
+ render: function(){
+ var display = this.props.isRecording ? {display: 'inline-block'} : {display: 'none'};
+ return (
+
+
+
+ )
+ }
+});
+
+module.exports = StopRecordingBtn;
diff --git a/app/scripts/components/recording_actions/visualizer.js b/app/scripts/components/recording_actions/visualizer.js
new file mode 100644
index 0000000..8958fd0
--- /dev/null
+++ b/app/scripts/components/recording_actions/visualizer.js
@@ -0,0 +1,112 @@
+/** @jsx React.DOM */
+var React = require('react');
+var FCActions = require('../../actions/fc-actions');
+
+// Stores
+var RecorderStore = require('../../stores/recorder');
+var AudioStore = require('../../stores/audio');
+
+// Local cache for local calculations
+var previousPhase = undefined;
+var currentPhase = undefined;
+var firstTime = undefined;
+var analyserNode = null;
+var zeroGain = null;
+var analyserContext = null;
+
+function _isBeginningPhase( currentPhase ){
+ if (previousPhase === 'unstarted' && currentPhase === 'started') { return true; }
+ else { return false; }
+}
+
+function _isMainPhase( currentPhase ){
+ if (previousPhase === 'started' && currentPhase === 'main') { return true; }
+ else { return false; }
+}
+
+var Visualizer = React.createClass({
+
+ _handlePhase: function(){
+ currentPhase = this.props.phase;
+
+ // Handle each phase
+ if ( _isBeginningPhase( currentPhase ) ){
+ console.log('we are in the beginning phase');
+ this._createAudioVisualizer();
+
+ setTimeout(function(){
+ FCActions.startMainPhaseRecording();
+ }, 3000)
+ } else if ( _isMainPhase( currentPhase ) ){
+ console.log('main phase');
+ // deregister event listener
+ }
+ previousPhase = currentPhase
+ },
+
+ _updateAnalysers: function(time) {
+ // If we don't have a firstTime and time is a number
+ if (!firstTime && !isNaN(parseFloat(time)) && isFinite(time)) { firstTime = time; }
+ // Normalized time from first start of updating analysers
+ if (time - firstTime > 5000) { return; }
+ if (!analyserContext) {
+
+ var canvas = this.refs.canvas.getDOMNode();
+ canvasWidth = canvas.width;
+ canvasHeight = canvas.height;
+ analyserContext = canvas.getContext('2d');
+ }
+
+ var SPACING = 12;
+ var BAR_WIDTH = 12;
+ var numBars = Math.round(canvasWidth / SPACING);
+ var freqByteData = new Uint8Array(analyserNode.frequencyBinCount);
+
+ analyserNode.getByteFrequencyData(freqByteData);
+
+ analyserContext.clearRect(0, 0, canvasWidth, canvasHeight);
+ analyserContext.fillStyle = '#912590';
+ analyserContext.lineCap = 'round';
+ var multiplier = analyserNode.frequencyBinCount / numBars;
+ var step = Math.round(freqByteData.length / numBars);
+ // Draw rectangle for each frequency bin.
+ for (var i = 0; i < numBars; ++i) {
+
+ var value = freqByteData[i * step];
+ var magnitude = 0;
+ var offset = Math.floor( i * multiplier );
+ for (var j = 0; j< multiplier; j++)
+ magnitude += freqByteData[offset + j];
+ magnitude = magnitude / multiplier;
+ analyserContext.fillRect(i * (SPACING + 4), canvasHeight - (value / 10), BAR_WIDTH, 40);
+ }
+
+
+ window.requestAnimationFrame( this._updateAnalysers );
+ },
+
+ /**
+ * Create a brief visualization of our in progress audio recording
+ */
+ _createAudioVisualizer: function(){
+ var audio = this.props.audio;
+ analyserNode = audio.audioContext.createAnalyser();
+ analyserNode.fftSize = 2048;
+ audio.sound.connect( analyserNode );
+
+ zeroGain = audio.audioContext.createGain();
+ zeroGain.gain.value = 0.0;
+ audio.sound.connect( zeroGain );
+ zeroGain.connect( audio.audioContext.destination );
+ this._updateAnalysers();
+ },
+
+ render: function(){
+ this._handlePhase();
+ return (
+
+ )
+ }
+});
+
+module.exports = Visualizer;
diff --git a/app/scripts/constants/fc-constants.js b/app/scripts/constants/fc-constants.js
index 32edbd9..7a127da 100644
--- a/app/scripts/constants/fc-constants.js
+++ b/app/scripts/constants/fc-constants.js
@@ -1,7 +1,39 @@
module.exports = {
// Map a list of actions
- STOP_RECORDING : 'STOP_RECORDING',
- CREATE_VIDEO_FORMAT : 'CREATE_VIDEO_FORMAT'
+ //todo: possibly register these actions not as view actions (look into)
+ REGISTER_VAI : 'REGISTER_VAI',
+ REGISTER_AUDIO : 'REGISTER_AUDIO',
+ REGISTER_RECORDER : 'REGISTER_RECORDER',
+ REGISTER_PLAYBACK_INTERVAL_IDS: 'REGISTER_PLAYBACK_INTERVAL_IDS',
+ REGISTER_PLAYBACK_START_TIME : 'REGISTER_PLAYBACK_START_TIME',
+ RECORDER_NOT_ALLOWABLE : 'RECORDER_NOT_ALLOWABLE',
+
+ START_RECORDING_VIDEO : 'START_RECORDING_VIDEO',
+ START_RECORDING_AUDIO : 'START_RECORDING_AUDIO',
+ MAIN_PHASE_RECORDING : 'MAIN_PHASE_RECORDING',
+
+ CODING_EVENT : 'CODING_EVENT',
+
+ STOP_RECORDING_VIDEO : 'STOP_RECORDING_VIDEO',
+ STOP_RECORDING_AUDIO : 'STOP_RECORDING_AUDIO',
+ REGISTER_AUDIO_FILE : 'REGISTER_AUDIO_FILE',
+ CREATE_VIDEO_FORMAT : 'CREATE_VIDEO_FORMAT',
+ PLAYBACK_VIDEO : 'PLAYBACK_VIDEO',
+ CURRENT_TICK : 'CURRENT_TICK',
+ PLAYBACK_AUDIO : 'PLAYBACK_AUDIO',
+
+ // Playback actions
+ //PLAY_AUDIO : 'PAUSE_AUDIO'
+ PAUSE_AUDIO : 'PAUSE_AUDIO',
+ PAUSE_VIDEO : 'PAUSE_VIDEO',
+ PAUSED_VIDEO_STATE : 'PAUSED_VIDEO_STATE',
+ PAUSED_VIDEO_TIME : 'PAUSED_VIDEO_TIME'
+ // PLAY_SCREENCAST
+ // PAUSE_SCREENCAST
+ // SAVE_SCREENCAST?
+
+
+
//ADD_ITEM: 'ADD_ITEM',
//REMOVE_ITEM: 'REMOVE_ITEM',
//INCREASE_ITEM: 'INCREASE_ITEM',
diff --git a/app/scripts/dispatcher/dispatcher.js b/app/scripts/dispatcher/dispatcher.js
index b6e452a..371d27a 100644
--- a/app/scripts/dispatcher/dispatcher.js
+++ b/app/scripts/dispatcher/dispatcher.js
@@ -1,4 +1,4 @@
-var Promise = require('es6-promise').Promise;
+var Promise = require('es6-promise-polyfill').Promise;
var _ = require('lodash');
var _callbacks = [];
diff --git a/app/scripts/stores/__tests__/audio-test.js b/app/scripts/stores/__tests__/audio-test.js
new file mode 100644
index 0000000..eaa837d
--- /dev/null
+++ b/app/scripts/stores/__tests__/audio-test.js
@@ -0,0 +1,91 @@
+jest.dontMock('../audio');
+jest.dontMock('../../dispatcher/fc-dispatcher');
+
+var AudioStore = require('../audio');
+var FCConstants = require('../../constants/fc-constants');
+var FCDispatcher = require('../../dispatcher/fc-dispatcher');
+var AppDispatcher = require('../../dispatcher/dispatcher');
+
+describe('AudioStoreEvents', function() {
+ var callback;
+
+
+ var registerAudio = {
+ actionType: FCConstants.REGISTER_AUDIO,
+ audio: require('../../async/audio')
+ };
+
+ var registerAudioFile = {
+ actionType: FCConstants.REGISTER_AUDIO_FILE,
+ audioFile: 'blobFile.wav'
+ };
+
+ var playbackAudio = {
+ actionType: FCConstants.PLAYBACK_AUDIO
+ };
+
+ var pauseAudio = {
+ actionType: FCConstants.PAUSE_AUDIO
+ };
+
+ beforeEach(function() {
+ dispatcher = new AppDispatcher();
+ callback = jest.genMockFunction();
+ });
+ //it('expects audio to be registered', function(){
+ // dispatcher.register(function(payload) {
+ // callback(payload);
+ // });
+ // di
+ //
+ // expect(callback.mock.calls.length).toBe(1);
+ //
+ // callback(registerAudio);
+ // var audio = AudioStore.getAudio();
+ // console.log(audio);
+ // expect(audio.isPlaying).toBe(false);
+
+ //expect(callback.mock.calls.length).toBe(1);
+ //expect(callback.mock.calls[0][0]).toBe(payload);
+
+ //});
+
+ it('expects an audio object to be registered', function() {
+ FCDispatcher.handleViewAction(registerAudio);
+
+ var audio = AudioStore.getAudio();
+ expect(audio).toBeDefined();
+ expect(audio.isPlaying).toBe(false);
+
+ });
+
+ it('expects an audio file object to be registered upon completion', function() {
+ FCDispatcher.handleViewAction(registerAudioFile);
+
+ var audio = AudioStore.getAudio();
+ expect(audio.audioFile).toEqual('blobFile.wav');
+ expect(audio.isReady).toBe(true);
+
+ });
+
+ it('should start playing audio when played', function() {
+ FCDispatcher.handleViewAction(playbackAudio);
+
+ var audio = AudioStore.getAudio();
+ expect(audio.isPlaying).toBe(true);
+
+ });
+
+ it('should pause audio when paused', function() {
+ FCDispatcher.handleViewAction(pauseAudio);
+
+ var audio = AudioStore.getAudio();
+ expect(audio.isPlaying).toBe(false);
+
+ });
+
+
+
+
+
+});
diff --git a/app/scripts/stores/audio.js b/app/scripts/stores/audio.js
new file mode 100644
index 0000000..691b2da
--- /dev/null
+++ b/app/scripts/stores/audio.js
@@ -0,0 +1,118 @@
+/**
+ * Audio Store manages our audio data
+ */
+
+// --- Dependencies --- //
+var _ = require('lodash');
+var EventEmitter = require('events').EventEmitter;
+var FCConstants = require('../constants/fc-constants');
+var FCDispatcher = require('../dispatcher/fc-dispatcher');
+
+// Managing a private audio data
+var _audio = {};
+
+
+// --- Private Store Methods --- //
+/**
+ * Mutable function registers a reference to a previously created audio object
+ * @param {object} audio
+ */
+function _registerAudio( audio ){
+ _audio = audio;
+ _audio.isPlaying = false;
+ console.log('the current audio->', _audio);
+}
+
+/**
+ * Mutable function registers the url path of the audio blob in local storage
+ * @param audioFile
+ */
+function _registerAudioFile( audioFile ){
+ _audio.audioFile = audioFile;
+ _audio.isReady = true;
+}
+
+/**
+ * Mutable functions changing audio's isPlaying state
+ */
+function _playbackAudio(){
+ _audio.isPlaying = true;
+}
+function _pauseAudio(){
+ _audio.isPlaying = false;
+}
+
+// --- Public Store Methods --- //
+var CHANGE_EVENT = 'change';
+
+var AudioStore = _.extend(EventEmitter.prototype, {
+ // Really the only thing we want to do is notify view of audio creation
+ // Alternatively, if we were to ever have an audio visualizer, this might be something that we notify view
+ emitChange: function() {
+ this.emit(CHANGE_EVENT);
+ },
+
+ /**
+ * @param {function} callback
+ */
+ addChangeListener: function(callback) {
+ this.on(CHANGE_EVENT, callback);
+ },
+
+ /**
+ * @param {function} callback
+ */
+ removeChangeListener: function(callback) {
+ this.removeListener(CHANGE_EVENT, callback);
+ },
+
+ /**
+ * Returns the current audio state
+ * @returns {object} _audio
+ */
+ getAudio: function(){
+ return _audio;
+ },
+
+ dispatcherIndex: FCDispatcher.register(function(payload) {
+ var action = payload.action;
+ var audio = action.audio || '';
+
+ switch(action.actionType) {
+ case FCConstants.REGISTER_AUDIO:
+ _registerAudio(audio);
+ AudioStore.emitChange();
+ break;
+
+ case FCConstants.REGISTER_AUDIO_FILE:
+ _registerAudioFile(action.audioFile);
+ AudioStore.emitChange();
+ break;
+
+ case FCConstants.PLAYBACK_AUDIO:
+ _playbackAudio();
+ AudioStore.emitChange();
+ break;
+
+ case FCConstants.PAUSE_AUDIO:
+ _pauseAudio();
+ AudioStore.emitChange();
+ break;
+
+ //case FCConstants.START_RECORDING_AUDIO:
+ // createAudioVisualizer();
+ // AudioStore.emitChange();
+ // break;
+ // add more cases for other actionTypes
+ }
+
+ return true; // No errors. Needed by promise in Dispatcher.
+ })
+});
+
+
+module.exports = AudioStore;
+
+
+
+
diff --git a/app/scripts/stores/player.js b/app/scripts/stores/player.js
new file mode 100644
index 0000000..0e114e2
--- /dev/null
+++ b/app/scripts/stores/player.js
@@ -0,0 +1,78 @@
+/**
+ * Player Store manages our playback synchronicity between audio and video
+ */
+
+// --- Dependencies --- //
+var _ = require('lodash');
+var EventEmitter = require('events').EventEmitter;
+var FCConstants = require('../constants/fc-constants');
+var FCDispatcher = require('../dispatcher/fc-dispatcher');
+
+// Managing a private player state
+var _player = {
+ currentTime: 0
+};
+
+
+// --- Private Store Methods --- //
+// Private store methods go here
+function _changePlayTime( currentTime ){
+ _player.currentTime = currentTime;
+}
+
+// --- Public Store Methods --- //
+var CHANGE_EVENT = 'change';
+var PlayerStore = _.extend(EventEmitter.prototype, {
+ /**
+ * Emitting change events
+ */
+ emitChange: function() {
+ this.emit(CHANGE_EVENT);
+ },
+
+ /**
+ * @param {function} callback
+ */
+ addChangeListener: function(callback) {
+ this.on(CHANGE_EVENT, callback);
+ },
+
+ /**
+ * @param {function} callback
+ */
+ removeChangeListener: function(callback) {
+ this.removeListener(CHANGE_EVENT, callback);
+ },
+
+ /**
+ * Returns the current player state
+ * @returns {object} _player
+ */
+ getPlayer: function(){
+ return _player;
+ },
+
+ dispatcherIndex: FCDispatcher.register(function(payload) {
+ var action = payload.action;
+
+ switch(action.actionType) {
+ case FCConstants.CHANGE_PLAY_TIME:
+ console.log('payload in player change', payload);
+ _changePlayTime(payload.currentTime);
+ PlayerStore.emitChange();
+ console.log('emitting from playerStore...')
+ break;
+
+ // add more cases for other actionTypes
+ }
+
+ return true; // No errors. Needed by promise in Dispatcher.
+ })
+});
+
+
+module.exports = PlayerStore;
+
+
+
+
diff --git a/app/scripts/stores/recorder.js b/app/scripts/stores/recorder.js
new file mode 100644
index 0000000..b671ee7
--- /dev/null
+++ b/app/scripts/stores/recorder.js
@@ -0,0 +1,194 @@
+/**
+ * Recorder Store manages our recorder object and data and through API, our audio
+ */
+
+// --- Dependencies --- //
+var _ = require('lodash');
+var EventEmitter = require('events').EventEmitter;
+var FCActions = require('../actions/fc-actions');
+var FCConstants = require('../constants/fc-constants');
+var FCDispatcher = require('../dispatcher/fc-dispatcher');
+
+// A recorder data object that manages the API for a recording
+var _recorder = {};
+
+//todo: move this visualization into the component directory
+/**
+ * Draw the completed audio into a wave graph
+ * @param width
+ * @param height
+ * @param context
+ * @param data
+ */
+function drawBuffer( width, height, context, data ) {
+ console.log('drawing buffer');
+ var step = Math.ceil( data.length / width );
+ var amp = height / 2;
+ context.fillStyle = "silver";
+ context.clearRect(0,0,width,height);
+ for(var i=0; i < width; i++){
+ var min = 1.0;
+ var max = -1.0;
+ for (j=0; j
+
+
+
+
+
+
+
diff --git a/app/styles/fonts/fontcustom_9d31e57057239d5c84c067dc119bc27f.eot b/app/styles/fonts/fontcustom_9d31e57057239d5c84c067dc119bc27f.eot
new file mode 100644
index 0000000..5eff37f
Binary files /dev/null and b/app/styles/fonts/fontcustom_9d31e57057239d5c84c067dc119bc27f.eot differ
diff --git a/app/styles/fonts/fontcustom_9d31e57057239d5c84c067dc119bc27f.svg b/app/styles/fonts/fontcustom_9d31e57057239d5c84c067dc119bc27f.svg
new file mode 100644
index 0000000..de3c416
--- /dev/null
+++ b/app/styles/fonts/fontcustom_9d31e57057239d5c84c067dc119bc27f.svg
@@ -0,0 +1,63 @@
+
+
+
+
diff --git a/app/styles/fonts/fontcustom_9d31e57057239d5c84c067dc119bc27f.ttf b/app/styles/fonts/fontcustom_9d31e57057239d5c84c067dc119bc27f.ttf
new file mode 100644
index 0000000..8d25507
Binary files /dev/null and b/app/styles/fonts/fontcustom_9d31e57057239d5c84c067dc119bc27f.ttf differ
diff --git a/app/styles/fonts/fontcustom_9d31e57057239d5c84c067dc119bc27f.woff b/app/styles/fonts/fontcustom_9d31e57057239d5c84c067dc119bc27f.woff
new file mode 100644
index 0000000..a065e55
Binary files /dev/null and b/app/styles/fonts/fontcustom_9d31e57057239d5c84c067dc119bc27f.woff differ
diff --git a/app/styles/global/_animations.scss b/app/styles/global/_animations.scss
new file mode 100644
index 0000000..131b527
--- /dev/null
+++ b/app/styles/global/_animations.scss
@@ -0,0 +1,39 @@
+@-webkit-keyframes recordingPulse {
+ 0% {
+ -webkit-transform: scale3d(1, 1, 1);
+ transform: scale3d(1, 1, 1);
+ color: $baseRecordingRed;
+ }
+
+ 50% {
+ -webkit-transform: scale3d(1.15, 1.15, 1.15);
+ transform: scale3d(1.15, 1.15, 1.15);
+ color: $growthRecordingRed;
+ }
+
+ 100% {
+ -webkit-transform: scale3d(1, 1, 1);
+ transform: scale3d(1, 1, 1);
+ color: $baseRecordingRed;
+ }
+}
+
+@keyframes recordingPulse {
+ 0% {
+ -webkit-transform: scale3d(1, 1, 1);
+ transform: scale3d(1, 1, 1);
+ color: $baseRecordingRed;
+ }
+
+ 50% {
+ -webkit-transform: scale3d(1.05, 1.05, 1.05);
+ transform: scale3d(1.05, 1.05, 1.05);
+ color: $growthRecordingRed;
+ }
+
+ 100% {
+ -webkit-transform: scale3d(1, 1, 1);
+ transform: scale3d(1, 1, 1);
+ color: $baseRecordingRed;
+ }
+}
diff --git a/app/styles/global/_fonts.scss b/app/styles/global/_fonts.scss
deleted file mode 100644
index e69de29..0000000
diff --git a/app/styles/global/_variables.scss b/app/styles/global/_variables.scss
new file mode 100644
index 0000000..40b8324
--- /dev/null
+++ b/app/styles/global/_variables.scss
@@ -0,0 +1,9 @@
+//Colors
+$purpleAction: rgb(182, 109, 226);
+$graySlightBlue: rgb(37, 38, 45);
+$lighterGrayBlue: rgb(47, 48, 55);
+$deepGrayBlue: rgb(28, 29, 36);
+$inertRecording: rgb(65, 53, 57);
+
+$baseRecordingRed: rgba(237, 43, 108, 0.50);
+$growthRecordingRed: rgba(237, 43, 108, 0.660);
diff --git a/app/styles/layout/_layout.scss b/app/styles/layout/_layout.scss
index 49bd235..33646c2 100644
--- a/app/styles/layout/_layout.scss
+++ b/app/styles/layout/_layout.scss
@@ -1,9 +1,13 @@
body {
background: #31322F;
+ font-size: 16px;
}
// mounted div for app
#app > div {
- height: 95%;
- position: fixed;
+ height: 100%;
+ width: 100%;
+ position: absolute;
+ top: 0;
+ left: 0;
}
diff --git a/app/styles/main.scss b/app/styles/main.scss
index 07585bf..421c8f0 100644
--- a/app/styles/main.scss
+++ b/app/styles/main.scss
@@ -4,7 +4,9 @@
//--- Global
// Global information that allow us to cascade information
// Font, Color variables, etc
-@import "global/fonts";
+@import "global/variables";
+@import "global/animations";
+@import "fonts/fontcustom";
//--- Layout
// Abstract and related to the positioning of global elements
@@ -19,6 +21,7 @@
// Shared pieces or blocks on pages
// Forms, navigation
@import "components/ace";
+@import "components/recording-actions";
//--- Partials
// Unique differences on a per partial basis
diff --git a/bower.json b/bower.json
index 8bb94f0..1142b68 100644
--- a/bower.json
+++ b/bower.json
@@ -2,7 +2,6 @@
"name": "followcodes",
"version": "0.0.1",
"dependencies": {
- "jquery": "~2.1.1",
"bootstrap-sass-official": ">=3.3.0",
"modernizr": "^2.8.3"
}
diff --git a/gulpfile.js b/gulpfile.js
index 5b571d8..bb506c4 100644
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -52,6 +52,12 @@ gulp.task('scripts', function () {
});
+gulp.task('workers', function () {
+ gulp.src('app/scripts/async/_recorderWorker.js', {base: 'app/scripts'})
+ .pipe(gulp.dest('dist/scripts/'));
+
+});
+
gulp.task('json', function() {
gulp.src('app/scripts/json/**/*.json', {base: 'app/scripts'})
.pipe(gulp.dest('dist/scripts/'));
@@ -77,6 +83,11 @@ gulp.task('images', function () {
.pipe($.size());
});
+gulp.task('fonts', function() {
+ gulp.src('app/styles/fonts/*')
+ .pipe(gulp.dest('dist/styles'));
+});
+
// Jest Testing
gulp.task('jest', function () {
var nodeModules = path.resolve('./node_modules');
@@ -94,7 +105,7 @@ gulp.task('clean', function (cb) {
// Bundle
-gulp.task('bundle', ['styles', 'scripts', 'bower'], function(){
+gulp.task('bundle', ['styles', 'fonts', 'scripts', 'workers', 'bower'], function(){
return gulp.src('./app/*.html')
.pipe($.useref.assets())
.pipe($.useref.restore())
@@ -126,7 +137,7 @@ gulp.task('extras', function () {
});
// Watch
-gulp.task('watch', ['html', 'bundle', 'serve'], function () {
+gulp.task('watch', ['html', 'bundle', 'jest'], function () { // 'serve'
// Watch .json files
gulp.watch('app/scripts/**/*.json', ['json']);
// Watch .js files
@@ -143,4 +154,7 @@ gulp.task('watch', ['html', 'bundle', 'serve'], function () {
gulp.task('build', ['html', 'bundle', 'images', 'extras']);
// Default task
-gulp.task('default', ['clean', 'build', 'watch', 'serve' ]); //'jest',
+gulp.task('default', ['clean', 'build', 'watch', 'jest' ]); // 'serve'
+
+// Test
+gulp.task('test', ['jest' ]);
diff --git a/mockups-designs/beginning.rp b/mockups-designs/beginning.rp
new file mode 100644
index 0000000..842414f
Binary files /dev/null and b/mockups-designs/beginning.rp differ
diff --git a/package.json b/package.json
index 3c0f662..49f001b 100644
--- a/package.json
+++ b/package.json
@@ -7,10 +7,13 @@
"cookie-parser": "^1.3.4",
"ejs": "^2.3.1",
"es6-promise": "^2.0.1",
+ "es6-promise-polyfill": "^1.0.0",
+ "events": "^1.0.2",
"express": "^4.12.2",
"lodash": "^3.3.1",
"path": "^0.11.14",
- "react": "latest"
+ "react": "latest",
+ "react-tools": "^0.13.1"
},
"devDependencies": {
"browserify-shim": "^3.8.0",
@@ -29,6 +32,7 @@
"gulp-util": "~3.0.1",
"gulp-webserver": "latest",
"jest": "latest",
+ "jest-cli": "^0.4.0",
"node-jsx": "^0.12.4",
"reactify": "latest",
"vinyl-source-stream": "^1.0.0",
diff --git a/sandbox/ProgressButtonStyles/button.html b/sandbox/ProgressButtonStyles/button.html
new file mode 100644
index 0000000..8e6e67d
--- /dev/null
+++ b/sandbox/ProgressButtonStyles/button.html
@@ -0,0 +1,156 @@
+
+
+
+
+
+
+ fontcustom contains 9 glyphs:
+ Toggle Preview Characters +
+
+
+
+ PpPpPpPpPpPpPpPpPpPp
+
+
+ 12141618212436486072
+
+
+
+
+
+
+
+
+
+ PpPpPpPpPpPpPpPpPpPp
+
+
+ 12141618212436486072
+
+
+
+
+
+
+
+
+
+ PpPpPpPpPpPpPpPpPpPp
+
+
+ 12141618212436486072
+
+
+
+
+
+
+
+
+
+ PpPpPpPpPpPpPpPpPpPp
+
+
+ 12141618212436486072
+
+
+
+
+
+
+
+
+
+ PpPpPpPpPpPpPpPpPpPp
+
+
+ 12141618212436486072
+
+
+
+
+
+
+
+
+
+ PpPpPpPpPpPpPpPpPpPp
+
+
+ 12141618212436486072
+
+
+
+
+
+
+
+
+
+ PpPpPpPpPpPpPpPpPpPp
+
+
+ 12141618212436486072
+
+
+
+
+
+
+
+
+
+ PpPpPpPpPpPpPpPpPpPp
+
+
+ 12141618212436486072
+
+
+
+
+
+
+
+
+
+
+
+ PpPpPpPpPpPpPpPpPpPp
+
+
+ 12141618212436486072
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/sandbox/ProgressButtonStyles/js/5933-17f65e6063df008f3c413fea2ab9659188658b08-bsa.jpg b/sandbox/ProgressButtonStyles/js/5933-17f65e6063df008f3c413fea2ab9659188658b08-bsa.jpg
new file mode 100644
index 0000000..9d0ba30
Binary files /dev/null and b/sandbox/ProgressButtonStyles/js/5933-17f65e6063df008f3c413fea2ab9659188658b08-bsa.jpg differ
diff --git a/sandbox/ProgressButtonStyles/js/C6AILKT.json b/sandbox/ProgressButtonStyles/js/C6AILKT.json
new file mode 100644
index 0000000..dd90c0e
--- /dev/null
+++ b/sandbox/ProgressButtonStyles/js/C6AILKT.json
@@ -0,0 +1 @@
+_carbonads_go({"ads":[{"startingdate":"1405600200","org_zoneid":"1673","marketplace_zoneid":"1297933","styles":"","org_bannerid":"11696","statimp":"http://srv.buysellads.com/ads/imp/x/GTND423LCYAD6537CWY4YKQWCVSDEK7JCV7DVZ3JCE7DK53LCTSIPKQKC6BD62JYCVSIKK3EHJWNBADLKM7UCBZG2Y","zonekey":"C6AILKT","marketplace_siteid":"246311","org_creativeid":"15434","bannerid":"7720","html":"{\"fetch\":\"//adn.fusionads.net/launchbit/9533/developers/\"}","i":"1426830214","showbsalink":"0","zoneid":"1990","endingdate":"0","customcriterion":"","timestamp":"1426830214","width":"130","extendo_0":"1","evenodd":"0","statlink_default":"http://srv.buysellads.com/ads/click/x/GTND423LCYAD6537CWY4YKQWCVSDEK7JCV7DVZ3JCE7DK53LCTSIPKQKC6BD62JYCVSIKK3EHJNCLSIZZRLCP7I35MNFV","creativeid":"10207","link_default":"http://pro.buysellads.com/","buynow_url":"http://buysellads.com/buy/detail/246311/zone/1297933?utm_source=site_246311&utm_medium=website&utm_campaign=imagetext&utm_content=zone_1297933","height":"100","active":1},{}]});
\ No newline at end of file
diff --git a/sandbox/ProgressButtonStyles/js/carbon.js b/sandbox/ProgressButtonStyles/js/carbon.js
new file mode 100644
index 0000000..1967be0
--- /dev/null
+++ b/sandbox/ProgressButtonStyles/js/carbon.js
@@ -0,0 +1 @@
+var _carbonads={init:function(){var placement=this.getUrlVar('placement');var circle=this.getUrlVar('circle');var serve=this.getUrlVar('serve');var baseurl='srv.buysellads.com';if(window.location.protocol!='https:')baseurl='srv.carbonads.net';var pro=document.createElement('script');pro.id='_carbonads_projs';pro.type='text/javascript';pro.src='//'+baseurl+'/ads/'+serve+'.json?segment=placement:'+placement+'&callback=_carbonads_go';var ck=document.cookie,day=ck.indexOf('_bsap_daycap='),life=ck.indexOf('_bsap_lifecap=');day=day>=0?ck.substring(day+12+1).split(';')[0].split(','):[];life=life>=0?ck.substring(life+13+1).split(';')[0].split(','):[];if(day.length||life.length){var freqcap=[];for(var i=0;iProgress Button Styles Creative effects for loading buttons
+Without support for transform-style: preserve-3d you will see the fallback style (fill horizontal).
+
+
+
+
+
+
+
+
+
+
+ fill horizontal
+ +fill vertical
+ +shrink horizontal
+ +shrink vertical
+ +
+
+ rotate-angle-bottom
+
+
+
+ rotate-angle-top
+
+
+
+ rotate-angle-left
+
+
+
+ rotate-angle-right
+
+
+
+ rotate-angle-bottom
perspective
+
+ rotate-angle-top
perspective
+
+ rotate-angle-left
perspective
+
+ rotate-angle-right
perspective
+
+
+
+ rotate-side-down
+
+
+
+ rotate-side-up
+
+
+
+ rotate-side-left
+
+
+
+ rotate-side-right
+
+
+
+ rotate-side-down
perspective
+
+ rotate-side-up
perspective
+
+ rotate-side-left
perspective
+
+ rotate-side-right
perspective
+
+
+
+ rotate-back
+
+
+
+ flip-open
+
+
+
+ slide-down
+
+
+
+ move-up
+
+
+
+ rotate-back
perspective
+
+ flip-open
perspective
+
+ slide-down
horizontal
+
+ move-up
horizontal
+
+
+
+ top-line
+
+
+
+ lateral-lines
+
+
+
+
+
+ top-line
horizontal
+
+ lateral-lines
vertical
+
+
+
+
+
+
+ 
+ 
+
+
+
diff --git a/sandbox/audioPlusVisualizer/js/audiodisplay.js b/sandbox/audioPlusVisualizer/js/audiodisplay.js
new file mode 100644
index 0000000..043da42
--- /dev/null
+++ b/sandbox/audioPlusVisualizer/js/audiodisplay.js
@@ -0,0 +1,18 @@
+function drawBuffer( width, height, context, data ) {
+ var step = Math.ceil( data.length / width );
+ var amp = height / 2;
+ context.fillStyle = "silver";
+ context.clearRect(0,0,width,height);
+ for(var i=0; i < width; i++){
+ var min = 1.0;
+ var max = -1.0;
+ for (j=0; j
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/sandbox/audioTest/js/audiodisplay.js b/sandbox/audioTest/js/audiodisplay.js
new file mode 100644
index 0000000..a99622c
--- /dev/null
+++ b/sandbox/audioTest/js/audiodisplay.js
@@ -0,0 +1,18 @@
+function drawBuffer( width, height, context, data ) {
+ var step = Math.ceil( data.length / width );
+ var amp = height / 2;
+ context.fillStyle = "silver";
+ context.clearRect(0,0,width,height);
+ for(var i=0; i < width; i++){
+ var min = 1.0;
+ var max = -1.0;
+ for (j=0; j
+
+
+
+
+
+
+
diff --git a/sandbox/audioVisualizer/index.html b/sandbox/audioVisualizer/index.html
new file mode 100755
index 0000000..8f4c461
--- /dev/null
+++ b/sandbox/audioVisualizer/index.html
@@ -0,0 +1,26 @@
+
+
+
+
+
+
+
+ HTML5 Audio API showcase | An Audio Viusalizer
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/sandbox/audioVisualizer/js/html5_audio_visualizer.js b/sandbox/audioVisualizer/js/html5_audio_visualizer.js
new file mode 100755
index 0000000..560e791
--- /dev/null
+++ b/sandbox/audioVisualizer/js/html5_audio_visualizer.js
@@ -0,0 +1,239 @@
+window.onload = function() {
+ new Visualizer().ini();
+};
+var Visualizer = function() {
+ this.file = null; //the current file
+ this.fileName = null; //the current file name
+ this.audioContext = null;
+ this.source = null; //the audio source
+ this.info = document.getElementById('info').innerHTML; //this used to upgrade the UI information
+ this.infoUpdateId = null; //to sotore the setTimeout ID and clear the interval
+ this.animationId = null;
+ this.status = 0; //flag for sound is playing 1 or stopped 0
+ this.forceStop = false;
+ this.allCapsReachBottom = false;
+};
+Visualizer.prototype = {
+ ini: function() {
+ this._prepareAPI();
+ this._addEventListner();
+ },
+ _prepareAPI: function() {
+ //fix browser vender for AudioContext and requestAnimationFrame
+ window.AudioContext = window.AudioContext || window.webkitAudioContext || window.mozAudioContext || window.msAudioContext;
+ window.requestAnimationFrame = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.msRequestAnimationFrame;
+ window.cancelAnimationFrame = window.cancelAnimationFrame || window.webkitCancelAnimationFrame || window.mozCancelAnimationFrame || window.msCancelAnimationFrame;
+ try {
+ this.audioContext = new AudioContext();
+ } catch (e) {
+ this._updateInfo('!Your browser does not support AudioContext', false);
+ console.log(e);
+ }
+ },
+ _addEventListner: function() {
+ var that = this,
+ audioInput = document.getElementById('uploadedFile'),
+ dropContainer = document.getElementsByTagName("canvas")[0];
+ //listen the file upload
+ audioInput.onchange = function() {
+
+ if (that.audioContext===null) {return;};
+
+ //the if statement fixes the file selction cancle, because the onchange will trigger even the file selection been canceled
+ if (audioInput.files.length !== 0) {
+ //only process the first file
+ that.file = audioInput.files[0];
+ that.fileName = that.file.name;
+ if (that.status === 1) {
+ //the sound is still playing but we upload another file, so set the forceStop flag to true
+ that.forceStop = true;
+ };
+ document.getElementById('fileWrapper').style.opacity = 1;
+ that._updateInfo('Uploading', true);
+ //once the file is ready,start the visualizer
+ that._start();
+ };
+ };
+ //listen the drag & drop
+ dropContainer.addEventListener("dragenter", function() {
+ document.getElementById('fileWrapper').style.opacity = 1;
+ that._updateInfo('Drop it on the page', true);
+ }, false);
+ dropContainer.addEventListener("dragover", function(e) {
+ e.stopPropagation();
+ e.preventDefault();
+ //set the drop mode
+ e.dataTransfer.dropEffect = 'copy';
+ }, false);
+ dropContainer.addEventListener("dragleave", function() {
+ document.getElementById('fileWrapper').style.opacity = 0.2;
+ that._updateInfo(that.info, false);
+ }, false);
+ dropContainer.addEventListener("drop", function(e) {
+ e.stopPropagation();
+ e.preventDefault();
+ if (that.audioContext===null) {return;};
+ document.getElementById('fileWrapper').style.opacity = 1;
+ that._updateInfo('Uploading', true);
+ //get the dropped file
+ that.file = e.dataTransfer.files[0];
+ if (that.status === 1) {
+ document.getElementById('fileWrapper').style.opacity = 1;
+ that.forceStop = true;
+ };
+ that.fileName = that.file.name;
+ //once the file is ready,start the visualizer
+ that._start();
+ }, false);
+ },
+ _start: function() {
+ //read and decode the file into audio array buffer
+ var that = this,
+ file = this.file,
+ fr = new FileReader();
+ fr.onload = function(e) {
+ var fileResult = e.target.result;
+ var audioContext = that.audioContext;
+ if (audioContext === null) {
+ return;
+ };
+ that._updateInfo('Decoding the audio', true);
+ audioContext.decodeAudioData(fileResult, function(buffer) {
+ that._updateInfo('Decode succussfully,start the visualizer', true);
+ that._visualize(audioContext, buffer);
+ }, function(e) {
+ that._updateInfo('!Fail to decode the file', false);
+ console.log(e);
+ });
+ };
+ fr.onerror = function(e) {
+ that._updateInfo('!Fail to read the file', false);
+ console.log(e);
+ };
+ //assign the file to the reader
+ this._updateInfo('Starting read the file', true);
+ fr.readAsArrayBuffer(file);
+ },
+ _visualize: function(audioContext, buffer) {
+ var audioBufferSouceNode = audioContext.createBufferSource(),
+ analyser = audioContext.createAnalyser(),
+ that = this;
+ //connect the source to the analyser
+ audioBufferSouceNode.connect(analyser);
+ //connect the analyser to the destination(the speaker), or we won't hear the sound
+ analyser.connect(audioContext.destination);
+ //then assign the buffer to the buffer source node
+ audioBufferSouceNode.buffer = buffer;
+ //play the source
+ if (!audioBufferSouceNode.start) {
+ audioBufferSouceNode.start = audioBufferSouceNode.noteOn; //in old browsers use noteOn method
+ audioBufferSouceNode.stop = audioBufferSouceNode.noteOff; //in old browsers use noteOn method
+ };
+ //stop the previous sound if any
+ if (this.animationId !== null) {
+ cancelAnimationFrame(this.animationId);
+ }
+ if (this.source !== null) {
+ this.source.stop(0);
+ }
+ audioBufferSouceNode.start(0);
+ this.status = 1;
+ this.source = audioBufferSouceNode;
+ audioBufferSouceNode.onended = function() {
+ that._audioEnd(that);
+ };
+ this._updateInfo('Playing ' + this.fileName, false);
+ this.info = 'Playing ' + this.fileName;
+ document.getElementById('fileWrapper').style.opacity = 0.2;
+ this._drawSpectrum(analyser);
+ },
+ _drawSpectrum: function(analyser) {
+ var that = this,
+ canvas = document.getElementById('canvas'),
+ cwidth = canvas.width,
+ cheight = canvas.height - 2,
+ meterWidth = 100, //width of the meters in the spectrum
+ gap = 2, //gap between meters
+ capHeight = 2,
+ capStyle = '#fff',
+ meterNum = 5, //count of the meters
+ capYPositionArray = []; ////store the vertical position of hte caps for the preivous frame
+ ctx = canvas.getContext('2d'),
+ gradient = ctx.createLinearGradient(0, 0, 0, 300);
+ gradient.addColorStop(1, '#0f0');
+ gradient.addColorStop(0.5, '#ff0');
+ gradient.addColorStop(0, '#f00');
+ var drawMeter = function() {
+ var array = new Uint8Array(analyser.frequencyBinCount);
+ analyser.getByteFrequencyData(array);
+ if (that.status === 0) {
+ //fix when some sounds end the value still not back to zero
+ for (var i = array.length - 1; i >= 0; i--) {
+ array[i] = 0;
+ };
+ allCapsReachBottom = true;
+ for (var i = capYPositionArray.length - 1; i >= 0; i--) {
+ allCapsReachBottom = allCapsReachBottom && (capYPositionArray[i] === 0);
+ };
+ if (allCapsReachBottom) {
+ cancelAnimationFrame(that.animationId); //since the sound is stoped and animation finished, stop the requestAnimation to prevent potential memory leak,THIS IS VERY IMPORTANT!
+ return;
+ };
+ };
+ var step = Math.round(array.length / meterNum); //sample limited data from the total array
+ ctx.clearRect(0, 0, cwidth, cheight);
+ for (var i = 0; i < meterNum; i++) {
+ var value = array[i * step];
+ if (capYPositionArray.length < Math.round(meterNum)) {
+ capYPositionArray.push(value);
+ };
+ ctx.fillStyle = capStyle;
+ //draw the cap, with transition effect
+ if (value < capYPositionArray[i]) {
+ ctx.fillRect(i * 12, cheight - (--capYPositionArray[i]), meterWidth, capHeight);
+ } else {
+ ctx.fillRect(i * 12, cheight - value, meterWidth, capHeight);
+ capYPositionArray[i] = value;
+ };
+ ctx.fillStyle = gradient; //set the filllStyle to gradient for a better look
+ ctx.fillRect(i * 12 /*meterWidth+gap*/ , cheight - value + capHeight, meterWidth, cheight); //the meter
+ }
+ that.animationId = requestAnimationFrame(drawMeter);
+ }
+ this.animationId = requestAnimationFrame(drawMeter);
+ },
+ _audioEnd: function(instance) {
+ if (this.forceStop) {
+ this.forceStop = false;
+ this.status = 1;
+ return;
+ };
+ this.status = 0;
+ var text = 'HTML5 Audio API showcase | An Audio Viusalizer';
+ document.getElementById('fileWrapper').style.opacity = 1;
+ document.getElementById('info').innerHTML = text;
+ instance.info = text;
+ document.getElementById('uploadedFile').value = '';
+ },
+ _updateInfo: function(text, processing) {
+ var infoBar = document.getElementById('info'),
+ dots = '...',
+ i = 0,
+ that = this;
+ infoBar.innerHTML = text + dots.substring(0, i++);
+ if (this.infoUpdateId !== null) {
+ clearTimeout(this.infoUpdateId);
+ };
+ if (processing) {
+ //animate dots at the end of the info text
+ var animateDot = function() {
+ if (i > 3) {
+ i = 0
+ };
+ infoBar.innerHTML = text + dots.substring(0, i++);
+ that.infoUpdateId = setTimeout(animateDot, 250);
+ }
+ this.infoUpdateId = setTimeout(animateDot, 250);
+ };
+ }
+}
diff --git a/sandbox/audioVisualizer/sources/screencapture.png b/sandbox/audioVisualizer/sources/screencapture.png
new file mode 100755
index 0000000..76a7843
Binary files /dev/null and b/sandbox/audioVisualizer/sources/screencapture.png differ
diff --git a/sandbox/audioVisualizer/style/style.css b/sandbox/audioVisualizer/style/style.css
new file mode 100755
index 0000000..a363175
--- /dev/null
+++ b/sandbox/audioVisualizer/style/style.css
@@ -0,0 +1,21 @@
+html, body {
+ margin: 0;
+ font-family: arial, "Microsoft YaHei";
+ background-color: #272822;
+ color: #FEFEFE;
+}
+#fileWrapper{
+ transition:all 0.5s ease;
+}
+#fileWrapper:hover{
+ opacity: 1!important;
+}
+
+#visualizer_wrapper{
+ text-align: center;
+}
+footer{
+ position: fixed;
+ bottom: 2px;
+ color:#aaa;
+}
\ No newline at end of file
diff --git a/sandbox/index.html b/sandbox/index.html
index 04b21d1..4847586 100644
--- a/sandbox/index.html
+++ b/sandbox/index.html
@@ -61,16 +61,16 @@
-
+
+
+
+ HTML5 Audio API showcase | An Audio Viusalizer
+
+
+
+
+
+
+