Home Apply zoom fro entire length of the audio file using wavesurfer
Reply: 0

Apply zoom fro entire length of the audio file using wavesurfer

prbnk
1#
prbnk Published in 2017-12-06 06:37:35Z

Hi I have implemented a zoom function for an audio signal represented in digital waveform. It works well for a small portion of the audio signal. I see that zoom is not applied to the entire length of the file. Could you please suggest how can I apply zoom for the entire length of the file using wavesurfer.js.

here is my code

var buttons = {
                    play: document.getElementById("btn-play"),
                    pause: document.getElementById("btn-pause"),
                    stop: document.getElementById("btn-stop"),
                    backward: document.getElementById("btn-backward"),
                    forward: document.getElementById("btn-forward")
                };

                // Create an instance of wave surfer with its configuration
                var wavesurfer = WaveSurfer.create({
                    container: '#audio-spectrum',
                    progressColor: "#03a9f4",
                    container: document.querySelector('#audio-spectrum'),
                    backend: 'MediaElement',
                    responsive: 'true',
                    scrollParent: 'true',
                    fillParent: 'true',
                    minPxPerSec: '5'
                });

                // Handle Play button
                buttons.play.addEventListener("click", function(){
                    wavesurfer.play();

                    // Enable/Disable respectively buttons
                    buttons.stop.disabled = false;
                    buttons.pause.disabled = false;
                    buttons.play.disabled = true;
                    buttons.forward.disabled=false;
                    buttons.backward.disabled=false;
                }, false);

wavesurfer.load('audios/audio3.mp3');

   document.querySelector('#slider').oninput = function () {
            wavesurfer.zoom(Number(this.value));
        };

html:

<input class="col-xs-10" id="slider" type="range" min="1" max="500" value="1" style="width: 10%"></input>
You need to login account before you can post.

About| Privacy statement| Terms of Service| Advertising| Contact us| Help| Sitemap|
Processed in 0.242563 second(s) , Gzip On .

© 2016 Powered by mzan.com design MATCHINFO