如何构建一个类似于播放器的声音云？

Question

在waveformjs.org的帮助下，我能够为mp3文件绘制波形。我也可以用 wav2json获取我自己的服务器上托管的音频文件的json数据，我不必依赖于soundcloud。到现在为止还挺好。现在，我的下一个挑战是

1. 在音频播放过程中填充波形颜色。
2. 点击波形音频的任何地方都应该从该点开始播放。

有没有人做过类似的事情？我试着调查soundcloud js SDK但没有成功。任何有关这方面的指示都将不胜感激，谢谢。

Answer 1

至于改变颜色，我之前的回答可能会有所帮助：
Soundcloud modify the waveform color

关于在单击波形时移动位置，您可以执行以下操作：

假设您已经从相对于画布调整的点击事件中获得x位置。

/// get a representation of x relative to what the waveform represents:
var pos = (x - waveFormX) / waveformWidth;

/// To convert this to time, simply multiply this factor with duration which
/// is in seconds:
audio.currentTime = audio.duration * pos;

希望这有帮助！

<强>更新

随着越来越多的用户使用移动设备，requestAnimationFrame不仅针对性能而且针对功耗进行了优化。因此，当浏览器选项卡不可见时，浏览器可能会或可能不会暂停或降低rAF的帧速率。这可能会导致基于位置的方法在切换制表符时延迟或不显示波形。

我建议始终使用基于时间的方法，因此FPS或其他行为都不会中断波形的绘制。

您可以强制在实际当前时间更新波形，幸运的是我们可以将其附加到音频元素的currentTime属性。

在rAF循环中，只需使用上面的“反转”公式更新这样的位置：

pos = audio.currentTime / audio.duration * waveformWidth + waveformX

当标签再次可见时，此方法将确保波形根据音频的实际时间位置继续。