Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Live call backward/forward functionality is not working in chrome

See original GitHub issue

I go through all the issues which are listed but I haven’t find my solution.

I am using wavesurfer for playing live call. We are using HLS protocol for live call with the help of icecast server. It is working fine in firefox but not working in chrome. While playing live call I am not getting total time of call and also not able to do backward and forward. It is giving below error :

wavesurfer.js:6 Uncaught TypeError: Failed to set the ‘currentTime’ property on ‘HTMLMediaElement’: The provided double value is non-finite.

Here is the details :

Wavesurfer.js version(s):

2.1.2

Also tested with Wavesurfer.js version(s):

5.1.0

Browser and operating system version(s):

Chrome 91.0.4472.77 (Official Build) (64-bit), Linux

Code needed to reproduce the issue:

<html>
<title>Wavesurfer Code Issue</title>
<head>
    <script src="js/jquery.min.js"></script>
    <script src="js/wavesurfer.js"></script>
</head>
<body>
<div id="waveform"></div>

<span class="text-left time" id="play_time"></span>
<span class="text-right time" id="total_time" style="float: right"></span>
<button class="backward ctrl ">Backward</button>
<button class="btn btn-primary" id="play">
    <i class="glyphicon glyphicon-play"></i>
    Play
    /
    <i class="glyphicon glyphicon-pause"></i>
    Pause
</button>
<button class="forward ctrl">Forward</button>
<button id="click">Click</button>
<script>
    $(document).on('ready', function () {
        $('#play').hide();
        $('.ctrl').hide();
    });
    $(document).on("click", '#click', function () {
        wavesurferlive = WaveSurfer.create({
            container : '#waveform',
            waveColor : '#1c63a0',
            progressColor : '#a8b8c6',
            backend : 'MediaElement',
            responsive : 'true',
            hideScrollbar : true,
            skipLength : 10,
            mediaType : 'audio'
        });

        wavesurferlive.load("http://domain/ea5976b5-b181-4317-89ed-9bbb85e7a234.mp3");
        wavesurferlive.on('ready', function () {
            console.log('playing');
            wavesurferlive.play();
            $('#click').hide();
            $('#play').show();
            $('.ctrl').show();
        });

        $(document).on("click", '#play', function () {
            wavesurferlive.playPause();
        });

        $('.backward').click(function () {
            wavesurferlive.skipBackward();
        });

        $('.forward').click(function () {
            wavesurferlive.skipForward();
        });

        wavesurferlive.on('audioprocess', function (time) {
            let times = wavesurferlive.getDuration();
            let hour = Math.floor(times / 3600);
            let minute = ('00' + Math.floor((times % 3600) / 60)).slice(- 2);
            let second = ('00' + Math.floor(times % 60)).slice(- 2);
            let hhour = (hour > 0) ? hour + ':' : '';
            let TotalTimePlaceholder = document.getElementById('total_time');
            TotalTimePlaceholder.textContent = hhour + minute + ':' + second;

            let hours = Math.floor(time / 3600);
            let minutes = ('00' + Math.floor((time % 3600) / 60)).slice(- 2);
            let seconds = ('00' + Math.floor(time % 60)).slice(- 2);
            let currentTimePlaceholder = document.getElementById('play_time');
            let hh = (hours > 0) ? hours + ':' : '';
            currentTimePlaceholder.textContent = hh + minutes + ':' + seconds;
        });
    });
</script>
</body>
</html>