AudioContext Added
This commit is contained in:
Abdussamed ULUTAŞ
parent
1807876a80
commit
1065b3385b
Binary file not shown.
Binary file not shown.
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="76" height="76" viewBox="0 0 24 24" fill="none" stroke="#3b5998" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="feather feather-facebook"><path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"></path></svg>
|
||||
|
After Width: | Height: | Size: 300 B |
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="76" height="76" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-github"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"></path></svg>
|
||||
|
After Width: | Height: | Size: 527 B |
|
|
@ -9,5 +9,10 @@
|
|||
<body>
|
||||
<link rel="stylesheet" href="main.css">
|
||||
<script src="main.js"></script>
|
||||
<!---
|
||||
1 Ilhame Quliyeva & Indila 🔴Remix🔴 Derniere danse [_-N8NNp54zw].webm
|
||||
2 Hiss & Luis Fonsi 🔴 REMIX 🔴 ( 𝐈𝐬𝐭𝐞𝐦𝐢𝐫𝐞𝐦 & 𝐃𝐞𝐬𝐩𝐚𝐜𝐢𝐭𝐨) [LtJyzrO1kAY].webm
|
||||
3 Believer - Qizlar Mahnisi 🔴REMIX🔴 ( Samira Efendi & Imagine Dragons ) [uSK-zjV_GF4].webm
|
||||
-->
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="76" height="76" viewBox="0 0 24 24" fill="none" stroke=" #8a3ab9" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="feather feather-instagram"><rect x="2" y="2" width="20" height="20" rx="5" ry="5"></rect><path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"></path><line x1="17.5" y1="6.5" x2="17.51" y2="6.5"></line></svg>
|
||||
|
After Width: | Height: | Size: 398 B |
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="76" height="76" viewBox="0 0 24 24" fill="none" stroke=" #0072b1" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="feather feather-linkedin"><path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z"></path><rect x="2" y="9" width="4" height="12"></rect><circle cx="4" cy="4" r="2"></circle></svg>
|
||||
|
After Width: | Height: | Size: 398 B |
223
main.js
223
main.js
|
|
@ -0,0 +1,223 @@
|
|||
let style = document.createElement("style");
|
||||
document.head.appendChild(style);
|
||||
style.sheet.insertRule(`
|
||||
@font-face{
|
||||
font-family: ubuntu;
|
||||
src: url(ubuntu-medium.ttf);
|
||||
}
|
||||
`);
|
||||
style.sheet.insertRule(`
|
||||
*{
|
||||
box-sizing: border-box;
|
||||
overflow: hidden;
|
||||
}
|
||||
`);
|
||||
style.sheet.insertRule(`
|
||||
html,body{
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
font-family: Ubuntu;
|
||||
}
|
||||
`);
|
||||
style.sheet.insertRule(`
|
||||
.canvas-presentation{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
`);
|
||||
|
||||
let canvas = document.createElement("canvas");
|
||||
document.body.appendChild(canvas);
|
||||
|
||||
let width, height;
|
||||
|
||||
function calculateCanvasRect()
|
||||
{
|
||||
let rect = canvas.getClientRects()[0];
|
||||
for (const [name, value] of Object.entries({
|
||||
width: (width = rect.width)+"px",
|
||||
height: (height = rect.height)+"px"
|
||||
})) canvas.setAttribute(name,value);
|
||||
}
|
||||
|
||||
document.body.addEventListener("resize", calculateCanvasRect);
|
||||
window.addEventListener("resize", calculateCanvasRect);
|
||||
|
||||
for (const [name, value] of Object.entries({
|
||||
role:"presentation",
|
||||
class: "canvas-presentation"
|
||||
})) canvas.setAttribute(name,value);
|
||||
|
||||
calculateCanvasRect();
|
||||
|
||||
let ctx = canvas.getContext("2d");
|
||||
|
||||
ctx.fillRect(50,50,50,50);
|
||||
|
||||
const audioCtx = new AudioContext();
|
||||
const analyser = audioCtx.createAnalyser();
|
||||
|
||||
/**
|
||||
* @type {HTMLAudioElement}
|
||||
*/
|
||||
let taudio = document.querySelector("#taudio");
|
||||
|
||||
const source = audioCtx.createBufferSource();
|
||||
|
||||
fetch("Contra.webm").then(e => e.arrayBuffer()).then(e => {
|
||||
audioCtx.decodeAudioData(e).then(e => {
|
||||
source.buffer = e;
|
||||
source.loop = true;
|
||||
})
|
||||
})
|
||||
|
||||
source.connect(analyser);
|
||||
source.connect(audioCtx.destination);
|
||||
|
||||
canvas.addEventListener("click",async ()=>{
|
||||
await audioCtx.resume();
|
||||
source.start();
|
||||
},{once:true})
|
||||
|
||||
analyser.fftSize = 2 ** 13;
|
||||
const bufferLength = analyser.frequencyBinCount;
|
||||
const dataArray = new Uint8Array(bufferLength);
|
||||
|
||||
let o = 0,k = 0;
|
||||
document.body.style.transition = `.2s all`;
|
||||
function RenderWave()
|
||||
{
|
||||
ctx.clearRect(0, 0, width, height);
|
||||
analyser.getByteTimeDomainData(dataArray);
|
||||
ctx.fillStyle = `rgba(0, 0, 0, 0)`;
|
||||
ctx.fillRect(0, 0, width, height);
|
||||
|
||||
let r = (255-((o/k)*5)|0);
|
||||
let rx = [Math.max(128, r),Math.max(32, r),Math.max(16, r)];
|
||||
document.body.style.backgroundColor = `rgba( ${rx[0]}, ${rx[1]}, ${rx[2]},1)`;
|
||||
|
||||
o = 0;
|
||||
k = 0;
|
||||
|
||||
ctx.lineWidth = 3;
|
||||
ctx.strokeStyle = "rgb(255,0, 0)";
|
||||
ctx.beginPath();
|
||||
const sliceWidth = width / bufferLength;
|
||||
let x = 0;
|
||||
|
||||
for (let i = 0; i < bufferLength; i++) {
|
||||
const v = 128 - dataArray[i];
|
||||
let V = (v * 1.5) + (height/2);
|
||||
|
||||
if(x < 256){
|
||||
o += v < 0 ? -v : v;
|
||||
k++;
|
||||
};
|
||||
|
||||
if (i === 0) {
|
||||
ctx.moveTo(x, V);
|
||||
} else {
|
||||
ctx.lineTo(x, V);
|
||||
}
|
||||
|
||||
x += sliceWidth;
|
||||
}
|
||||
ctx.lineTo(width, height / 2);
|
||||
ctx.stroke();
|
||||
|
||||
requestAnimationFrame(RenderWave)
|
||||
};
|
||||
|
||||
requestAnimationFrame(RenderWave);
|
||||
|
||||
let logoContainer = document.createElement("logo");
|
||||
style.sheet.insertRule(`
|
||||
logo{
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
vertical-align: middle;
|
||||
font-size: 4vw;
|
||||
text-shadow: 0 0 3px white;
|
||||
}
|
||||
`);
|
||||
|
||||
|
||||
let image = document.createElement("img");
|
||||
image.src = "saQüt.png"
|
||||
image.classList.add("logo");
|
||||
let span = document.createElement("span");
|
||||
span.textContent = "saQüt Software";
|
||||
|
||||
style.sheet.insertRule(`
|
||||
.logo{
|
||||
max-width: 5vw;
|
||||
vertical-align: middle;
|
||||
}
|
||||
`);
|
||||
|
||||
logoContainer.appendChild(image);
|
||||
logoContainer.appendChild(span);
|
||||
document.body.appendChild(logoContainer);
|
||||
|
||||
|
||||
|
||||
|
||||
let supportContainer = document.createElement("links");
|
||||
style.sheet.insertRule(`
|
||||
links{
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0; right: 0;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: nowrap;
|
||||
justify-content: center;
|
||||
}
|
||||
`);
|
||||
style.sheet.insertRule(`
|
||||
links > .container {
|
||||
background-color: white;
|
||||
border-top-right-radius: 20px;
|
||||
border-top-left-radius: 20px;
|
||||
}
|
||||
`);
|
||||
|
||||
let div = document.createElement("div");
|
||||
div.classList.add("container");
|
||||
|
||||
let facebook = document.createElement("img");
|
||||
facebook.src = "facebook.svg"
|
||||
facebook.classList.add("icon");
|
||||
facebook.addEventListener("click",()=> window.open("https://www.facebook.com/saQut/"));
|
||||
|
||||
let linkedin = document.createElement("img");
|
||||
linkedin.src = "linkedin.svg"
|
||||
linkedin.classList.add("icon");
|
||||
linkedin.addEventListener("click",()=> window.open("https://www.linkedin.com/in/abdussamed-ulutas"));
|
||||
|
||||
let share2 = document.createElement("img");
|
||||
share2.src = "share-2.svg"
|
||||
share2.classList.add("icon");
|
||||
share2.addEventListener("click",()=> window.open("https://www.abdussamedulutas.com.tr"));
|
||||
|
||||
let git = document.createElement("img");
|
||||
git.src = "github.svg"
|
||||
git.classList.add("icon");
|
||||
git.addEventListener("click",()=> window.open("https://git.saqut.com"));
|
||||
|
||||
|
||||
style.sheet.insertRule(`
|
||||
.icon{
|
||||
max-width: 5vw;
|
||||
margin: 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
`);
|
||||
|
||||
div.appendChild(facebook);
|
||||
div.appendChild(linkedin);
|
||||
div.appendChild(share2);
|
||||
div.appendChild(git);
|
||||
supportContainer.appendChild(div);
|
||||
document.body.appendChild(supportContainer);
|
||||
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="76" height="76" viewBox="0 0 24 24" fill="none" stroke=" #008000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="feather feather-share-2"><circle cx="18" cy="5" r="3"></circle><circle cx="6" cy="12" r="3"></circle><circle cx="18" cy="19" r="3"></circle><line x1="8.59" y1="13.51" x2="15.42" y2="17.49"></line><line x1="15.41" y1="6.51" x2="8.59" y2="10.49"></line></svg>
|
||||
|
After Width: | Height: | Size: 443 B |
Binary file not shown.
Loading…
Reference in New Issue