added new files

This commit is contained in:
asuk 2023-10-21 17:04:08 +02:00
parent ee8067f4c1
commit c6af53d32c
31 changed files with 184 additions and 2 deletions

BIN
.DS_Store vendored Normal file

Binary file not shown.

BIN
day_1/.DS_Store vendored Normal file

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

BIN
day_1/snippet_network.m4a Normal file

Binary file not shown.

BIN
day_1/snippet_stoker.m4a Normal file

Binary file not shown.

BIN
day_1/snippet_thegays.m4a Normal file

Binary file not shown.

BIN
day_2/.DS_Store vendored

Binary file not shown.

View file

@ -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>

Binary file not shown.

Binary file not shown.

View file

@ -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);
}

View file

@ -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>

Binary file not shown.

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View file

@ -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);
}

Binary file not shown.

Binary file not shown.

Binary file not shown.