feat: add rain sound with playback controls
Introduced a basic web page featuring a sound control interface that allows users to play or pause a rain sound. Includes a slider to adjust the rain sound volume. A modal offers audio attribution details, enhancing user experience and compliance with audio licensing. The addition consists of HTML for structure, CSS for styling, and JavaScript for interactive functionalities. This update enriches the website with ambient noise functionality, promoting an engaging user interface.
This commit is contained in:
commit
efa5d905fe
GPG key ID:
ECBCC9082395383F
4 changed files with 177 additions and 0 deletions
BIN
audio/rain.mp3
Normal file
BIN
audio/rain.mp3
Normal file
Binary file not shown.
37
index.html
Normal file
37
index.html
Normal file
|
|
@ -0,0 +1,37 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Nice Noise!</title>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="sound-controls">
|
||||
<div class="sound">
|
||||
<button id="toggle">Play / Pause</button>
|
||||
</div>
|
||||
<div class="sound">
|
||||
<label>Rain</label>
|
||||
<input class="sound-slider" type="range" min="0" max="100" value="0" id="rain-slider">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<footer>
|
||||
<div class="footer-content">
|
||||
<p><button id="attributions-button">Audio Attributions</button></p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<div id="attribution-modal" class="modal">
|
||||
<div class="modal-content">
|
||||
<span class="close-button">×</span>
|
||||
<h2>Audio Attributions</h2>
|
||||
<ul>
|
||||
<li>Rain sound: <a href="https://freesound.org/people/inchadney/sounds/52777/">Rain.wav</a> by <a href="https://freesound.org/people/inchadney/">inchadney</a> | License: <a href="https://creativecommons.org/licenses/by/4.0/">Attribution 4.0</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<script src="script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
53
script.js
Normal file
53
script.js
Normal file
|
|
@ -0,0 +1,53 @@
|
|||
const audioFiles = {
|
||||
rain: new Audio('audio/rain.mp3'),
|
||||
};
|
||||
|
||||
function toggleSound() {
|
||||
if (!playing) {
|
||||
for (const audio in audioFiles) {
|
||||
audioFiles[audio].play();
|
||||
playing = true;
|
||||
}
|
||||
}
|
||||
else {
|
||||
for (const audio in audioFiles) {
|
||||
audioFiles[audio].pause();
|
||||
playing = false;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
document.getElementById('toggle').addEventListener('click', toggleSound);
|
||||
|
||||
const sliders = document.getElementsByClassName('sound-slider');
|
||||
|
||||
Array.from(sliders).forEach(slider => {
|
||||
slider.addEventListener('input', function (e) {
|
||||
for (const audio in audioFiles) {
|
||||
const slider = document.getElementById(audio + '-slider');
|
||||
audioFiles[audio].volume = slider.value / 100;
|
||||
}
|
||||
})
|
||||
});
|
||||
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
const modal = document.getElementById('attribution-modal');
|
||||
const openButton = document.getElementById('attributions-button');
|
||||
const closeButton = modal.querySelector('.close-button');
|
||||
|
||||
openButton.addEventListener('click', () => {
|
||||
modal.style.display = 'block';
|
||||
});
|
||||
|
||||
closeButton.addEventListener('click', () => {
|
||||
modal.style.display = 'none';
|
||||
});
|
||||
|
||||
window.addEventListener('click', (event) => {
|
||||
if (event.target === modal) {
|
||||
modal.style.display = 'none';
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
var playing = false;
|
||||
87
style.css
Normal file
87
style.css
Normal file
|
|
@ -0,0 +1,87 @@
|
|||
body {
|
||||
font-family: Arial, sans-serif;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
background-color: #f0f0f0;
|
||||
}
|
||||
|
||||
#sound-controls {
|
||||
width: 80%;
|
||||
max-width: 600px;
|
||||
background: white;
|
||||
padding: 20px;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
#footer {
|
||||
text-align: center;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.sound {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
button {
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.modal {
|
||||
display: none;
|
||||
position: fixed;
|
||||
z-index: 1000;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
background-color: #fefefe;
|
||||
margin: 15% auto;
|
||||
padding: 20px;
|
||||
border: 1px solid #888;
|
||||
width: 80%;
|
||||
max-width: 600px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.close-button {
|
||||
color: #aaa;
|
||||
float: right;
|
||||
font-size: 28px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.close-button:hover,
|
||||
.close-button:focus {
|
||||
color: black;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
footer {
|
||||
width: 100%;
|
||||
background: #333;
|
||||
color: white;
|
||||
text-align: center;
|
||||
padding: 10px 0;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.footer-content a {
|
||||
color: #aaa;
|
||||
text-decoration: none;
|
||||
margin: 0 10px;
|
||||
}
|
||||
|
||||
.footer-content a:hover {
|
||||
color: white;
|
||||
}
|
||||
Loading…
Reference in a new issue