diff options
6 files changed, 36 insertions, 15 deletions
diff --git a/animism-align/frontend/app/utils/index.js b/animism-align/frontend/app/utils/index.js index dc80fee..92aa769 100644 --- a/animism-align/frontend/app/utils/index.js +++ b/animism-align/frontend/app/utils/index.js @@ -103,6 +103,26 @@ export const timestampToSeconds = time_str => { return time_str_parts[0] } +export const commatize = (n, radix) => { + radix = radix || -1 + var nums = [], i, counter = 0, r = Math.floor + if (radix !== -1 && n > radix) { + n /= radix + nums.unshift(r((n * 10) % 10)) + nums.unshift(".") + } + do { + i = r(n % 10) + n = r(n / 10) + counter += 1 + if (n && ! (counter % 3)) + { i = ',' + r(i) } + nums.unshift(i) + } + while (n) + return nums.join("") +} + export const percent = n => (n * 100).toFixed(1) + '%' export const px = (n, w) => Math.round(n * w) + 'px' diff --git a/animism-align/frontend/app/views/audio/audio.actions.js b/animism-align/frontend/app/views/audio/audio.actions.js index 48fffd6..08a8ba4 100644 --- a/animism-align/frontend/app/views/audio/audio.actions.js +++ b/animism-align/frontend/app/views/audio/audio.actions.js @@ -16,16 +16,20 @@ audioPlayer.addEventListener('timeupdate', () => { dispatch({ type: types.audio.update_time, play_ts: audioPlayer.currentTime }) }) -export const load = () => dispatch => { +export const load = (url) => dispatch => { return new Promise((resolve, reject) => { audioPlayer.addEventListener('loadedmetadata', () => { // console.log('audio duration:', audioPlayer.duration) dispatch({ type: types.align.set_display_setting, key: 'duration', value: audioPlayer.duration }) resolve() }) - audioPlayer.src = URLS.audio + audioPlayer.src = url }) } +export const loadEpisodeAudio = (episode) => dispatch => { + return load(episode.settings.audio.url)(dispatch) +} + export const play = () => dispatch => { dispatch({ type: types.audio.play }) audioPlayer.play() diff --git a/animism-align/frontend/app/views/editor/align/align.actions.js b/animism-align/frontend/app/views/editor/align/align.actions.js index a2f4881..3b6450b 100644 --- a/animism-align/frontend/app/views/editor/align/align.actions.js +++ b/animism-align/frontend/app/views/editor/align/align.actions.js @@ -150,7 +150,7 @@ export const spliceTime = start_ts => dispatch => { /* peaks */ export const loadPeaks = (episode) => dispatch => ( - api(dispatch, types.peaks, 'peaks', URLS.peaks) + api(dispatch, types.peaks, 'peaks', episode.settings.peaks.url) ) /* longform text */ diff --git a/animism-align/frontend/app/views/editor/sidebar/components/waveUpload.component.js b/animism-align/frontend/app/views/editor/sidebar/components/waveUpload.component.js index 3ca19f0..efd4bee 100644 --- a/animism-align/frontend/app/views/editor/sidebar/components/waveUpload.component.js +++ b/animism-align/frontend/app/views/editor/sidebar/components/waveUpload.component.js @@ -3,7 +3,7 @@ import { connect } from 'react-redux' import extractPeaks from 'webaudio-peaks' import actions from 'app/actions' -import { formatSize, timestampHMS } from 'app/utils' +import { formatSize, timestampHMS, commatize } from 'app/utils' import { Loader } from 'app/common' class WaveUpload extends Component { @@ -43,7 +43,7 @@ class WaveUpload extends Component { audioContext.decodeAudioData(arrayBuffer, (audioBuffer) => { // buffer, samplesPerPixel, isMono, startOffset, endOffset, bitResolution this.setState({ duration: audioBuffer.duration }) - var peaks = extractPeaks(audioBuffer, 441, true); + var peaks = extractPeaks(audioBuffer, audioBuffer.sampleRate / 5, true); console.log(peaks) const array = Array.from(peaks.data[0]) const peaksBlob = new Blob([ JSON.stringify(array) ], {type: "application/json"}); @@ -93,6 +93,8 @@ class WaveUpload extends Component { duration: null, size: null, }) + actions.align.loadPeaks(episode) + actions.audio.loadEpisodeAudio(episode) }) } @@ -143,11 +145,7 @@ class WaveUpload extends Component { <small>{episode.settings.audio.fn}</small> <small>{'Size: '}{formatSize(episode.settings.audio.size)}</small> <small>{'Duration: '}{timestampHMS(episode.settings.audio.duration)}</small> - </div> - )} - {peaks.length && ( - <div> - Peaks: {peaks.length} + <small>{'Peaks: '}{commatize(peaks.length)}</small> </div> )} <div className="uploadButton"> diff --git a/animism-align/frontend/app/views/editor/timeline/components/waveform.component.js b/animism-align/frontend/app/views/editor/timeline/components/waveform.component.js index 0161129..992f0d5 100644 --- a/animism-align/frontend/app/views/editor/timeline/components/waveform.component.js +++ b/animism-align/frontend/app/views/editor/timeline/components/waveform.component.js @@ -68,13 +68,13 @@ class Waveform extends Component { for (i = 0; i < pixelWidth; i++) { step = i * stepsPerPixel + stepMin peak = peaks[step] - y = (1 - peak) * waveformPeak + y = (1 - peak / 127) * waveformPeak ctx.lineTo(y, i) } for (i = pixelWidth - 1; i > 0; i--) { step = i * stepsPerPixel + stepMin peak = peaks[step] - y = (1 + peak) * waveformPeak + y = (1 + peak / 127) * waveformPeak ctx.lineTo(y, i) } ctx.lineTo(origin, 0) diff --git a/animism-align/frontend/app/views/site/site.actions.js b/animism-align/frontend/app/views/site/site.actions.js index 5538df7..4d0c4da 100644 --- a/animism-align/frontend/app/views/site/site.actions.js +++ b/animism-align/frontend/app/views/site/site.actions.js @@ -19,9 +19,8 @@ export const loadEpisode = (project, episode) => dispatch => { const { id: episode_id } = episode dispatch({ type: types.editor.loading }) return Promise.all([ - // actions.align.loadText(episode), - // actions.align.loadPeaks(episode), - actions.audio.load(episode), + actions.align.loadPeaks(episode), + actions.audio.loadEpisodeAudio(episode), actions.annotation.index({ episode_id }), actions.paragraph.index({ episode_id }), actions.media.index({ episode_id }), |