Roland Roland - 20 days ago 14
Javascript Question

How to display remaining time in realtime with wavesurfer.js

I'm trying to display the remaining time of a track being played in realtime, but can't figure it out since my javascript skills are not very advanced.

Wavesurfer.js provides a function called getCurrentTime(), but I don't know how to implement it, so the time is displayed next to the play button.

Thanks for the Help!

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Unbenanntes Dokument</title>

<style type="text/css">
body {
padding: 2em;
padding-top:4em;
font: "Times New Roman";
color: white;
background-color: black;
letter-spacing: -.007em;
}
titel { line-height:1.5em; padding-bottom:13em;}
.colme {
color: #B7B498
}
.subtitel {
font-style:italic;}

#maincontent {
float:left;
width:700px;
padding-right:3em;}

#sidecontent {float:left; width:300px;}



.link {font-size:1em; float:left;}
</style>
</head>

<body>


<section id="maincontent">
<titel>
<p>Lorem Ipsom<br>
</p>
</titel>
<div id="waveform"></div>
<div id="waveform-timeline"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/wavesurfer.js/1.2.3/wavesurfer.min.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/wavesurfer.js/1.2.3/plugin/wavesurfer.timeline.min.js"></script>
<script type="text/javascript">
var wavesurfer = WaveSurfer.create({
container: '#waveform',
waveColor: 'white',
progressColor: 'red',
audioRate: 1,
barWidth: 3,
height: 250,
pixelRatio:1
});
wavesurfer.load('http://ia902606.us.archive.org/35/items/shortpoetry_047_librivox/song_cjrg_teasdale_64kb.mp3');

wavesurfer.on('ready', function () {
var timeline = Object.create(WaveSurfer.Timeline);

timeline.init({
wavesurfer: wavesurfer,
container: '#waveform-timeline'
});});


</script>
<button onClick="wavesurfer.playPause()">
Play
</button>

<span style="padding-left:3em; font-family:Arial; font-size:0.8em;"> Recorder in 2016</span>
</section>

<div id="sidecontent">
<p>where</p>
</div>

<div style="clear:both"> </div>
</body>
</html>

Answer

Here is how you can do it:

I added some elements to hold the total, current and remaining time for demonstration:

<div>Total time: <span id="time-total">0.00</span> seconds</div>
<div>Current time: <span id="time-current">0.00</span> seconds</div>
<div>Ramaining time: <span id="time-remaining">0.00</span> seconds</div>

wavesurfer has an audioprocess event, which calls a function while its playing the file. I use that to get and display the times like this:

wavesurfer.on('audioprocess', function() {
    if(wavesurfer.isPlaying()) {
        var totalTime = wavesurfer.getDuration(),
            currentTime = wavesurfer.getCurrentTime(),
            remainingTime = totalTime - currentTime;

        document.getElementById('time-total').innerText = totalTime.toFixed(1);
        document.getElementById('time-current').innerText = currentTime.toFixed(1);
        document.getElementById('time-remaining').innerText = remainingTime.toFixed(1);
    }
});

Here is a working example based on your code:

var wavesurfer = WaveSurfer.create({
    container: '#waveform',
    waveColor: 'white',
    progressColor: 'red',
    audioRate: 1,
    barWidth: 3,
    height: 250,
    pixelRatio:1
});
 wavesurfer.load('http://ia902606.us.archive.org/35/items/shortpoetry_047_librivox/song_cjrg_teasdale_64kb.mp3');

 wavesurfer.on('ready', function () {
  var timeline = Object.create(WaveSurfer.Timeline);

  timeline.init({
    wavesurfer: wavesurfer,
    container: '#waveform-timeline'
  });});

wavesurfer.on('audioprocess', function() {
    if(wavesurfer.isPlaying()) {
        var totalTime = wavesurfer.getDuration(),
        	currentTime = wavesurfer.getCurrentTime(),
        	remainingTime = totalTime - currentTime;
        
        document.getElementById('time-total').innerText = Math.round(totalTime * 1000);
        document.getElementById('time-current').innerText = Math.round(currentTime * 1000);
        document.getElementById('time-remaining').innerText = Math.round(remainingTime * 1000);
    }
});
body {
    padding: 2em;
    padding-top:4em;
    font: "Times New Roman";
    color: white;
    background-color: black;
    letter-spacing: -.007em;
}
titel { line-height:1.5em; padding-bottom:13em;}
.colme {
    color: #B7B498
}
.subtitel {
    font-style:italic;}

#maincontent {
    float:left;
    width:700px;
    padding-right:3em;}

#sidecontent {float:left; width:300px;}



.link {font-size:1em; float:left;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/wavesurfer.js/1.2.3/wavesurfer.min.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/wavesurfer.js/1.2.3/plugin/wavesurfer.timeline.min.js"></script>

<section id="maincontent">
<titel>
<p>Lorem Ipsom<br>
</p>
</titel>
<div id="waveform"></div>
<div id="waveform-timeline"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/wavesurfer.js/1.2.3/wavesurfer.min.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/wavesurfer.js/1.2.3/plugin/wavesurfer.timeline.min.js"></script>

<button onClick="wavesurfer.playPause()">
      Play
    </button>

    <span style="padding-left:3em; font-family:Arial; font-size:0.8em;"> Recorder in 2016</span>
    
    
<div>Total time: <span id="time-total">0</span> milliseconds</div>
<div>Current time: <span id="time-current">0</span> milliseconds</div>
<div>Ramaining time: <span id="time-remaining">0</span> milliseconds</div>

</div>
</section>

<div id="sidecontent">
<p>where</p>
</div>

<div style="clear:both"> </div>

UPDATE:

For millisecods, just multiply the seconds by 1000 and round the result.

document.getElementById('time-total').innerText = Math.round(totalTime * 1000);