0

I'm implementing a facade for wavesurfer.js library. I have read the official docs and these questions. It should be an easy task, however I'm experiencing some problems. What I have so far:

@js.native
trait WaveSurferOpts extends js.Object {
  val container: String = js.native
  val waveColor: String = js.native
  val progressColor: String = js.native
}

object WaveSurferOpts {
  def apply(container: String, waveColor: String, progressColor: String): WaveSurferOpts = {
    js.Dynamic.literal(
      container = container,
      waveColor = waveColor,
      progressColor = progressColor
    ).asInstanceOf[WaveSurferOpts]
  }
}

@js.native
trait WaveSurfer extends js.Object {
  def load(url: String): js.Any = js.native
}

@js.native
object WaveSurfer extends js.Object {
  def create(options: WaveSurferOpts): WaveSurfer = js.native
}

It compiles fine, but while running

  val wso = WaveSurferOpts("#waveform", "violet", "purple")
  val ws = WaveSurfer.create(wso)
  ws.load("audio.wav")

I get

VM4626:27 Error: Container element not found
    at Object.WaveSurfer.init (lingvodoc2-frontend-jsdeps.js:47468)
    at Object.WaveSurfer.create (lingvodoc2-frontend-jsdeps.js:47468)
    at

It seems that options (basically, the only required parameter is container) are not passed properly. What's wrong with my code?

Community
  • 1
  • 1
ars
  • 1,509
  • 3
  • 18
  • 29
  • 1
    The `"Container element not found"` is triggered [when there is no element in the DOM for the given `container` identifier](https://github.com/katspaugh/wavesurfer.js/blob/e4d2536c6f27e5d8f2d1b6e32833018642904afa/src/wavesurfer.js#L49), not when the `container` property itself is not present. Make sure there indeed exists a DOM element whose `id` is `#waveform`. – sjrd Jul 06 '16 at 14:17
  • Oh, I had to check it myself. Not much experience in JS. Thank you. – ars Jul 06 '16 at 14:25

1 Answers1

0

The "Container element not found" is triggered when there is no element in the DOM for the given container identifier, not when the container property itself is not present. Make sure there indeed exists a DOM element whose id is #waveform.

ars
  • 1,509
  • 3
  • 18
  • 29