Code block stopped working on website but still functional in codepen

Site URL: https://www.joaohenriqueviegas.com/somewhere-between-altair-and-vega

I had this code block working sometime ago but now I've noticed it no longer works.
To test it, I tried pasting the code on Codepen and voillá, it does still work:

https://codepen.io/joaohenriqueviegas/pen/yLvjvOE

the link for the website is: https://www.joaohenriqueviegas.com/somewhere-between-altair-and-vega

<style>
#Play {
  background-image: url(https://www.joaohenriqueviegas.com/static/6060cfdbe8d1a946177222ab/t/607c415291aa5a30cb12af43/1618755922141/011PlayPauseIcon.png);
  background-size: contain;
}
#plus {
  background-image: url(https://www.joaohenriqueviegas.com/static/6060cfdbe8d1a946177222ab/t/607c4155a79f9205b0d698c0/1618755925449/011RightIcon.png);
  background-size: contain;
}
#minus {
  background-image: url(https://www.joaohenriqueviegas.com/static/6060cfdbe8d1a946177222ab/t/607c414b201c4c76efea22c1/1618755915497/011LeftIcon.png);
  background-size: contain;
}

#slide {
  position: relative;
  margin-left: 10%;
  height: 0px;
  width: 80%;
  border: none;
  background-image: url("Gallery Hall.png");
}
#slide .ui-slider-handle {
  width: 8%;
  height: 80px;
  position: absolute;
  margin-left: -4%;
  margin-top: 9.5%;
  background-position: top center;
  background-color: transparent;
  border: none;
  background-image: url(https://static1.squarespace.com/static/6060cfdbe8d1a946177222ab/t/6078b4567432e03ebb9d08f5/1618523222893/011Artboard+1_DE+42.png);
  background-size: contain;
}
#Buttons {
}

.button {
  border: none;
  background-color: transparent;
  width: 40px;
  height: 40px;
  margin: 20px 10px;
  cursor: pointer;
}

#first_player {
  background: transparent;
  width: 100%;
  padding-bottom: 27.1%;
  background-image: url(https://static1.squarespace.com/static/6060cfdbe8d1a946177222ab/t/6078b113156d863f2eb9bf75/1618522387737/Gallery+Hall.png);
  background-repeat: no-repeat;
  background-size: contain;
}
</style>

<div id="first_player">
  <div id="slide"> </div>
</div>
<div id="second_player"></div>
<div id="Buttons">
  <button onclick="down()" class="button" id="minus" type="button"></button>
  <button onclick="play_pause()" class="button" type="button" id="Play"></button>
  <button onclick="up()" class="button" id="plus" type="button"></button>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

<script>
  var playing = 1;
function play_pause() {
  if (playing) {
    playAudio(1);
    playAudio(0);
  } else {
    song1.pause();
    song2.pause();
  }
  playing ^= 1;
}
function up() {
  var val = $("#slide").slider("values", 0);
  if (val <= 90) {
    $("#slide").slider("value", val + 10);
    setVolume((val + 10) / 100);
  }
}
function down() {
  var val = $("#slide").slider("values", 0);
  if (val >= 10) {
    $("#slide").slider("value", val - 10);
    setVolume((val - 10) / 100);
  }
}

if (
  /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
    navigator.userAgent
  )
) {
  // true for mobile device
  console.log("mobile");
  var fileref = document.createElement("link");
  var filename = "slider_mobile.css";
  fileref.setAttribute("rel", "stylesheet");
  fileref.setAttribute("type", "text/css");
  fileref.setAttribute("href", filename);
} else {
  // false for not mobile device
  var fileref = document.createElement("link");
  var filename = "slider_desktop.css";
  fileref.setAttribute("rel", "stylesheet");
  fileref.setAttribute("type", "text/css");
  fileref.setAttribute("href", filename);
}

var song1 = new Audio("");
var song2 = new Audio("");
song1.volume = 0;
song2.volume = 1;

$(document).ready(function () {
  var play = false;
  $("#slide").slider({
    min: 0,
    max: 100,
    value: 0,
    animate: true,
    range: "min",
    slide: function (event, ui) {
      setVolume(ui.value / 100);
    }
  });
  $("#first_player").append(song1);
  $("#second_player").append(song2);
  song2.id = "song2";
  song1.id = "song1";
});

function playAudio(type) {
  var mediaExt = song1.canPlayType("audio/mp3")
    ? ".mp3"
    : song1.canPlayType("audio/ogg")
    ? ".ogg"
    : ""; //Firefox nao suporta mp3

  if (type == 1) {
    song1.src =
      "https://github.com/joaohenriqueviegas/Somewherebetweenaltarandvega/blob/main/Altar" +
      mediaExt +
      "?raw=true";
    song1.setAttribute("loop", "loop");
    song1.play();
  } else {
    song2.src =
      "https://github.com/joaohenriqueviegas/Somewherebetweenaltarandvega/blob/main/Vega" +
      mediaExt +
      "?raw=true";
    song2.setAttribute("loop", "loop");
    song2.play();
  }
}

function setVolume(myVolume) {
  var song1 = document.getElementById("song1");
  var song2 = document.getElementById("song2");
  song1.volume = myVolume;
  song2.volume = 1 - myVolume;
}
</script>

Basically the code block should have a drawing of a person that we can drag to control the volume of two audio sources. the arrows should also control that slider on the phone.

Right now the person doesn't appear at all and the arrows don't seem to work either.

I am using jquery but my cousin coded the javascript for me. I tried moving the script links to the header with code injection but that didn't help.

I'd appreciate any assistance.

Thank you very much,

João

Try remove jQuery link in Settings > Advanced > Code Injection then check it again

(Your site has 2 jquery link, I guess they conflict together)

@tuanphan 
It worked!
This had been making me mad!

Thank you so much for your help and for your quick reply!

Cheers,
João