nicenoise/script.js
Kumi efa5d905fe
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.
2024-11-13 10:56:57 +01:00

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;