Preview:
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>High Fidelity Spatial Audio API Example - Simple
    </head>

    <body style="width: 100%; height: 100%; margin: 0; padding: 0;">
        <button class="connectButton" onclick="connectToHiFiAudio()">Click to Connect
        <audio controls autoplay class="outputAudioEl">
    </body>

    <script src="https://hifi-spatial-audio-api.s3.amazonaws.com/releases/v0.2.8/HighFidelityAudio-latest.js">
    <script>
        let connectButton = document.querySelector('.connectButton');
        async function connectToHiFiAudio() {
            // let audioMediaStream ...
            // let hifiCommunicator ...

            connectButton.innerHTML = `Connected!`;
            document.querySelector(`.outputAudioEl`).srcObject = hifiCommunicator.getOutputAudioMediaStream();
            document.querySelector(`.outputAudioEl`).play();

            // TODO: Send position updates to hifiCommunicator
        }
    </script>
</html>
downloadDownload PNG downloadDownload JPEG downloadDownload SVG

Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!

Click to optimize width for Twitter