Error raised when trying to seekTo on Firefox

[BriceN]

Hello, When I try to click on any part of the waveform on firefox, this error is raised :

TypeError: Value being assigned to HTMLMediaElement.currentTime is not a finite floating-point value.

Looking at the sources, it seems that in this function :

this.drawer.on("click", function(e, progress) { setTimeout(function() { console.log(progress); my.seekTo(progress); }, 0); });

the value of progress is Infinity

At this point, I don't know what to do to solve this, any ideas ?

[mspae]

Thank you for reporting. We'll look into it as soon as possible.

[BriceN]

Note that I'm using the regions plugin

[mspae]

Duplicate of https://github.com/katspaugh/wavesurfer.js/issues/745

[mspae]

Nevertheless this should be fixed. Which browser version are you using? Can you post some code?

[mspae]

Let's discuss in the original issue.

[mspae]

Apparently not an (exact) duplicate. Reopening

[mspae]

So there will be a better error message when this happens, but we still haven't found out why this appears.

[awenger63]

Hi, I have same issue but on Chrome (Version 63.0.3239.108), not on fireFox (57.0.2) ! with v2.0.1

Uncaught TypeError: Failed to set the 'currentTime' property on 'HTMLMediaElement': The provided double value is non-finite. at MediaElement.seekTo (wavesurfer.js?ln=js:2090) at WaveSurfer.seekTo (wavesurfer.js?ln=js:3949) at wavesurfer.js?ln=js:3683

It cause by this.backend.getDuration() is Infinity And it appear not each time.... load with and without peak (json), not for all song, not for same song. it's look like same process to load have different result depend of the moment. I suggest this depend of webBrowser bufferread, I see this https://www.chromestatus.com/feature/5671401352593408, FireFox in development! So, sometime buffer is complete and Duration can be define, sometime no ! I search to change webBrowser buffer size but without success 👎 I don't know if this explain the issues and if this impact getDuration() in the futur. If someone have any idea ?

[MileanCo]

Also experiencing these issues in Chrome.. I've found that I usually hit this issue when using seekTo after calling wavesurfer.load() on a new url, a second time.

I resolved the issue by re-creating the WaveSurfer() object when changing audio track (calling .load on a fresh WaveSurfer obj instead of re-using the same one)

[thijstriemstra]

@awenger63 @MileanCo can you make an example or codepen that reproduces this exact problem so we can take a look?

[awenger63]

@thijstriemstra I realise a small code (with v2.0.1) to reproduce it and I can have the issue on Firefox too. See this video : https://www.screencast.com/t/8Its0o2AF To be sure to reproduce (more easy on Chrome) : Clear all navigator buffer (best way it's reboot system), Select a song and place the record where you want on the wave. Sometime this work fine, and sometime no ! I put a wavesurfer.on ('ready') function but no change.

@MileanCo @thijstriemstra In my real case in chrome, the issue arrive also in the fisrt load, so recreate objet couldn't resolve the problem each time and I have a difference between Firefox and Chrome, in Chrome when I have this error, I cannot play the song on the seekTo position or deine an other position on the wave, it's always start at the begining !

Hope this is what you need.

<div id="waveform"></div>
        <div style="text-align: center">
            <button class="btn btn-primary" onclick="wavesurfer.playPause()">
                Play
            </button>
            <button class="btn btn-primary" onclick="wavesurfer.load('https://ia902606.us.archive.org/35/items/shortpoetry_047_librivox/song_cjrg_teasdale_64kb.mp3');">
                Song0
            </button>
            <button class="btn btn-primary" onclick="wavesurfer.load('https://ia902606.us.archive.org/35/items/shortpoetry_047_librivox/requiem_stevenson_mtr.mp3');">
                Song1
            </button>
            <button class="btn btn-primary" onclick="wavesurfer.load('https://ia801407.us.archive.org/27/items/ALaPataCoja/A%20la%20pata%20coja.mp3');">
                Song2
            </button>
            <button class="btn btn-primary" onclick="wavesurfer.load('https://ia802707.us.archive.org/32/items/ACorrer/%C2%A1%20A%20correr%20%21.mp3');">
                Song3
            </button>
            <button class="btn btn-primary" onclick="wavesurfer.load('https://ia800309.us.archive.org/1/items/Musica_975/MaidWithTheFlaxenHair.mp3');">
                Song4
            </button>
        </div>

        <script type="text/javascript">
            
            console.log(navigator.userAgent);
            
            var wavesurfer = WaveSurfer.create({
                container: '#waveform',
                backend: 'MediaElement',
                mediaType: 'audio',
                normalize: true,
                responsive: true,
                waveColor: 'red',
                progressColor: 'purple'
            });

            wavesurfer.on('ready', function () {
                $('#waveform').mousedown(function (e) {
                    wavesurfer.drawer.fireEvent('click', e, wavesurfer.drawer.handleEvent(e));
                    console.log('click waveform');
                });
            });
        </script>

[tibbing]

Still experiencing this in Wavesurfer 2.2.1, when quickly switching between different sources. Any update?

[thijstriemstra]

@tibbing have you tried the master branch?

[lorenzos]

Same, it occurs on Firefox when quickly switching between different sources. Latest version, 3.3.3.

TypeError: HTMLMediaElement.currentTime setter: Value being assigned is not a finite floating-point value.
    seekTo wavesurfer.js:2199
    seekTo wavesurfer.js:4531
    stop wavesurfer.js:4551
    empty wavesurfer.js:5313
    load wavesurfer.js:5005

In my case, getDuration() is not infinity, but NaN, so on load it tries to seek to 0 * NaN, which is NaN. I found that this seekTo() function, that is the one of the media element backend, already checks for null, so I just added a check for NaN:

if (start != null && !isNaN(start)) {
    this.media.currentTime = start;
}

Now, when getDuration() is NaN, a non fatal error is shown in the console, but it comes from the browser, not from Javascript: The fetching process for the media resource was aborted by the user agent at the user's request. I don't get what it means, however wavesurfer holds in the "loading" process, then sometimes eventually the playback starts correctly by itself after a couple seconds, sometimes it does not :cry:

[Kucziii]

@lorenzos Did you find any workaround for this? I've just come up to exact same error but checking if it's NaN isn't enough i think. Happening for me on any browser + electron app with MediaElement backend and peak arrays.

[lorenzos]

@Kucziii Nope, I'm just checking for NaN now. However the problem only occurs when quickly changing audio source (in my case, when the user quickly scrolls through the playlist), so it's not so frequent.

[lorenzos]

I'm still experiencing this issue when I remove my work-around. IMO the work-around is still better than crashing the whole script, would a PR be welcome? @katspaugh @thijstriemstra

[thijstriemstra]

yep.