diff --git a/assets/scripts/explore.js b/assets/scripts/explore.js index 777f5ee3a..87b009a77 100644 --- a/assets/scripts/explore.js +++ b/assets/scripts/explore.js @@ -1,7 +1,47 @@ -// explore.js - -window.addEventListener('DOMContentLoaded', init); - -function init() { - // TODO -} \ No newline at end of file +window.addEventListener('DOMContentLoaded', function() { + var synth = window.speechSynthesis; + var voice_select = document.querySelector("#voice-select"); + var button = document.querySelector("button"); + var text_to_speak = document.querySelector("#text-to-speak"); + var smilling = document.querySelector("img"); + //var open_mouth = document.querySelector("img[src='./assets/images/smiling-open.png']"); + var voices = []; + + function populateVoiceList() { + voices = synth.getVoices(); + var voice_selectInnerHTML = ''; + for (var i = 0; i < voices.length; i++) { + voice_selectInnerHTML += ''; + } + voice_select.innerHTML = voice_selectInnerHTML; + } + + populateVoiceList(); + if (synth.onvoiceschanged !== undefined) { + synth.onvoiceschanged = populateVoiceList; + } + + button.addEventListener("click", function() { + if (synth.speaking || text_to_speak.value === "") { + return; + } + + var utterThis = new SpeechSynthesisUtterance(text_to_speak.value); + for (var i = 0; i < voices.length; i++) { + if (voices[i].name === voice_select.value) { + utterThis.voice = voices[i]; + break; + } + } + synth.speak(utterThis); + smilling.src = "assets/images/smiling-open.png"; + utterThis.addEventListener("end", function () { + smilling.src = "assets/images/smiling.png"; + }); + + utterThis.onerror = function(event) { + console.error("SpeechSynthesisUtterance.onerror", event); + }; + }); +}); + diff --git a/assets/scripts/expose.js b/assets/scripts/expose.js index 962d7a33c..f2d5ad309 100644 --- a/assets/scripts/expose.js +++ b/assets/scripts/expose.js @@ -1,7 +1,55 @@ // expose.js - window.addEventListener('DOMContentLoaded', init); - +const jsConfetti = new JSConfetti(); function init() { - // TODO -} \ No newline at end of file + // Get necessary elements from the HTML DOM + const horn_select = document.querySelector('#horn-select'); + const volume_controls = document.querySelector('#volume'); + const play_sound = document.querySelector('button'); + const audio = document.querySelector('audio'); + + // Set up event listeners + horn_select.addEventListener('change', updateSound); + volume_controls.addEventListener('input', updateVolume); + play_sound.addEventListener('click', playSound); + + // Define the event listener functions + function updateSound() { + const selectedHorn = horn_select.value; + + // Update the image and audio file based on the selected horn + const horn_image = document.querySelector('section img'); + const horn_sound = `./assets/audio/${selectedHorn}.mp3`; + + horn_image.setAttribute('src', `./assets/images/${selectedHorn}.svg`); + audio.setAttribute('src', horn_sound); + } + + function updateVolume() { + const selectedVolume = volume_controls.value; + + // Update the volume icon displayed on the page + const volumeIcon = document.querySelector('#volume-controls img'); + audio.volume = selectedVolume/100; + if (selectedVolume == 0) { + volumeIcon.setAttribute('src', `./assets/icons/volume-level-0.svg`); + + } else if (selectedVolume >= 1 && selectedVolume <= 33) { + volumeIcon.setAttribute('src', `./assets/icons/volume-level-1.svg`); + + } else if (selectedVolume >= 34 && selectedVolume <= 66) { + volumeIcon.setAttribute('src', `./assets/icons/volume-level-2.svg`); + + } else { + volumeIcon.setAttribute('src', `./assets/icons/volume-level-3.svg`); + } + } + + function playSound() { + audio.play(); + if (horn_select.value == "party-horn"){ + jsConfetti.addConfetti(); + } + } + +}