文章/答案/技术大牛

发布

社区首页 >问答首页 >如何用wavesurfer.js实时显示剩余时间

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

Stack Overflow用户

提问于 2016-11-16 17:10:31

回答 1查看 6.8K关注 0票数 6

我正在尝试实时显示正在播放的曲目的剩余时间，但由于我的javascript技能不是很先进，我无法理解它。

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

谢谢你的帮助！

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

javascript

回答 1

Stack Overflow用户

回答已采纳

发布于 2016-11-16 17:49:29

以下是您可以这样做的方法：

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

票数 15

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/40638181

复制

相似问题

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

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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