zhw2590582 / WFPlayer

:ocean: WFPlayer.js is an audio waveform generator
https://wfplayer.js.org
MIT License
262 stars 32 forks source link

can you guide me how to create multiple instance of wfplayer at run time? #48

Closed Rahulk4128 closed 7 months ago

zhw2590582 commented 1 year ago

wfplayer itself can create multiple instances

const wf1 = new WFPlayer({...});
const wf2 = new WFPlayer({...});
Rahulk4128 commented 1 year ago

Thank you very much for your quick response. but the issue is resolved now. Actually, I have to create an instance on runtime. here is a code sample.
let playerRefArray = []; (Array).forEach((element, index) => { playerRefArray[index] = new WFPlayer({ container: document.querySelector(#waveform-${element}), mediaElement: document.querySelector(#audio-${element}), wave: true, // Waveform color waveColor: 'rgba(255, 255, 255, 0.1)',

                // Background color
                backgroundColor: 'rgb(28, 32, 34)',

                // Whether to display cursor
                cursor: true,

                // Cursor color
                cursorColor: '#ff0000',

                // Whether to display progress
                progress: true,

                // progress color
                progressColor: 'rgba(255, 255, 255, 0.5)',

                // Whether to display grid
                grid: false,

                // Grid color
                gridColor: 'rgba(255, 255, 255, 0.05)',

                // Whether to display ruler
                ruler: true,

                // Ruler color
                rulerColor: 'rgba(255, 255, 255, 0.5)',

                // Whether to display ruler at the top
                rulerAtTop: true,

                // Indicates whether to do http fetching with cookies
                withCredentials: false,

                // Indicates whether to enable CORS for http fetching
                cors: true,

                // Initialize http headers
                headers: {},

                // Pixel ratio
                pixelRatio: window.devicePixelRatio,

                // Which audio channel to render
                channel: 0,

                // Duration of rendering
                duration: 10,

                // The ratio of spaces on both sides
                padding: 0,

                // Waveform height scale ratio
                waveScale: 0.7,
            });
            playerRefArray[index].on('click', (currentTime) => {
                playerRefArray[index].seek(currentTime);
            });
            playerRefArray[index].on('grabbing', (currentTime) => {
                playerRefArray[index].seek(currentTime);
            });
            // scroll event
            playerRefArray[index].on('scroll', (deltaY) => {
                playerRefArray[index].seek(
                    playerRefArray[index].currentTime + deltaY / 10,
                );
            });
            playerRefArray[index].load(
                document.querySelector(`#audio-${element}`),
            );
        });

        //for destroying the instance ====>this important 
            (Array).forEach((element, index) => {
                playerRefArray[index].destroy();
            });
Rahulk4128 commented 1 year ago

@zhw2590582 can you guide me on extracting subtitles or transcripts from the audio file? Do wfplayer.js support this feature Please mark this question as a priority. Thanks in advance.

yuguaa commented 1 year ago

@zhw2590582 can you guide me on extracting subtitles or transcripts from the audio file? Do wfplayer.js support this feature Please mark this question as a priority. Thanks in advance.

Audio text recognition is a significant project, and it is recommended to purchase third-party services. I am using Tencent's audio-to-text service and need to pay the corresponding fees.

zhw2590582 commented 1 year ago

@yuguaa @Rahulk4128 Or use openai's whisper, which is simpler to use and cheaper.