Waves are not turning yellow as track plays

[imperium11]

Hi everyone,

I am trying to use Waveform with React and i am very new to this library. When my component renders i am able to create a WaveformPlaylist and afterwards load audio files. But when i play the song i don't see a horizontal line following the track and filling in the wave forms.

Here is my code:

useEffect(() => { setPlayList(WaveformPlaylist({ samplesPerPixel: 1000, mono: true, waveHeight: 150, barWidth: 3, barGap: 1, timescale: true, container: document.getElementById('editor'), state: 'cursor', colors: { waveOutlineColor: 'grey', timeColor: 'purple', fadeColor: 'grey', }, controls: { show: true, width: 130, widgets: { stereoPan: false, collapse: false } }, zoomLevels: [1000], })); }, []);

playlist.load([{ src: result.data.url, name: 'Track ${count}' }]);

And then i just use playlist.getEventEmitter().emit for my buttons:
<Pause onClick={() => { playlist.getEventEmitter().emit('pause'); }}></Pause> <Play onClick={() => { playlist.getEventEmitter().emit('play'); }}></Play> <Stop onClick={() => { playlist.getEventEmitter().emit('stop'); }}></Stop> <Rewind onClick={() => { playlist.getEventEmitter().emit('rewind'); }}></Rewind> <FastForward onClick={() => { playlist.getEventEmitter().emit('fastforward'); }}></FastForward>

And here is a screen shot of what i have so far:

I was expecting something like this:

Any help or advice would be greatly appreciated!

[naomiaro]

Hello, did you include the stylesheet?

https://unpkg.com/browse/waveform-playlist@4.2.1/styles/

it should be variable --wp-channel-progress-color

[imperium11]

playlist.load([{ src: result.data.url, name: Track #1 }]).then(() => { playlist.initExporter(); });

I also added the playlist.getEventEmitter().emit('startaudiorendering', 'wav'); to my download (button) Onclick event handler but nothing seems to be happening (I am not getting any errors). Do i still need to convert all the files into a Blob and go into that process?

[imperium11]

This returns undefined within my .then function -> console.log('initExporter', playlist.initExporter());

[naomiaro]

https://github.com/naomiaro/waveform-playlist/blob/main/examples/basic-nextjs/pages/index.js

I added a quick download example here. I've added the packages events/save-as to do this.

[imperium11]

I cannot stress enough how grateful i am for your help. Thank you so much.

[imperium11]

Hi, is there a way to add a reverb effect with the click of a button on a specific track even though the track has been loaded with playlist.load. Are there ways to alter the playlist so i can add effects after the track is already on the editor (just like Fade-in fade-out but for Reverb)