title: Creating vertical wavesurfer
body: <p>With below code clicks doesn't represent the correct audio timing. Some how it messes the click events of audio. </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>        
  #audiovisualizer {
      transform: translateX(100%) rotate(90deg);
      transform-origin: top left;
  } </code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>     
  
    &lt;section id="audiovisualizer"&gt;
      &lt;button onclick="wavesurfer.skipBackward()"&gt;
          Backward
      &lt;/button&gt;
  
      &lt;button onclick="wavesurfer.playPause()"&gt;
          Play | Pause
          &lt;!-- &lt;ion-icon name="play"&gt;&lt;/ion-icon&gt; --&gt;
      &lt;/button&gt;
  
      &lt;button onclick="wavesurfer.skipForward()"&gt;
          Forward
      &lt;/button&gt;
  
      &lt;button onclick="wavesurfer.toggleMute()"&gt;
          Toggle Mute
      &lt;/button&gt;
      &lt;div id="waveform"&gt;&lt;/div&gt;
      &lt;div id="waveform-timeline"&gt;&lt;/div&gt;
  &lt;/section&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Is there any other way to work this around. Thanks in Advance!!</p>