music was too loud, now need to find true dmca free music

This commit is contained in:
fatmeatwsl 2025-04-22 21:41:32 +02:00
parent 7fee8ea735
commit 00c6891eae
3 changed files with 50 additions and 17 deletions

View File

@ -86,19 +86,56 @@ nav ul li a:hover {
margin-bottom: 1rem; margin-bottom: 1rem;
} }
.controls {
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
flex-wrap: wrap;
}
.controls button { .controls button {
background: #1a1a1a; background: var(--background-color);
border: 1px solid var(--primary-color); border: 1px solid var(--primary-color);
color: var(--primary-color); color: var(--primary-color);
padding: 0.5rem 1rem; padding: 0.3rem 0.6rem;
margin: 0 0.5rem; font-size: 1rem;
font-size: 1.2rem;
cursor: pointer; cursor: pointer;
font-family: 'Orbitron', sans-serif; font-family: 'Orbitron', sans-serif;
text-shadow: 0 0 3px var(--primary-color); text-shadow: 0 0 2px var(--primary-color);
border-radius: 4px;
} }
.controls button:hover { .controls button:hover {
background: var(--primary-color); background: var(--primary-color);
color: var(--background-color); color: var(--background-color);
} }
.music-button {
background-color: rgba(0, 0, 0, 0.6);
border: 1px solid var(--color-accent-cyan);
padding: 0.3rem 0.5rem;
margin: 0 0.2rem;
font-size: 1.1rem;
color: var(--color-accent-cyan);
font-family: 'Orbitron', sans-serif;
cursor: pointer;
text-shadow: 0 0 2px var(--color-accent-cyan);
box-shadow: 0 0 4px var(--color-accent-cyan),
0 0 8px var(--color-accent-cyan);
border-radius: 4px;
transition: box-shadow 0.2s ease;
}
.music-button:hover {
animation: btnflicker 0.5s linear infinite;
}
@keyframes btnflicker {
0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% {
opacity: 1;
}
20%, 22%, 24%, 55% {
opacity: 0.6;
}
}

View File

@ -42,9 +42,9 @@
<div id="music-player" class="terminal"> <div id="music-player" class="terminal">
<div id="now-playing"></div> <div id="now-playing"></div>
<div class="controls"> <div class="controls">
<button id="prev-btn"></button> <button id="prev-btn" class="music-button"></button>
<button id="play-pause-btn">▶️</button> <button id="play-pause-btn" class="music-button"></button>
<button id="next-btn"></button> <button id="next-btn" class="music-button"></button>
</div> </div>
</div> </div>
<main id="main-content"> <main id="main-content">

View File

@ -38,17 +38,13 @@ const playlist = [
{ {
title: 'DJ Ten - MagnetoSphere', title: 'DJ Ten - MagnetoSphere',
src: 'assets/DJ_Ten_MagnetoSphere.wav' src: 'assets/DJ_Ten_MagnetoSphere.wav'
},
{
title: 'National Aerobic Championship Theme',
src: 'assets/National_Aerobic_Championship_Theme.wav'
} }
]; ];
let currentTrack = 0; let currentTrack = 0;
const audio = new Audio(); const audio = new Audio();
audio.loop = false; audio.loop = false;
audio.volume = 0.2; audio.volume = 0.04;
const nowPlaying = document.getElementById('now-playing'); const nowPlaying = document.getElementById('now-playing');
const playPauseBtn = document.getElementById('play-pause-btn'); const playPauseBtn = document.getElementById('play-pause-btn');
@ -58,18 +54,18 @@ const prevBtn = document.getElementById('prev-btn');
function loadTrack(index) { function loadTrack(index) {
currentTrack = index; currentTrack = index;
audio.src = playlist[currentTrack].src; audio.src = playlist[currentTrack].src;
nowPlaying.textContent = `🎵 Now Playing: ${playlist[currentTrack].title}`; nowPlaying.textContent = ` Now Playing: ${playlist[currentTrack].title}`;
audio.play(); audio.play();
playPauseBtn.textContent = '⏸'; playPauseBtn.textContent = '⏸';
} }
playPauseBtn.addEventListener('click', () => { playPauseBtn.addEventListener('click', () => {
if (audio.paused) { if (audio.paused) {
audio.play(); audio.play();
playPauseBtn.textContent = '⏸'; playPauseBtn.textContent = '⏸';
} else { } else {
audio.pause(); audio.pause();
playPauseBtn.textContent = '▶'; playPauseBtn.textContent = '▶';
} }
}); });