sounts/dist/example/index.js

A tiny helper library for working with the web audio API written in TypeScript.

"use strict";
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
    return new (P || (P = Promise))(function (resolve, reject) {
        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
        step((generator = generator.apply(thisArg, _arguments || [])).next());
    });
};
Object.defineProperty(exports, "__esModule", { value: true });
/* eslint-disable @typescript-eslint/no-non-null-assertion */
const src_1 = require("../src");
const Player_1 = require("./Player");
const utils_1 = require("./utils");
function setupLeftSource(audioContext) {
    return __awaiter(this, void 0, void 0, function* () {
        const audioBuffer = yield (0, utils_1.loadAudioBuffer)(audioContext, "music.wav");
        const position = [utils_1.main.clientWidth / 4, utils_1.main.clientHeight / 2];
        (0, utils_1.moveElementTo)(document.getElementById("panner"), position[0], position[1]);
        const source = new src_1.SoundSource(audioContext.destination, {
            panningModel: "HRTF",
            distanceModel: "exponential",
            coneInnerAngle: 40,
            coneOuterAngle: 140,
            coneOuterGain: 0,
            refDistance: 25,
            maxDistance: 105,
            rolloffFactor: 2,
        });
        source.setPosition(position[0], position[1], 0);
        source.setOrientation(0, -1, 0);
        source.play(audioBuffer, { loop: true });
    });
}
function setupRightSource(audioContext) {
    return __awaiter(this, void 0, void 0, function* () {
        const audioBuffer = yield (0, utils_1.loadAudioBuffer)(audioContext, "noise.wav");
        const position = [(utils_1.main.clientWidth * 3) / 4, utils_1.main.clientHeight / 2];
        (0, utils_1.moveElementTo)(document.getElementById("panner_nocone"), position[0], position[1]);
        const source = new src_1.SoundSource(audioContext.destination, {
            panningModel: "HRTF",
            distanceModel: "exponential",
            refDistance: 25,
            maxDistance: 105,
            rolloffFactor: 2,
        });
        source.setPosition(position[0], position[1], 0);
        source.play(audioBuffer, { loop: true });
    });
}
function setupListener(audioContext) {
    const player = new Player_1.Player();
    const listener = (0, src_1.createSoundListener)(audioContext);
    listener.setPosition(player.x, player.y, 0);
    listener.setUp(0, 0, -1);
    return (deltaTime) => {
        const moveAngle = (player.angle + 90) * utils_1.DEG_TO_RAD;
        let dx = -Math.cos(moveAngle);
        let dy = Math.sin(moveAngle);
        const length = Math.sqrt(Math.pow(dx, 2) + Math.pow(dy, 2));
        if (length !== 0) {
            dx /= length;
            dy /= length;
        }
        listener.setForward(dx, -dy, 0);
        listener.setPosition(player.x, player.y, 0);
        player.update(deltaTime);
    };
}
function init() {
    return __awaiter(this, void 0, void 0, function* () {
        // Set up audio context
        const audioContext = (0, src_1.createAudioContext)();
        // Create player and set up listener
        const updateListener = setupListener(audioContext);
        // Set up audio sources
        yield setupLeftSource(audioContext);
        yield setupRightSource(audioContext);
        // Show example and run an update loop
        utils_1.main.style.visibility = "visible";
        let lastTime = 0;
        function render(time) {
            const delta = time - lastTime;
            lastTime = time;
            updateListener(Math.min(32, delta));
            window.requestAnimationFrame(render);
        }
        window.requestAnimationFrame(render);
    });
}
init();