如何使用waves實時顯示剩餘時間

我試圖顯示實時播放的曲目的剩餘時間，但無法弄清楚，因爲我的JavaScript技能不是很先進。如何使用waves實時顯示剩餘時間

Wavesurfer.js提供了一個名爲getCurrentTime（）的函數，但我不知道如何實現它，所以時間顯示在播放按鈕旁邊。

感謝您的幫助！

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

來源

2016-11-16 Roland

獲取總時間，並減去當前時間 – Feathercrown

這裏是你如何能做到這一點：

我增加了一些元素來保存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); 
    } 
});

這是基於你的代碼工作的例子：

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(), 
 
     \t currentTime = wavesurfer.getCurrentTime(), 
 
     \t 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

對於millisecods，只需將秒數乘以1000即可得出結果。

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

UPDATE 2

要chnage時間軸插件的顏色，使用時間軸插件選項。您可以像這樣控制4種不同的顏色：

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

來源

2016-11-16 17:49:29

非常感謝Christos！我還有一個問題，我需要做什麼才能以毫秒顯示剩餘時間和當前時間並更改格式？ – Roland

這很容易。查看我更新的答案並運行更新後的代碼。 –

另一個問題，如果沒關係。我使用的是時間軸插件，但顏色並不相應，因爲我使用黑色而不是白色背景。我是否只能編輯時間軸插件的js文件中的顏色，還是有辦法修改它們而無需自己託管修改的版本？ – Roland

如何使用waves實時顯示剩餘時間

回答

相關問題