Error: Container element not found

torinberger commented 6 years ago

Wavesurfer.js version(s):

1.1.10

Browser version(s):

Chrome v66.0.3359.139

Code needed to reproduce the issue:

Index.js

<html>
<head>
    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/gsap/1.18.2/TweenLite.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/gsap/latest/plugins/CSSPlugin.min.js" charset="utf-8"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/gsap/1.18.2/easing/EasePack.min.js" charset="utf-8"></script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/wavesurfer.js/1.1.10/wavesurfer.min.js"></script>
  <script src="./main.js"></script>
</head>
<body>
    <h1>wavesurfer example 1: basic</h1>
    <h3>click the auto-generated waveform to seek to the clicked spot and start/pause/resume playback</h3>

    <section id="waveform_box">
      <div id="waveform" onclick="wavesurfer.playPause();">
        <!-- wavesurfer.js will fill the content -->
      </div>
    </section>
</body>
</html>

main.js

// create wavesurfer object
wavesurfer = WaveSurfer.create({
  container: '#waveform'
});

//load audio file
wavesurfer.load("https://ia800301.us.archive.org/15/items/fire_and_ice_librivox/fire_and_ice_frost_apc_64kb.mp3"); // load audio

Error

Uncaught Error: Container element not found at Object.init (VM126 wavesurfer.min.js:4) at Object.a.create (VM126 wavesurfer.min.js:4) at VM127 main.js:2

I'm really stuck, just followed docs and this https://codepen.io/LBPSlava/pen/rLJoPG. Any help would be appreciated. Thanks

thijstriemstra commented 6 years ago

@torinberger you're using an ancient version of wavesurfer. Please try 2.0.5 or newer.

torinberger commented 6 years ago

I just tried with version 2.0.5, from this cdn: https://cdnjs.cloudflare.com/ajax/libs/wavesurfer.js/2.0.5/wavesurfer.min.js

Still get the same error

SalmaTofaily commented 5 years ago

You shall define the waveform div before the js script that initializes the object from the container. This example can work, regardless of that, you may find a CORS problem to solve.

katspaugh / wavesurfer.js