Created
October 6, 2023 08:05
-
-
Save katspaugh/3134c383160adeca9b29df3879ef7c81 to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import WaveSurfer from 'https://unpkg.com/wavesurfer.js@7/dist/wavesurfer.esm.js' | |
| import TimelinePlugin from 'https://unpkg.com/wavesurfer.js@7/dist/plugins/timeline.esm.js' | |
| // Create an instance of WaveSurfer | |
| const wavesurfer = WaveSurfer.create({ | |
| container: '#waveform', | |
| waveColor: 'rgb(200, 0, 200)', | |
| progressColor: 'rgb(100, 0, 100)', | |
| url: '/examples/audio/audio.wav', | |
| minPxPerSec: 100, | |
| }) | |
| // Initialize the Timeline plugin | |
| wavesurfer.registerPlugin(TimelinePlugin.create()) | |
| /* | |
| <html> | |
| <div id="waveform"></div> | |
| <label> | |
| Zoom: <input type="range" min="10" max="1000" value="100" /> | |
| </label> | |
| </html> | |
| */ | |
| // Update the zoom level on slider change | |
| wavesurfer.once('decode', () => { | |
| const slider = document.querySelector('input[type="range"]') | |
| slider.addEventListener('input', (e) => { | |
| const minPxPerSec = e.target.valueAsNumber | |
| wavesurfer.zoom(minPxPerSec) | |
| }) | |
| }) |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment