Kumi
efa5d905fe
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.
53 lines
No EOL
1.4 KiB
JavaScript
53 lines
No EOL
1.4 KiB
JavaScript
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; |