modularize specviz
The entry for specviz, src/specviz.js
-
import debounce from './util/debounce.js'
import AudioPlayer from './audio-player.js';
import Observable from './observer.js';
import Regions from './regions.js';
import * as util from './util/general.js';
import Waveform from './waveform.js';
import Spectrogram from './spectrogram.js';
import ZoomLens from './zoom-lens.js';
As a user, even if I only want Waveform
or Spectrogram
, I am forced to include library code for AudioPlayer
, etc.
If specviz were properly modularized, we could use it in a modular fashion -
// FUTURE API PROPOSAL
import { Specviz, Spectrogram } from "specviz.js"
function App(){
return (
<Specviz data={...}>
<Spectrogram />
</Specviz>
)
}
// FUTURE API PROPOSAL
import { Specviz, Waveform, Spectrogram, AudioPlayer } from "specviz.js"
function App(){
return (
<Specviz data={...}>
<div>
<Waveform height="80" />
<Spectrogram height="80" />
</div>
<div>
<AudioPlayer />
</div>
</Specviz>
)
}
Using hooks may make it possible to modularize AudioPlayer
-
// FUTURE API PROPOSAL
import { Specviz, Waveform, Spectrogram, useSpecviz } from "specviz.js"
function App(){
return (
<Specviz data={...}>
<div>
<Waveform height="80" />
<Spectrogram height="80" />
</div>
<div>
<AudioPlayer />
</div>
</Specviz>
)
}
function AudioPlayer() {
const sv = useSpecviz()
return (
<div>
<button onClick={e => sv.playpause()}>⏯</button>
<button onClick={e => sv.stop()}>⏹</button>
</div>
)
}