Get started with 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>
Get started with audiosynth CDN

Stable version

How to start using audiosynth CDN

All versions
