Jump to content

joaohenriqueviegas

Member
  • Posts

    2
  • Joined

  • Last visited

Everything posted by joaohenriqueviegas

  1. @tuanphan It worked! This had been making me mad! Thank you so much for your help and for your quick reply! Cheers, João
  2. 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
×
×
  • 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.