Jump to content

Code block stopped working on website but still functional in codepen

Recommended Posts

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

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.