从SoundCloud的Waveform.js库获得更好的质量 [英] Get better quality from SoundCloud's Waveform.js lib

问题描述

目前，我使用Waveform.js（，尝试将以下内容插入波形.coffee 第19行之后：

 ＃高DPI画布
 devicePixelRatio = window.devicePixelRatio || 1 
 backingStoreRatio = @ context.webkitBackingStorePixelRatio || @ context.mozBackingStorePixelRatio || @ context.msBackingStorePixelRatio || @ context.oBackingStorePixelRatio || @ context.backingStorePixelRatio || 1 
 @ratio = devicePixelRatio / backingStoreRatio 
 if devicePixelRatio isnt backingStoreRatio 
 @ canvas.width = @ratio * @width 
 @ canvas.height = @ratio * @height 
 @ canvas.style.width =＃{@ width} px
 @ canvas.style.height =＃{@ height} px¥b $ b @ context.scale @ratio，@ratio 
  

我创建了一个 pull request 以合并此更改。

Currently I'm using Waveform.js (http://waveformjs.org) to generate waveforms from SoundCloud tracks.

Unfortunately the generated canvas has a very low image quality (especially on Retina):

I would like to create Waveform very similar to the Soundcloud one:

Do you know how can I improve the quality of an image? Maybe there's a better solution for generating such waveforms?

My app is completely client-side, everything is done in the browser, so perfect scenario for me will be:

1. Send waveform_url to the library which can generate canvas/svg/etc.
2. Or get the data from waveform_url by myself and feed it to the library.
3. Also it will be superb to sync HTML5 Audio element playing together with generated waveform.

I'll appreciate any input and suggestions. Thanks!

解决方案

To add on to @XGreen's answer, try inserting the following into waveform.coffee after line 19:

# High DPI Canvas
devicePixelRatio = window.devicePixelRatio || 1
backingStoreRatio = @context.webkitBackingStorePixelRatio || @context.mozBackingStorePixelRatio || @context.msBackingStorePixelRatio || @context.oBackingStorePixelRatio || @context.backingStorePixelRatio || 1
@ratio = devicePixelRatio / backingStoreRatio
if devicePixelRatio isnt backingStoreRatio
  @canvas.width  = @ratio * @width
  @canvas.height = @ratio * @height
  @canvas.style.width  = "#{@width}px"
  @canvas.style.height = "#{@height}px"
  @context.scale @ratio, @ratio

I've created a pull request to merge this change.

这篇关于从SoundCloud的Waveform.js库获得更好的质量的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！