wavesurfer.js: Live call backward/forward functionality is not working in chrome

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>

About this issue

Original URL
State: closed
Created 3 years ago
Comments: 16 (7 by maintainers)

Most upvoted comments

@thijstriemstra Thank you so much. And tracker link : https://bugs.chromium.org/p/chromium/issues/detail?id=1240121

kinjal-pethani on Aug 16, 2021