How flexible is framework? How much can I plug in and change?

[alankent]

Great looking project. I was wondering if I could leverage it for a broader use case, or whether you think better to do separately. Example situations:

• I want a timeline editor that can handle different media (audio being one of them). For example, have a track for an image, where the "envelope" adjusts the opacity instead of volume. Then I can fade in/out the images in time with the audio.
• Same, but instead of images I would like an animation clip for an animated character. Can I borrow the same timeline functionality (zoom, markers, region etc) for completely different things (not traditional media)? (Can I make say a web component that behaves like audio or video media?)
• Be able to trim files. At the moment, you can change the envelope and silence say the start and the end, but you cannot move it off the start of the timeline. So if you want to remove the first 5 seconds, you can mute it, but you cannot move the clip sideways (before time zero). I would like to have "clips" that pick a subrange from the audio file. (The use case is to take an existing audio file, split it in two (create another track), then be able to slide around the different parts. I don't want to see anything that is not inside the visible part of the clip.

I know its not what you project was designed for, but I was curious if you thought feasible or not - otherwise I get to write it all again from scratch!

[katspaugh]

You could probably shoehorn other media types into wavesurfer by making them mimic an HTML audio or video element.

Something like

class CustomMedia extends Audio {
  play() { ... }
  pause() { ... }
  get currentTime() { ... }
  set currentTime() { ... }
  get duration() { ... }
  addEventListener() { ... } // probably the trickiest part
}

and then pass it to wavesurfer like this:

const wavesurfer = WaveSurfer.create({
  container: '#container',
  media: new CustomMedia()
})

Regarding slicing audio into clips, you can do it with Web Audio (search in the issues of this repo, there were many questions about this with some solutions provided).

[alankent]

Thanks. That makes sense. I will give it a try and see how it goes.

You mention the event listener might be the hardest part. I was going to grep the code looking for events I need to worry about, unless there is an easy list somewhere? (To be honest I will probably just try and throw something together quickly and see what breaks! E.g. start with displaying a single image with opacity instead of volume with multiple tracks.)

[katspaugh]

Actually, no need to override addEventListener itself, you could simply dispatch your own events.

You can grep for “onMediaEvent” in src/wavesurfer.ts for the events wavesurfer needs. I don’t guarantee that it won’t use more of them in future, though.

[katspaugh]

I've made a small example to prove it works :)
https://wavesurfer-js.org/examples/?285d11a0b6347643837e45255ebe7faa
It actually helped me to find a bug in the envelope plugin – it wasn't setting the volume when dragging the line.