这篇文章上次修改于 790 天前,可能其部分内容已经发生变化,如有疑问可询问作者。

WaveSurfer 是一个 JavaScript 编写的优秀的构建在 Web 音频 API 和 HTML5 画布之上的一种可自定义的音频波形可视化效果库。详细信息可参考官方网站:wavesurfer.js

今天要说的是 wavesurfer 的 cursor 插件的一个问题。

cursor 插件可以在音频波形图上显示一条标记线和标记线处的时间。我把这个功能加上后发现标记线的位置是错误的,最后是在官方 Github 的 issues 里找到答案的(The cursor show outside the wrapper when try to use cursor plugin.)。

解决办法很简单,承载 wavesurfer 的父容器定位必须是 relative,即:

#waveform {
     position: relative;
}