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