System-End/highway
1
0
Fork 0
mirror of https://github.com/System-End/highway.git synced 2026-04-19 16:28:24 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

global audio toggle

Browse source
This commit is contained in:
aqua 2025-05-12 18:03:06 -04:00
parent 329fa881fa
commit b603bd7e4c
5 changed files with 25 additions and 23 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
app/javascript/application.js
View file

@ -9,8 +9,9 @@ import "@rails/actiontext"
const audio = new Audio('https://hc-cdn.hel1.your-objectstorage.com/s/v3/98df9f1054b50821b1d2208a7d3386a2408134be_d3bd3f0972d62d58cdfce91bc042d32ee643aa94_ui_button_confirm_audio__mp3cut.net__audio.mp4');
audio.volume = 0.5
document.addEventListener('click', (event) => {
var myAudio = document.getElementById('background-audio');
let el = event.target.closest('a.btn');
if (el) {
if (el && ((myAudio && !myAudio.muted))) {
audio.play();
}
});

21
app/views/landing/index.html.erb
View file

@ -1,24 +1,3 @@
<script>
function toggleMute() {
var myAudio = document.getElementById('background-audio');
myAudio.muted = !myAudio.muted;
var audioToggle = document.getElementById('audio-toggle');
audioToggle.textContent = myAudio.muted ? '🔇' : '🔊';
}
</script>
<div class="fixed bottom-0 right-0 z-50 p-4">
<audio id="background-audio" loop autoplay muted>
<source src="/highwaymusic.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
<button id="audio-toggle" onclick="toggleMute()" class="bg-[#5453FF] rounded-full p-3 px-4 border-4 border-white text-white">
🔇
</button>
</div>
<%= image_tag "/bg3.png", class: "absolute w-full h-screen h-full object-cover z-[-1] fixed opacity-20" %>
<a href="https://hackclub.com/"><img style="position: absolute; top: 100px; left: 0; border: 0; width: 256px; z-index: 10;" src="https://assets.hackclub.com/banners/2025.svg" alt="Hack Club"/></a>

3
app/views/layouts/application.html.erb
View file

@ -24,7 +24,8 @@
</head>
<body>
<main class="">
<%= render partial: "shared/audio" %>
<main class="">
<%= render "shared/topbar" %>
<% if show_sidebar? %>
<%# render "shared/sidebar" %>

2
app/views/layouts/overview.html.erb
View file

@ -23,6 +23,8 @@
</head>
<body>
<%= render partial: "shared/audio" %>
<main class="">
<div class = "grid grid-cols-5">
<div class = "col-span-full md:col-span-1 inline md:sticky md:h-screen top-0 mt-12">

19
app/views/shared/_audio.html.erb Normal file
View file

@ -0,0 +1,19 @@
<script>
function toggleMute() {
var myAudio = document.getElementById('background-audio');
myAudio.muted = !myAudio.muted;
var audioToggle = document.getElementById('audio-toggle');
audioToggle.textContent = myAudio.muted ? '🔇' : '🔊';
}
</script>
<div class="fixed bottom-0 right-0 z-50 p-4">
<audio id="background-audio" loop autoplay muted data-turbo-permanent>
<source src="/highwaymusic.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
<button id="audio-toggle" onclick="toggleMute()" class="bg-[#5453FF] rounded-full p-3 px-4 border-4 border-white text-white">
🔇
</button>
</div>