commit efa5d905fec67b0c281c15a28691af359921f14d Author: Kumi Date: Wed Nov 13 10:56:57 2024 +0100 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. diff --git a/audio/rain.mp3 b/audio/rain.mp3 new file mode 100644 index 0000000..fd5d6de Binary files /dev/null and b/audio/rain.mp3 differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..63a47bd --- /dev/null +++ b/index.html @@ -0,0 +1,37 @@ + + + + + + Nice Noise! + + + +
+
+ +
+
+ + +
+
+ + + + + + + diff --git a/script.js b/script.js new file mode 100644 index 0000000..f92ed7f --- /dev/null +++ b/script.js @@ -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; \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..18ef4cc --- /dev/null +++ b/style.css @@ -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; +} \ No newline at end of file