144 lines
4.4 KiB
Plaintext
144 lines
4.4 KiB
Plaintext
; WaveSurferSB Plugins Example
|
|
; Demonstrates Timeline, Minimap, and Spectrogram plugins
|
|
;
|
|
; This example loads wavesurfer.js core + all three plugins,
|
|
; creates a waveform with playback controls, and attaches each plugin.
|
|
|
|
IncludeFile "WaveSurferSB.sbi"
|
|
|
|
Global ws ; WaveSurfer instance
|
|
Global wsTimeline ; Timeline plugin instance
|
|
Global wsMinimap ; Minimap plugin instance
|
|
Global wsSpectro ; Spectrogram plugin instance
|
|
|
|
Enumeration
|
|
#btnPlay
|
|
#btnPause
|
|
#btnStop
|
|
#txtStatus
|
|
#txtTime
|
|
EndEnumeration
|
|
|
|
; ---- Event Callbacks ----
|
|
|
|
Procedure OnReady(Duration.d)
|
|
Debug "Audio ready! Duration: " + StrD(Duration, 2) + "s"
|
|
SetGadgetText(#txtStatus, "Ready - " + StrD(Duration, 1) + "s")
|
|
EndProcedure
|
|
|
|
Procedure OnTimeUpdate(CurrentTime.d)
|
|
SetGadgetText(#txtTime, StrD(CurrentTime, 1) + " / " + StrD(WaveSurferSB::GetDuration(ws), 1))
|
|
EndProcedure
|
|
|
|
Procedure OnFinish()
|
|
SetGadgetText(#txtStatus, "Finished")
|
|
EndProcedure
|
|
|
|
; ---- Button Events ----
|
|
|
|
Procedure OnEvent()
|
|
Select EventGadget()
|
|
Case #btnPlay
|
|
WaveSurferSB::Play(ws)
|
|
SetGadgetText(#txtStatus, "Playing")
|
|
|
|
Case #btnPause
|
|
WaveSurferSB::Pause(ws)
|
|
SetGadgetText(#txtStatus, "Paused")
|
|
|
|
Case #btnStop
|
|
WaveSurferSB::Stop(ws)
|
|
SetGadgetText(#txtStatus, "Stopped")
|
|
EndSelect
|
|
EndProcedure
|
|
|
|
; ---- Download Callback ----
|
|
|
|
Procedure OnDownloadComplete(Success)
|
|
If Not Success
|
|
Debug "ERROR: Failed to load wavesurfer.js or plugins"
|
|
SetGadgetText(#txtStatus, "Load failed!")
|
|
ProcedureReturn
|
|
EndIf
|
|
|
|
Debug "wavesurfer.js + plugins loaded successfully"
|
|
|
|
; Create the main WaveSurfer instance with drag-to-seek and bar style
|
|
ws = WaveSurferSB::Create("#waveform", WaveSurferSB::#DragToSeek | WaveSurferSB::#BarStyle)
|
|
|
|
; ---- Attach Plugins ----
|
|
|
|
; Timeline: time labels below the waveform (default container, 20px height)
|
|
wsTimeline = WaveSurferSB::TimelineCreate(ws)
|
|
|
|
; Minimap: overview navigation bar with colored overlay
|
|
wsMinimap = WaveSurferSB::MinimapCreate(ws, 40, "#888", "#444", "rgba(100,100,200,0.3)")
|
|
|
|
; Spectrogram: frequency visualization with labels
|
|
; Renders into the #spectrogram div, 150px tall, with frequency labels
|
|
wsSpectro = WaveSurferSB::SpectrogramCreate(ws, "#spectrogram", 150, #True)
|
|
|
|
; ---- Advanced plugin example using _ex (JSON options) ----
|
|
; If you need full control, use the _ex variants instead:
|
|
;
|
|
; wsTimeline = WaveSurferSB::TimelineCreate_ex(ws, ~"{\"height\": 25, \"timeInterval\": 5, \"primaryLabelInterval\": 10, \"insertPosition\": \"beforebegin\"}")
|
|
;
|
|
; wsSpectro = WaveSurferSB::SpectrogramCreate_ex(ws, ~"{\"container\": \"#spectrogram\", \"height\": 200, \"labels\": true, \"fftSamples\": 1024, \"scale\": \"mel\", \"colorMap\": \"roseus\"}")
|
|
|
|
; ---- Bind Events ----
|
|
WaveSurferSB::OnReady(ws, @OnReady())
|
|
WaveSurferSB::OnTimeUpdate(ws, @OnTimeUpdate())
|
|
WaveSurferSB::OnFinish(ws, @OnFinish())
|
|
|
|
; ---- Load Audio ----
|
|
; Replace with your audio URL
|
|
WaveSurferSB::Load(ws, "WaveSurferTestMusic.ogg")
|
|
|
|
SetGadgetText(#txtStatus, "Loading audio...")
|
|
EndProcedure
|
|
|
|
; ---- Main UI ----
|
|
|
|
Procedure Main()
|
|
|
|
OpenWindow(0, 0, 0, 800, 600, "WaveSurferSB - Plugins Demo", #PB_Window_ScreenCentered)
|
|
|
|
; Create HTML containers for the waveform and spectrogram
|
|
; The waveform div holds the main wave + timeline + minimap (auto-appended)
|
|
; The spectrogram div is separate so it renders below
|
|
!var _wsRoot = document.body.firstElementChild || document.body;
|
|
!_wsRoot.insertAdjacentHTML('afterbegin',
|
|
! '<div id="waveform" style="width:100%; margin:10px 0; border:1px solid #ccc; border-radius:4px; overflow:hidden;"></div>' +
|
|
! '<div id="spectrogram" style="width:100%; margin:10px 0;"></div>'
|
|
!);
|
|
|
|
; Transport controls
|
|
ButtonGadget(#btnPlay, 10, 420, 80, 30, "Play")
|
|
ButtonGadget(#btnPause, 100, 420, 80, 30, "Pause")
|
|
ButtonGadget(#btnStop, 190, 420, 80, 30, "Stop")
|
|
|
|
TextGadget(#txtStatus, 290, 425, 200, 25, "Loading...")
|
|
TextGadget(#txtTime, 500, 425, 200, 25, "0.0 / 0.0")
|
|
|
|
BindGadgetEvent(#btnPlay, @OnEvent())
|
|
BindGadgetEvent(#btnPause, @OnEvent())
|
|
BindGadgetEvent(#btnStop, @OnEvent())
|
|
|
|
; Download core + all three plugins (loaded sequentially)
|
|
; Plugin names must match the filenames on unpkg CDN
|
|
WaveSurferSB::Download(@OnDownloadComplete(), "timeline,minimap,spectrogram")
|
|
|
|
EndProcedure
|
|
|
|
Main()
|
|
|
|
; IDE Options = SpiderBasic 3.20 (Windows - x86)
|
|
; CursorPosition = 94
|
|
; FirstLine = 57
|
|
; Folding = --
|
|
; iOSAppOrientation = 0
|
|
; AndroidAppCode = 0
|
|
; AndroidAppOrientation = 0
|
|
; EnableXP
|
|
; DPIAware
|
|
; CompileSourceDirectory |