I am using wavesurfer.js to display an audio waveform and that part works fine, but it shows the entire audio wave, whereas I need to pass a start point and end point or a start point and duration and only display that section in my #waveform.
Is this possible? This is what I have tried, but again it shows the entire video/audio wave.
HTML:
<code><div id="waveform"></div>
</code>
<code><div id="waveform"></div>
</code>
<div id="waveform"></div>
JS:
<code>//SHOW THE WAVEFORM ONLY FROM 10 SECONDS IN TO 20 SECONDS
var startPoint = 10;
var endPoint = 20;
const wavesurfer = WaveSurfer.create({
container: container,
waveColor: 'blue',
progressColor: 'gray',
height: 100,
responsive: true,
interact: false, // Prevent user interaction with the waveform
});
var videoSrc = jQuery('#video-element').find('source').attr('src');
wavesurfer.load(videoSrc);
// When wavesurfer is ready, trim the audio to the specified section and visualize it
wavesurfer.on('ready', function() {
const duration = wavesurfer.getDuration();
const segmentDuration = endPoint - startPoint;
const zoomLevel = duration / segmentDuration;
// Zoom to the specific section
wavesurfer.zoom(zoomLevel);
// Seek to the start point
wavesurfer.seekTo(startPoint / duration);
});
</code>
<code>//SHOW THE WAVEFORM ONLY FROM 10 SECONDS IN TO 20 SECONDS
var startPoint = 10;
var endPoint = 20;
const wavesurfer = WaveSurfer.create({
container: container,
waveColor: 'blue',
progressColor: 'gray',
height: 100,
responsive: true,
interact: false, // Prevent user interaction with the waveform
});
var videoSrc = jQuery('#video-element').find('source').attr('src');
wavesurfer.load(videoSrc);
// When wavesurfer is ready, trim the audio to the specified section and visualize it
wavesurfer.on('ready', function() {
const duration = wavesurfer.getDuration();
const segmentDuration = endPoint - startPoint;
const zoomLevel = duration / segmentDuration;
// Zoom to the specific section
wavesurfer.zoom(zoomLevel);
// Seek to the start point
wavesurfer.seekTo(startPoint / duration);
});
</code>
//SHOW THE WAVEFORM ONLY FROM 10 SECONDS IN TO 20 SECONDS
var startPoint = 10;
var endPoint = 20;
const wavesurfer = WaveSurfer.create({
container: container,
waveColor: 'blue',
progressColor: 'gray',
height: 100,
responsive: true,
interact: false, // Prevent user interaction with the waveform
});
var videoSrc = jQuery('#video-element').find('source').attr('src');
wavesurfer.load(videoSrc);
// When wavesurfer is ready, trim the audio to the specified section and visualize it
wavesurfer.on('ready', function() {
const duration = wavesurfer.getDuration();
const segmentDuration = endPoint - startPoint;
const zoomLevel = duration / segmentDuration;
// Zoom to the specific section
wavesurfer.zoom(zoomLevel);
// Seek to the start point
wavesurfer.seekTo(startPoint / duration);
});