kumi/nicenoise
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: enhance audio handling with attribution

Browse source 
Audio file structures are refactored to include attribution data, which is dynamically appended to the HTML. This change centralizes the management of audio attributes and presentation, simplifying future audio feature enhancements. A new function, `updateVolumes()`, streamlines volume updates on input change events, improving code readability and maintainability.
This commit is contained in:
Kumi 2024-11-13 16:30:06 +01:00
parent 372dfc6cdd
commit 3261e761fb
Signed by: kumi
GPG key ID: ECBCC9082395383F
2 changed files with 21 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
index.html
View file

@ -23,9 +23,7 @@
<div class="modal-content"> <div class="modal-content">
<span class="close-button">&times;</span> <span class="close-button">&times;</span>
<h2>Audio Attributions</h2> <h2>Audio Attributions</h2>
<ul> <ul id="audio-attribution-list">
<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>
<li>Fire sound: <a href="https://freesound.org/people/CountryRoadFilms/sounds/449047/">Fire Four.wav</a> by <a href="https://freesound.org/people/CountryRoadFilms/">CountryRoadFilms</a> | License: <a href="http://creativecommons.org/licenses/by/3.0/">Attribution 3.0</a></li>
</ul> </ul>
</div> </div>
</div> </div>

26
script.js
View file

@ -1,27 +1,31 @@
const audioFiles = { const audioFiles = {
rain: new Audio('audio/rain.mp3'), rain: [new Audio('audio/rain.mp3'), '<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>'],
fire: new Audio('audio/fire.mp3'), fire: [new Audio('audio/fire.mp3'), '<a href="https://freesound.org/people/CountryRoadFilms/sounds/449047/">Fire Four.wav</a> by <a href="https://freesound.org/people/CountryRoadFilms/">CountryRoadFilms</a> | License: <a href="http://creativecommons.org/licenses/by/3.0/">Attribution 3.0</a>'],
}; };
for (const audio in audioFiles) { for (const audio in audioFiles) {
audioFiles[audio].loop = true; audioFiles[audio][0].loop = true;
const soundControl = document.createElement('div'); const soundControl = document.createElement('div');
soundControl.classList.add('sound'); soundControl.classList.add('sound');
soundControl.innerHTML = `<label>${audio.charAt(0).toUpperCase() + audio.slice(1)}</label><input class="sound-slider" type="range" min="0" max="100" value="0" id="${audio}-slider">`; soundControl.innerHTML = `<label>${audio.charAt(0).toUpperCase() + audio.slice(1)}</label><input class="sound-slider" type="range" min="0" max="100" value="0" id="${audio}-slider">`;
document.getElementById('sound-controls').appendChild(soundControl); document.getElementById('sound-controls').appendChild(soundControl);
const attribution = document.createElement('li');
attribution.innerHTML = `${audio.charAt(0).toUpperCase() + audio.slice(1)} sound: ` + audioFiles[audio][1];
document.getElementById('audio-attribution-list').appendChild(attribution);
} }
function toggleSound() { function toggleSound() {
if (!playing) { if (!playing) {
for (const audio in audioFiles) { for (const audio in audioFiles) {
audioFiles[audio].play(); audioFiles[audio][0].play();
playing = true; playing = true;
} }
} }
else { else {
for (const audio in audioFiles) { for (const audio in audioFiles) {
audioFiles[audio].pause(); audioFiles[audio][0].pause();
playing = false; playing = false;
} }
} }
@ -31,12 +35,16 @@ document.getElementById('toggle').addEventListener('click', toggleSound);
const sliders = document.getElementsByClassName('sound-slider'); const sliders = document.getElementsByClassName('sound-slider');
Array.from(sliders).forEach(slider => { function updateVolumes() {
slider.addEventListener('input', function (e) {
for (const audio in audioFiles) { for (const audio in audioFiles) {
const slider = document.getElementById(audio + '-slider'); const slider = document.getElementById(audio + '-slider');
audioFiles[audio].volume = slider.value / 100; audioFiles[audio][0].volume = slider.value / 100;
} }
};
Array.from(sliders).forEach(slider => {
slider.addEventListener('input', function (e) {
updateVolumes();
}) })
}); });
@ -61,3 +69,5 @@ document.addEventListener('DOMContentLoaded', () => {
}); });
var playing = false; var playing = false;
updateVolumes();