我试图显示实时播放的曲目的剩余时间,但无法弄清楚,因为我的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>
获取总时间,并减去当前时间 – Feathercrown