[英]How to display remaining time in realtime with wavesurfer.js
我正在尝试实时显示正在播放的曲目的剩余时间,但由于我的 javascript 技能不是很先进,所以无法弄清楚。
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>
您可以这样做:
我添加了一些元素来保存演示的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('https://wavesurfer-js.org/example/media/demo.wav'); 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); } });
body { padding: 2em; padding-top: 4em; font: "Times New Roman"; color: white; background-color: black; letter-spacing: -0.007em; } titel { line-height: 1.5em; padding-bottom: 13em; } #maincontent { float: left; width: 500px; }
<script src="https://unpkg.com/wavesurfer.js"></script> <script src="https://unpkg.com/wavesurfer.js/dist/plugin/wavesurfer.timeline.min.js"></script> <section id="maincontent"> <div id="waveform"></div> <div id="waveform-timeline"></div> <button onClick="wavesurfer.playPause()">Play</button> <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> </section>
更新
对于毫秒,只需将秒乘以 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'
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.