Question: customization of waveform

[LukaMoria]

Earlier I used wavesurfer for customization waveform drawing with params like: barWidth : 2px and barGap :1px. I wanna to customize draw of full waveform. Can I do it with peaks.js?

[LukaMoria]

@chrisn any idea about it? Example: generating with customization by wavesurfer the same track generated by peaks.js

[chrisn]

We don't currently have a way for user customisation (apart from waveform colour) but I'm very much open to making it more configurable. This could be either by adding more options, or defining an extension API where you could fully take over how the rendering is done, similar to how we allow marker customisation (see https://github.com/bbc/peaks.js/blob/master/customizing.md).

In your use case, do you simply want a bar style display, as in your example, or do you want full control?

Related issues: https://github.com/bbc/peaks.js/issues/214, https://github.com/bbc/peaks.js/issues/193

[BKnightSHiFi]

We are working on this same thing in our app. The design is to use the bar style waveform that fills with color as the track progresses but this is not possible with peaks. I've only found wavesurfer to do this and would love to avoid having to pull it in just for this waveform styling.

[noaLeibman]

@chrisn I have another question about customization, hope you wouldn't mind:)

Is it possible to define the length (duration) of the view? For example I would like to create a Peaks instance with an audio file that's 3 seconds long, while the view would show 10 seconds (of course the remaining 7 seconds would be with no sound).

[chrisn]

Does the setZoom() method do what you need? I recommend trying out the demo pages, in particular the zoomable-waveform demo, which uses setZoom().

[tidoni]

Is there a way to change the background color of a segment? Or some other way to show that two segments overlap?

If there isn't at the moment, could this also be add to the options or the extension API?!

[chrisn]

If there isn't at the moment, could this also be add to the options or the extension API?!

At the moment, there isn't. Can you provide an example image of the effect you want to see?

[tidoni]

I just took the sample image from the git root and added some color.

Maybe this could be done, simply by adding a background-color setting to the segments.

  segments: [{
    startTime: 4,
    endTime: 14,
    editable: false,
    color: "blue",
    labelText: "Mic open"
  },
  {
    startTime: 4,
    endTime: 8,
    editable: false,
    background-color: "red",
    labelText: "Jingle"
  },
  {
    startTime: 15,
    endTime: 17,
    editable: false,
    background-color: "red",
    labelText: "Jingle"
  },
  {
    startTime: 29,
    endTime: 33,
    editable: false,
    color: "violett",
    labelText: "Mic open"
  }],