Closed Rahulk4128 closed 7 months 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();
});
@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.
@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.
@yuguaa @Rahulk4128 Or use openai's whisper, which is simpler to use and cheaper.
wfplayer itself can create multiple instances