title: How can I call javascript library functions externally?
body: <p>I'm working on an app that deals with web audio and waveform display.</p>
  
  <p>For it, I'm using a library called <a href="https://wavesurfer-js.org/" rel="nofollow">Wavesurfer</a> made for specifically that.</p>
  
  <p>The problem I'm running into is calling the function for the track to play. I tried putting it into a external JavaScript script using jQuery's .click(), but it didn't work.</p>
  
  <p>So, I decided to try the onclick() event on the button itself like this: </p>
  
  <pre><code>&lt;div style="text-align: center"&gt;
    &lt;button class="btn btn-primary" onclick="wavesurfer.playPause()"&gt;
      Play
    &lt;/button&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and the only change is that it tells me in the console, "wavesurfer is not defined.", but it HAS to be defined since it's still drawing the waveform of the audio!</p>
  
  <p>The strangest part is this EXACT code works fine in <a href="http://codepen.io/anon/pen/XjmYRP" rel="nofollow">CodePen!</a></p>
  
  <p>EDIT: Full code below:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/wavesurfer.js/1.1.2/wavesurfer.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="C:\Users\Ryan\Desktop\wavesurfer.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div id="waveform"&gt;&lt;/div&gt;
  
  &lt;div style="text-align: center"&gt;
    &lt;button class="btn btn-primary" onclick="wavesurfer.playPause()"&gt;
  Play
    &lt;/button&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>And JavaScript:</p>
  
  <pre><code>$(document).ready(function(){
  var wavesurfer = WaveSurfer.create({
      container: '#waveform',
      waveColor: 'red',
      progressColor: 'purple'
  });
  wavesurfer.load('https://archive.org/download/Metallica_37/Metallica-MasterOfPuppets.mp3');
  
  });
  </code></pre>