Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
Rahulk4128 opened this issue Aug 27, 2023 · 5 comments
Closed

Comments

@Rahulk4128
Copy link

No description provided.

@zhw2590582
Copy link
Owner

wfplayer itself can create multiple instances

const wf1 = new WFPlayer({...});
const wf2 = new WFPlayer({...});

@Rahulk4128
Copy link
Author

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
Copy link
Author

@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
Copy link

yuguaa commented Sep 5, 2023

@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
Copy link
Owner

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants