Two scripts conflicting?

Two scripts conflicting?

I have two scripts that work fine by themselves.
If I try to use both scripts together the first one doesn't work, but the second one does. The first script is to control the playbackRate of myaudio element. The second script is for a vu or volume meter.

This is both scripts in the order I'm using them:
  1.  // Create a couple of global variables to use.
           var audioElement = document.getElementById("myaudio"); // Audio element
           var ratedisplay = document.getElementById("rate"); // Rate display area
           // Hook the ratechange event and display the current playbackRate after each change
           audioElement.addEventListener("ratechange", function () {
             ratedisplay.innerHTML = "Speed: " + audioElement.playbackRate;
           }, false);

           // Increment playbackRate by 1
    $("#increaseSpeed").click(increaseSpeed);
           function increaseSpeed() {
             audioElement.playbackRate += 0.1;
         } 

           // Increment playbackRate by 1
    $("#decreaseSpeed").click(decreaseSpeed);
           function decreaseSpeed() {
             audioElement.playbackRate -= 0.05;
           }
      // Initialize the peak meters with the newly created audio element
      var myMeterElement = document.getElementById('my-peak-meter');
      var myAudioElement = audio.element;
      var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
      var sourceNode = audioCtx.createMediaElementSource(myAudioElement); 
    sourceNode.connect(audioCtx.destination);
      var meterNode = webAudioPeakMeter.createMeterNode(sourceNode, audioCtx);
      webAudioPeakMeter.createMeter(myMeterElement, meterNode, {});

I'm using jquery 3.1.1 I have tried all kinds of things, but I'm not good enough with jquery to work this out.
Thank you for any help recieved.