added new files

2023-10-21 17:04:08 +02:00 · 2023-10-21 17:04:08 +02:00 · c6af53d32c
commit c6af53d32c
parent ee8067f4c1
31 changed files with 184 additions and 2 deletions
--- a/.DS_Store
+++ b/.DS_Store
--- a/day_1/.DS_Store
+++ b/day_1/.DS_Store
--- a/day_1/snippet-meryl-streep.mp3
+++ b/day_1/snippet-meryl-streep.mp3
--- a/day_1/snippet-rocky-horror.mp3
+++ b/day_1/snippet-rocky-horror.mp3
--- a/day_1/snippet_einstein_speaks.mp3
+++ b/day_1/snippet_einstein_speaks.mp3
--- a/day_1/snippet_network.m4a
+++ b/day_1/snippet_network.m4a
--- a/day_1/snippet_stoker.m4a
+++ b/day_1/snippet_stoker.m4a
--- a/day_1/snippet_thegays.m4a
+++ b/day_1/snippet_thegays.m4a
--- a/day_2/.DS_Store
+++ b/day_2/.DS_Store
--- a/day_2/workshop-variable-sound-1/index.html
+++ b/day_2/workshop-variable-sound-1/index.html
@ -13,11 +13,9 @@
 </head>
 <body>
 	<div id="plain-text"></div>
 	<div class="textParent" id="text-container">
 		HELLO WORLD
 	</div>
 	 <audio id="audio" loop controls src="./media/531703__rickplayer__voicepack.mp3"></audio>
 </body>
--- a/day_2/workshop-variable-sound-7/.DS_Store
+++ b/day_2/workshop-variable-sound-7/.DS_Store
--- a/day_2/workshop-variable-sound-7/css/.DS_Store
+++ b/day_2/workshop-variable-sound-7/css/.DS_Store
--- a/day_2/workshop-variable-sound-7/css/demo.css
+++ b/day_2/workshop-variable-sound-7/css/demo.css
@ -0,0 +1,27 @@
@font-face {
  font-family: "Tonka-VF";
  src: url("fonts/Tonka_Beta_06VF.ttf") format("TrueType");
  font-variation-settings: 'wght' 100;
 }
 *{
 	font-family: "Tonka-VF";
 }
 .textParent{
 	font-size: 4.5em;
  position: absolute;
  justify-content: center;
  align-items: center;
  width: 100%;
  left: 0px;
  top: 40vh;
  text-align: center;
 }
 .letter{
 	display: inline-block;
 	transition: 0.1s font-variation-settings, 0.1s transform;
 	font-variation-settings: 'wdth' 100, 'wght' 100;
 	transform: rotate(0deg), translateY(0px);
 }
--- a/day_2/workshop-variable-sound-7/css/fonts/Tonka_Beta_06VF.ttf
+++ b/day_2/workshop-variable-sound-7/css/fonts/Tonka_Beta_06VF.ttf
--- a/day_2/workshop-variable-sound-7/index.html
+++ b/day_2/workshop-variable-sound-7/index.html
@ -0,0 +1,29 @@
 <!doctype html>
 <html lang="en">
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <head>
 	<meta charset="UTF-8" />
 	<meta name="viewport" content="width=device-width, initial-scale=1">
 	<title>The Sound of Text Example</title>
 	<link rel="stylesheet" type="text/css" href="css/demo.css" />
 </head>
 <body>
 	<div class="textParent" id="text-container">
 		<!-- your text goes here -->
 		HELLO WORLD
 	</div>
 	<!-- your audio goes here. Add the audio file to "media" folder -->
 	<audio id="audio" loop controls src="./media/531703__rickplayer__voicepack.mp3"></audio>
 </body>
 <script src="js/jquery.min.js"></script>
 <script src="js/script.js"></script>
 </html>
--- a/day_2/workshop-variable-sound-7/js/.DS_Store
+++ b/day_2/workshop-variable-sound-7/js/.DS_Store
--- a/day_2/workshop-variable-sound-7/js/jquery.min
+++ b/day_2/workshop-variable-sound-7/js/jquery.min
--- a/day_2/workshop-variable-sound-7/js/jquery.min.js
+++ b/day_2/workshop-variable-sound-7/js/jquery.min.js
--- a/day_2/workshop-variable-sound-7/js/script.js
+++ b/day_2/workshop-variable-sound-7/js/script.js
@ -0,0 +1,122 @@
 const letterDelay = 100; //milliseconds of letter delay for animation
 $(document).ready(function() {
    const texth1 = $(".textParent");
        texth1.html(function(index, html) {
            return html.replace(/\w+/g, '<span class="word" data-word="$&">$&</span>');
        });
        $(".word").html(function(index, html) {
            return html.replace(/\S/g, '<span class="letter">$&</span>');
        })
        audioReaction();
 });
 function audioReaction(){
    const audioContext = new (window.AudioContext || window.webkitAudioContext)();
    const audioElement = document.getElementById("audio");
    const textContainer = document.getElementById("text-container");
    const letters = textContainer.getElementsByClassName("letter");
    audioElement.addEventListener("play", () => {
        const source = audioContext.createMediaElementSource(audioElement);
        source.connect(audioContext.destination);
        const analyser = audioContext.createAnalyser();
        analyser.fftSize = 256;
        const bufferLength = analyser.frequencyBinCount;
        const dataArray = new Uint8Array(bufferLength);
        source.connect(analyser);
        const audioDuration = audioElement.duration;
        const textLength = letters.length;
        function calculatePitch(dataArray, sampleRate) {
            const minFrequency = 80; // Minimum expected frequency in Hz
            const maxFrequency = 1000; // Maximum expected frequency in Hz
            const minPeriod = Math.floor(sampleRate / maxFrequency);
            const maxPeriod = Math.floor(sampleRate / minFrequency);
            let maxCorrelation = -1;
            let pitch = -1;
            for (let lag = minPeriod; lag <= maxPeriod; lag++) {
                let correlation = 0;
                for (let i = 0; i < dataArray.length - lag; i++) {
                    correlation += (dataArray[i] - 128) * (dataArray[i + lag] - 128);
                }
                if (correlation > maxCorrelation) {
                    maxCorrelation = correlation;
                    pitch = sampleRate / lag;
                }
            }
            return pitch;
        }
        function updateText() {
            analyser.getByteFrequencyData(dataArray);
            const sampleRate = audioContext.sampleRate;
            const pitch = calculatePitch(dataArray, sampleRate);
            console.log('Detected Pitch:', pitch, 'Hz');
            const currentTime = audioElement.currentTime;
            const audioPositionPercentage = currentTime / audioDuration;
            const mappedIndex = Math.floor(audioPositionPercentage * textLength);
            const volume = Math.sqrt(
              dataArray.reduce((acc, val) => acc + val * val, 0) / dataArray.length
            );
            for (let i = 0; i < textLength; i++) {
                // ONLY APPLY AN ANIMATION TO A SPECIFIC WORD 
                if (letters[i].parentNode.getAttribute('data-word') == "HELLO") {
                    // HERE IS WHERE YOU DEFINE YOUR AUDIO-REACITVE CSS VALUES. 
                    const boldValue = scale(volume, 0, dataArray.length, 15, 257);
                    const boldValueReverse = scale(volume, 0, dataArray.length, 257, 15);
                    const pitchScale = scale(pitch, 10, 300, 1, 1.1);
                    const rotationScale = scale(volume, 0, dataArray.length, -80, 80);
                    setTimeout(function(){
                        // HERE IS WHERE YOU APPLY NEW CSS TO EACH LETTER 
                        letters[i].style.fontVariationSettings = `'wdth' ${boldValue}, 'wght' ${boldValueReverse}`;
                        letters[i].style.transform = `translateY(${rotationScale}px) scaleY(${pitchScale})`;
                    },(i * letterDelay))
                // ONLY APPLY AN ANIMATION TO A SPECIFIC WORD
                } else if(letters[i].parentNode.getAttribute('data-word') == "WORLD"){
                    const colorValue = scale(volume, 0, dataArray.length, 0, 255);
                    setTimeout(function(){
                        letters[i].style.color = `rgba(255, ${colorValue}, 0, 1)`;
                    },(i * letterDelay))
                }
            }
            requestAnimationFrame(updateText);
        }
        audioContext.resume().then(() => {
            analyser.connect(audioContext.destination);
            updateText();
        });
    });
 }
 function scale (number, inMin, inMax, outMin, outMax) {
    return Math.round((number - inMin) * (outMax - outMin) / (inMax - inMin) + outMin);
 }
--- a/day_2/workshop-variable-sound-7/media/.DS_Store
+++ b/day_2/workshop-variable-sound-7/media/.DS_Store
--- a/day_2/workshop-variable-sound-7/media/217135catman933voice.wav
+++ b/day_2/workshop-variable-sound-7/media/217135catman933voice.wav
--- a/day_2/workshop-variable-sound-7/media/322232ruciskosteampipe.wav
+++ b/day_2/workshop-variable-sound-7/media/322232ruciskosteampipe.wav
--- a/day_2/workshop-variable-sound-7/media/397253screamstudiorobot.wav
+++ b/day_2/workshop-variable-sound-7/media/397253screamstudiorobot.wav
--- a/day_2/workshop-variable-sound-7/media/48412luftrumoceanwavescrushing.wav
+++ b/day_2/workshop-variable-sound-7/media/48412luftrumoceanwavescrushing.wav
--- a/day_2/workshop-variable-sound-7/media/531703rickplayervoicepack.mp3
+++ b/day_2/workshop-variable-sound-7/media/531703rickplayervoicepack.mp3
--- a/day_2/workshop-variable-sound-7/media/702935strangehorizongymnauseam_2_90bpm.wav
+++ b/day_2/workshop-variable-sound-7/media/702935strangehorizongymnauseam_2_90bpm.wav
--- a/day_2/workshop-variable-sound-7/media/703081kevp888ls_34833_fr_suburban_demolition_site_bassy.wav
+++ b/day_2/workshop-variable-sound-7/media/703081kevp888ls_34833_fr_suburban_demolition_site_bassy.wav
--- a/day_2/workshop-variable-sound-7/media/703114strangehorizonsynth_tom_velocity_adjustments.wav
+++ b/day_2/workshop-variable-sound-7/media/703114strangehorizonsynth_tom_velocity_adjustments.wav
--- a/day_2/workshop-variable-sound-7/media/relaxing-mountains-rivers-streams-running-water-18178.mp3
+++ b/day_2/workshop-variable-sound-7/media/relaxing-mountains-rivers-streams-running-water-18178.mp3
--- a/day_2/workshop-variable-sound-7/media/sound.mp3
+++ b/day_2/workshop-variable-sound-7/media/sound.mp3
--- a/day_2/workshop-variable-sound-7/media/sound.wav
+++ b/day_2/workshop-variable-sound-7/media/sound.wav