Get started with audiosynth CDN
MIT licensed
Audiosynth: library for real-time audio processing, offering advanced effects in browsers.
Tags:- audiosynth
- audio
- synthesizer
- waveform
Stable version
Copied!
How to start using audiosynth CDN
<!DOCTYPE html>
<html>
<head>
<title>Get started with audiosynth CDN - cdnhub.io</title>
<script src="https://cdn.cdnhub.io/audiosynth/1.0.0/audiosynth.min.js"></script>
</head>
<body>
<button id="play">Play</button>
<audio id="player" preload="auto"></audio>
<script>
const player = document.getElementById('player');
const playButton = document.getElementById('play');
async function loadAndPlay() {
const audioData = await fetch('path/to/your/audiofile.mp3').then(response => response.arrayBuffer());
const audioBlob = new Blob([audioData], { type: 'audio/mpeg' });
player.src = URL.createObjectURL(audioBlob);
player.load();
player.play();
const audioContext = new (window.AudioContext || window.webkitAudioContext)();
const source = audioContext.createMediaElementSource(player);
const analyser = audioContext.createAnalyser();
source.connect(analyser);
analyser.fftSize = 2048;
const dataArray = new Uint8Array(analyser.frequencyBinCount);
const draw = () => {
requestAnimationFrame(draw);
analyser.getByteFrequencyData(dataArray);
const visualizer = document.getElementById('visualizer');
visualizer.innerHTML = '';
for (let i = 0; i < dataArray.length; i++) {
const bar = document.createElement('div');
bar.style.height = `${dataArray[i] / 255 * 100}%`;
bar.style.width = '2px';
bar.style.backgroundColor = 'rgb(255, 255, 255)';
bar.style.position = 'absolute';
bar.style.left = `${i * 2 + 1}px`;
visualizer.appendChild(bar);
}
};
draw();
playButton.addEventListener('click', () => {
player.paused ? player.play() : player.pause();
});
}
loadAndPlay();
</script>
</body>
</html>
Copied!
Copied!