Question

我试图实时显示正在播放的曲目的剩余时间，但由于我的javascript技能不是很高级，因此无法弄清楚。

Wavesurfer.js提供了一个名为getCurrentTime（）的函数，但我不知道如何实现它，所以时间显示在播放按钮旁边。

感谢您的帮助！

>> a = -2:0.5:2

a =

   -2.0000   -1.5000   -1.0000   -0.5000         0    0.5000    1.0000    1.5000    2.0000

>> b = (a > 0) - (a < 0)

b =

    -1    -1    -1    -1     0     1     1     1     1

Answer 1

以下是如何做到这一点：

我添加了一些元素来保持total，current和remaining时间进行演示：

<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有一个audioprocess事件，在播放文件时会调用一个函数。我使用它来获取和显示这样的时间：

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);
    }
});

以下是基于您的代码的工作示例：

＆＃13;

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',
    primaryFontColor: '#fff',
    primaryColor: '#fff',
    secondaryColor: '#fff',
    secondaryFontColor: '#fff'
  });});

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);
    }
});

＆＃13;

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;}

＆＃13;

<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>

＆＃13;

<强>更新

对于毫秒编码，只需将秒数乘以1000并将结果四舍五入。

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

更新2

要设置时间轴插件颜色，请使用时间轴插件选项。你可以控制4种不同的颜色：

timeline.init({
    wavesurfer: wavesurfer,
    container: '#waveform-timeline',
    primaryFontColor: '#fff',
    primaryColor: '#fff',
    secondaryFontColor: '#fff',
    secondaryColor: '#fff'
});

如何使用wavesurfer.js实时显示剩余时间

1 个答案: