javascript - 如何使用 wavesurfer.js 实时显示剩余时间-6ren

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

转载作者：行者123 更新时间：2023-11-29 17:54:21

25

4

我想实时显示正在播放的轨道的剩余时间，但由于我的 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'
});

关于javascript - 如何使用 wavesurfer.js 实时显示剩余时间，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40638181/

25

4

0

文章推荐： android - 如何要求多个权限来启动或绑定(bind)到服务

文章推荐： android - 在导航 Activity 时恢复 edittext 值

文章推荐： javascript - 访问器(行)函数中的 d3.tsv/d3.csv 列

javascript - Wavesurfer.js 工作正常，但 react-wavesurfer 有问题
我在使用 Wavesurfer 的网络项目中遇到了障碍。我已经在我的项目中安装了 wavesurfer.js 和 react-wavesurfer 作为节点模块。 Wavesurfer.js 似乎工作
wavesurfer.js绘制音频波形图的实现
1.查看效果图向前选中：向后选中：代码如下（示例）： ?
javascript - Wavesurfer.js无法渲染波形或播放
我尝试了github示例中的一些不同脚本以及我的脚本: https://cdnjs.cloudflare.com/ajax/libs/wavesurfer.js/1.2.3/wavesurfer.mi
javascript - Wavesurfer 如何加快播放音乐的过程
我正在使用WaveSurferJs播放流音频并在 wavesurfer init 后端设置为 MediaElement。还绘制了峰值 var wavesurfer = WaveSurfer.creat
javascript - wavesurfer 实时获取耗时
我正在使用 katspaugh's waveSurfer library用于播放声音文件。我编写代码以这种方式显示“耗时/总时间”。 waveSurfer.on('play', function()
javascript - Wavesurfer 时间轴插件下载已被弃用？
我想使用 wavesurfer.js 添加数字音频文件的时间线，不幸的是我的代码不起作用。我可以知道从哪里可以加载我的文件的timeline.js 吗？ Wavesurfer 时间线插件是否已弃用？
javascript - Wavesurfer.js 未在本地或从服务器加载
有人能发现这里的问题吗？ var wavesurfer = WaveSurfer.create({ container: '#waveform', waveColor: 'vio
audio - 在safari上完成加载之前，wavesurfer.js无法播放
我已经建立了一个waveurfer音频模型，该模型在chrome和firefox上运行良好。它马上开始。当我想在safari上点击播放时，它等待整个文件下载完毕，然后才播放...我在safari上打开
javascript - wavesurfer.js 页面上的多个实例
我正在使用 wavesurfer.js当页面上只有一个实例时效果很好，但我有多个实例并且不知道(因为我是一个 javascript 新手)如何将播放按钮链接到不同的实例。我只需要一些帮助...这就是
javascript - 动态创建多个具有唯一名称的 wavesurfer 对象
不确定我的措辞是否正确，但这是我正在尝试做的事情。我正在使用一个函数来呈现 wavesurfer 的多个实例在页面上。开箱即用，这很简单，因为您只需声明 wavesurfer 的每个单独实例: v
javascript - wavesurfer.js 不会加载本地文件
我一直在开发一个允许用户点击并操作 mp3 文件的在线应用程序，我正在尝试将本地文件从我的计算机加载到 wavesurfer 对象中，但我在 chrome 中不断收到此错误: "Access to X
javascript - 如何在 react-wavesurfer 中获取当前播放时间？
我需要获取音频的当前播放时间。我一直在使用 react-wavesurfer播放音频的包，我可以看到 wavesurfer.js有一种获取当前播放时间的方法，但我似乎无法弄清楚如何用 React 来做
javascript - 针对容器 div 初始化 WaveSurfer
我正在尝试使用 wavesurfer.js 为使用 JavaScript 动态创建的元素创建波形。这是我的代码: $(document).ready(function() { var id = 9
javascript - $scope 变量拒绝在 wavesurfer 的函数处理程序中更改值
大家好，下面是我的代码示例，我试图让 $scope.icon 在 wavesurfer 的函数处理程序中更新为新值，但它似乎对我不起作用，无论我做什么做。有人对此有想法吗？ msp.controlle
javascript - 如何使用 wavesurfer.js 实时显示剩余时间
我想实时显示正在播放的轨道的剩余时间，但由于我的 javascript 技能不是很先进，所以无法弄明白。 Wavesurfer.js 提供了一个叫getCurrentTime()的函数，但是我不知道怎
javascript - Angular 4 无法在我的组件中运行 WaveSurfer
我想在我的 Angular 项目上运行 WaveSurfer.js，但它不能像我想要的那样工作。WaveSurfer 在 Index 中完美运行。但是，我想要在我的组件中使用 WaveSurfer，但
node.js - 如何将音频数据从 Wavesurfer 区域复制到新的音频缓冲区？
Wavesurfer.js 很棒，但有点令人困惑。我已经实现了wavesurfer，但是我想构建一种方法来剪切用户选择的音频区域并将其粘贴到新的音频缓冲区中。目前，我正在控制台登录区域 js 文件以
Node.js 和 Wavesurfer.js
到目前为止，在我的研究中，我已经能够使用 Node.js 和 Express 向动态网页提供文件，如下所示。 app.use(express.static('./public')); 然后链接到公共(
reactjs - 如何在 React 中使用 wavesurfer.js？
我正在尝试在我的 react 应用程序中使用 wavesurfer.js 渲染音频文件。我是个菜鸟，我想知道为什么我总是收到“找不到容器元素”消息。简而言之，这是我需要知道的。提前致谢! impo
javascript - 我如何实现不使用 es6 的react-wavesurfer 实例？
我不熟悉es6，想在我的项目中使用react-wavesurfer。文档在这里:https://github.com/mspae/react-wavesurfer但示例使用是在 es6 中，我不确定如

首页

博学

6Ren·AI

商城

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