Welcome toVigges Developer Community-Open, Learning,Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
1.0k views
in Technique[技术] by (71.8m points)

我使用的这个wavesurfer.js 波形控件是 Canvas绘制的。每次重新加载都很慢,怎样提高用户体验呢?

我使用的这个wavesurfer.js 波形控件是 Canvas绘制的。
每次重新加载都很慢,都是加载完之后。突然闪现出来。非常突兀。
怎样提高用户体验呢?
image.png

我的写法有问题吗?
` this.$nextTick(() => {

  // console.log('加载WaveSurfer')
  // console.log(WaveSurfer)
  this.wavesurfer = WaveSurfer.create({
    // 应该在其中绘制波形的CSS选择器或HTML元素。这是唯一必需的参数。
    container: this.$refs.waveform,
    // 光标的填充颜色,指示播放头的位置。
    cursorColor: 'red',
    // 更改波形容器的背景颜色。
    backgroundColor: 'white',
    // 光标后的波形填充颜色。
    waveColor: '#0066CC',
    // 光标后面的波形部分的填充色。当progressColor和waveColor相同时,完全不渲染进度波
    progressColor: '#99CCFF',
    backend: 'MediaElement',
    // 音频播放时间轴
    mediaControls: false,
    // 播放音频的速度
    audioRate: '1',
    // 插件:此教程配置了光标插件和时间轴插件
    plugins: [
      // 光标插件
      CursorPlugin.create({
        showTime: true,
        opacity: 1,
        customShowTimeStyle: {
          'background-color': '#000',
          color: '#fff',
          padding: '2px',
          'font-size': '10px'
        }
      }),
      // 时间轴插件
      Timeline.create({
        container: '#wave-timeline'
      })
    ]
  })
  this.wavesurfer.on('error', function(e) {
    console.warn(e)
  })
  //加载音频url
  this.wavesurfer.load(this.voiceSrc)
  this.volumeValue = this.wavesurfer.getVolume() * 100
})


let erd = elementResizeDetectorMaker()
let that = this
erd.listenTo(document.getElementById('mixin-components-container'), (element) => {
  that.$nextTick(() => {
    that.wavesurfer.load(this.voiceSrc)
  })
})`

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

从你给出的例图来说,信息量太大,需要绘制的点过多(数据获取和处理都会慢)才是绘制慢的根本原因,
其实你可以考虑一下如何降低绘制量,比如不同显示比例下降低绘制精度,如在全图下隔10个数据才真正绘制一个,显示局部时调整间隔,最大显示时每个都绘制(但只处理可能看到的部分)
这样数量级的数据减少会加快很多。
其实想一下,在全面显示时细节信息绘制上有点偏差其实是看不出来的。


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to Vigges Developer Community for programmer and developer-Open, Learning and Share
...