music was too loud, now need to find true dmca free music
This commit is contained in:
parent
7fee8ea735
commit
00c6891eae
@ -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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|||||||
@ -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">
|
||||||
|
|||||||
@ -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 = '▶';
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user