diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/client/documents/Documents.ts | 2 | ||||
| -rw-r--r-- | src/client/views/nodes/AudioBox.scss | 10 | ||||
| -rw-r--r-- | src/client/views/nodes/AudioBox.tsx | 91 | ||||
| -rw-r--r-- | src/typings/index.d.ts | 1 |
4 files changed, 101 insertions, 3 deletions
diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts index 122383744..88f470576 100644 --- a/src/client/documents/Documents.ts +++ b/src/client/documents/Documents.ts @@ -628,7 +628,7 @@ export namespace Docs { } export function AudioDocument(url: string, options: DocumentOptions = {}) { - const instance = InstanceFromProto(Prototypes.get(DocumentType.AUDIO), new AudioField(new URL(url)), { hideLinkButton: true, useLinkSmallAnchor: true, ...options }); + const instance = InstanceFromProto(Prototypes.get(DocumentType.AUDIO), new AudioField(new URL(url)), { ...options }); // hideLinkButton: false, useLinkSmallAnchor: false, Doc.GetProto(instance).backgroundColor = ComputedField.MakeFunction("this._audioState === 'playing' ? 'green':'gray'"); return instance; } diff --git a/src/client/views/nodes/AudioBox.scss b/src/client/views/nodes/AudioBox.scss index 6d52988bb..35ab5da8b 100644 --- a/src/client/views/nodes/AudioBox.scss +++ b/src/client/views/nodes/AudioBox.scss @@ -140,6 +140,14 @@ height: 100%; background-color: red; position: absolute; + top: 0px; + } + + .waveform { + position: relative; + width: 100%; + height: 100%; + overflow: hidden; } .audiobox-linker, @@ -259,7 +267,7 @@ .audiobox-marker-container1:hover, .audiobox-marker-minicontainer:hover { - opacity: 1; + opacity: 0.8; } .audiobox-marker-minicontainer { diff --git a/src/client/views/nodes/AudioBox.tsx b/src/client/views/nodes/AudioBox.tsx index 34f87fc10..3d1932883 100644 --- a/src/client/views/nodes/AudioBox.tsx +++ b/src/client/views/nodes/AudioBox.tsx @@ -29,7 +29,8 @@ import { LabelBox } from "./LabelBox"; import { Transform } from "../../util/Transform"; import { Scripting } from "../../util/Scripting"; import { ColorBox } from "./ColorBox"; - +import Waveform from "react-audio-waveform" +import axios from "axios" // testing testing @@ -73,6 +74,7 @@ export class AudioBox extends ViewBoxAnnotatableComponent<FieldViewProps, AudioD _amount: number = 1; _markers: Array<any> = []; _first: boolean = false; + _buckets: Array<number> = new Array(); private _isPointerDown = false; private _currMarker: any; @@ -80,6 +82,7 @@ export class AudioBox extends ViewBoxAnnotatableComponent<FieldViewProps, AudioD @observable private _dragging: boolean = false; @observable private _duration = 0; @observable private _rect: Array<any> = []; + // @observable private _buckets: Array<number> = new Array(); @observable private _paused: boolean = false; @observable private static _scrubTime = 0; @@ -299,6 +302,81 @@ export class AudioBox extends ViewBoxAnnotatableComponent<FieldViewProps, AudioD return path === nullAudio ? "" : path; } + @action + buckets = async () => { + let audioCtx = new (window.AudioContext)(); + const buckets: number[] = []; + + axios({ url: this.path, responseType: "arraybuffer" }) + .then(async response => { + let audioData = response.data; + + await audioCtx.decodeAudioData(audioData, buffer => { + let decodedAudioData = buffer.getChannelData(0); + const NUMBER_OF_BUCKETS = 100; + let bucketDataSize = Math.floor(decodedAudioData.length / NUMBER_OF_BUCKETS); + + for (let i = 0; i < NUMBER_OF_BUCKETS; i++) { + let startingPoint = i * bucketDataSize; + let endingPoint = i * bucketDataSize + bucketDataSize; + let max = 0; + for (let j = startingPoint; j < endingPoint; j++) { + if (decodedAudioData[j] > max) { + max = decodedAudioData[j]; + } + } + let size = Math.abs(max); + buckets.push(size / 2); + this._buckets.push(size / 2); + } + + }); + return buckets; + }); + } + + @computed get peaks() { + // let audioCtx = new (window.AudioContext)(); + // let buckets: number[] = []; + + // return (async () => { + // await axios({ url: this.path, responseType: "arraybuffer" }) + // .then(response => { + // let audioData = response.data; + + // audioCtx.decodeAudioData(audioData, buffer => { + // let decodedAudioData = buffer.getChannelData(0); + // const NUMBER_OF_BUCKETS = 100; + // let bucketDataSize = Math.floor(decodedAudioData.length / NUMBER_OF_BUCKETS); + + + + // for (let i = 0; i < NUMBER_OF_BUCKETS; i++) { + // let startingPoint = i * bucketDataSize; + // let endingPoint = i * bucketDataSize + bucketDataSize; + // let max = 0; + // for (let j = startingPoint; j < endingPoint; j++) { + // if (decodedAudioData[j] > max) { + // max = decodedAudioData[j]; + // } + // } + // let size = Math.abs(max); + // console.log(size); + // buckets.push(size / 2); + // console.log(buckets); + // } + // }); + // console.log(buckets); + // return buckets; + // }); + // console.log(buckets.length); + // return buckets; + // })(); + + + return this.buckets(); + } + @computed get audio() { const interactive = this.active() ? "-interactive" : ""; return <audio ref={this.setRef} className={`audiobox-control${interactive}`}> @@ -595,6 +673,17 @@ export class AudioBox extends ViewBoxAnnotatableComponent<FieldViewProps, AudioD this._hold ? this.end(this._ele!.currentTime) : this.start(this._ele!.currentTime); } }}> + <div className="waveform" style={{ height: `${100}%`, width: "100%", bottom: "0px" }}> + {console.log(this.peaks)} + <Waveform + color={"#000000"} + height={20} + barWidth={0.1} + pos={this.layoutDoc.currentTimecode} + duration={this.layoutDoc.duration} + peaks={this._buckets.length === 100 ? this._buckets : undefined} + progressColor={"#0000ff"} /> + </div> {DocListCast(this.dataDoc[this.annotationKey]).map((m, i) => { // let text = Docs.Create.TextDocument("hello", { title: "label", _showSidebar: false, _autoHeight: false }); let rect; diff --git a/src/typings/index.d.ts b/src/typings/index.d.ts index 452882e09..ee2c25f8a 100644 --- a/src/typings/index.d.ts +++ b/src/typings/index.d.ts @@ -7,6 +7,7 @@ declare module 'cors'; declare module 'webrtc-adapter'; declare module 'bezier-curve'; declare module 'fit-curve' +declare module 'react-audio-waveform' declare module '@react-pdf/renderer' { |