Web Audio API

Developer
Dima
Size
3,946 Kb
Views
28,336
  1. Web Audio API Previews
  2. Web Audio API HTML Codes
  3. Web Audio API CSS Codes
  4. Web Audio API JS Codes

How do I make an web audio api?

AudioContext render. What is a web audio api? How do you make a web audio api? This script and codes were developed by Dima on 17 September 2022, Saturday.

Web Audio API Previews
IQ Test

Web Audio API - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>web Audio API</title> <link href='https://fonts.googleapis.com/css?family=Indie+Flower' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<svg width="100%" height="100%"> <circle cx="10%" cy="100" r="20" fill="#FDD2B5" opacity="0.3"> <animate attributename="r" from="0" to="1000" dur="2s" repeatcount="indefinite"></animate> </circle> <circle cx="90%" cy="100" r="20" fill="#9DF1E3" opacity="0.3"> <animate attributename="r" from="0" to="1000" dur="2s" begin="1s" repeatcount="indefinite"></animate> </circle>
</svg>
<div class="intro"> <canvas class="top"></canvas> <h1> Orange<br/>summer</h1> <p> orange mood</p> <canvas class="bottom"></canvas>
</div>
<audio preload="" autoplay="" loop="" src="//zupra.github.io/test/audio/lose_yourself_to_dance.mp3" crossorigin="Anonymous"> <!--src='https://s3.amazonaws.com/uploads.hipchat.com/78163/574822/Nkrpb6ipAMmfmNU/beats.ogg'-->
</audio> <script src="js/index.js"></script>
</body>
</html>

Web Audio API - Script Codes CSS Codes

* { margin: 0; padding: 0; box-sizing: border-box;
}
body { height: 100vh; font-family: 'Indie Flower', cursive; font-size: calc(1vw + 1vh);
}
svg { position: absolute; z-index: -1;
}
canvas { position: absolute;
}
canvas.top { top: 0; z-index: -2; width: 300px; height: 150px;
}
canvas.bottom { bottom: 0;
}
.intro { margin: auto; font-size: 3em; color: #ff7f50; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 0 2em;
}
.intro h1 { line-height: 1;
}

Web Audio API - Script Codes JS Codes

//Safary
var AudioContext = window.AudioContext || window.webkitAudioContext;
var audioContext = new AudioContext();
var audio = document.getElementsByTagName('audio')[0];
var source = audioContext.createMediaElementSource(audio);
var analyser = audioContext.createAnalyser();
source.connect(analyser);
source.connect(audioContext.destination);
analyser.fftSize = 1024;
var bufferLength = analyser.frequencyBinCount;
//- var dataArray = new Uint8Array(bufferLength);
var frequencyData = new Uint8Array(bufferLength);
function Render() { var canvas = document.getElementsByTagName('canvas')[0]; var canvasContext = canvas.getContext('2d'); var WIDTH = canvas.width; var HEIGHT = canvas.height; function draw() { requestAnimationFrame(draw); analyser.getByteTimeDomainData(frequencyData); canvasContext.fillStyle = '#FFF'; canvasContext.fillRect(0, 0, WIDTH, HEIGHT); canvasContext.lineWidth = 1; canvasContext.strokeStyle = '#222'; canvasContext.beginPath(); var sliceWidth = WIDTH * .8 / bufferLength; var x = 0; for (var i = 0; i < bufferLength; i++) { var v = frequencyData[i] / 16; var y = v * HEIGHT / 16; if (i === 0) { canvasContext.moveTo(x, 75); x = WIDTH / 9; } else { canvasContext.lineTo(x, y); } x += sliceWidth; } canvasContext.lineTo(canvas.width, canvas.height / 2); canvasContext.stroke(); } draw();
}
function Render2() { var canvas = document.getElementsByTagName('canvas')[1]; var canvasContext = canvas.getContext('2d'); canvas.width = window.innerWidth; canvas.height = window.innerHeight / 2; window.addEventListener('resize', function() { canvas.width = window.innerWidth; canvas.height = window.innerHeight / 2; }); function draw2() { requestAnimationFrame(draw2); canvasContext.clearRect(0, 0, canvas.width, canvas.height); analyser.getByteFrequencyData(frequencyData); var frequencyWidth = (canvas.width / bufferLength), frequencyHeight = 0, x = 0; for (var increment = 0; increment < bufferLength; increment++) { frequencyHeight = frequencyData[increment] * (canvas.height * 0.003); canvasContext.fillStyle = 'khaki'; //'rgb(255, 120, 120)'; canvasContext.fillRect(x, canvas.height - frequencyHeight, frequencyWidth, frequencyHeight); x += frequencyWidth + 3; } } draw2();
}
audio.addEventListener('playing', function() { Render(); Render2();
}, false);
Web Audio API - Script Codes
Web Audio API - Script Codes
Home Page Home
Developer Dima
Username dimaZubkov
Uploaded September 17, 2022
Rating 4
Size 3,946 Kb
Views 28,336
Do you need developer help for Web Audio API?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Dima (dimaZubkov) Script Codes
Name
Vue radio
Price range slider
Glitch
Ken Burns Effect
Fluid typography
Glitch
Section Slides
Audio button
Mega menu
Angular T-shirt shop
Create amazing video scripts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!