js realisiert 3D-Soundeffekte durch audioContext

In diesem Artikel wird der spezifische Code von js zur Erzielung von 3D-Soundeffekten über audioContext zu Ihrer Information bereitgestellt. Der spezifische Inhalt ist wie folgt

Vorwort

AudioContexts setPosition implementiert 3D-Soundeffekte

Effektanzeige

Code-Schaufenster

<!DOCTYPE html>
<html lang="de">
<Kopf>
    <meta charset="UTF-8">
    <Titel>3D-Audio</Titel>
    <Stil>
        Körper, div{
            Rand: 0px;
            Polsterung: 0px;
            Textausrichtung: zentriert;
        }

        #kav{
            Rand: 1px tief schwarz;
            Rahmenradius: 4px;
            Rand: 10px automatisch;
        }
    </Stil>
</Kopf>
<Text>
<canvas id="cav" width="320" height="200"></canvas>
</body>
<Skript>
    lass Aud = Funktion (ctx, URL) {
        dies.ctx = ctx;
        diese.url = URL;

// Quellknoten this.src = ctx.createBufferSource();

//Mehrere Verarbeitungsknotengruppen this.pNode = [];
    };

    Aud.prototype = {
        Ausgabe(){
            für (lass i = 0; i < this.pNode.length; i++){
                lass tNode = this.src;
                für (lass j = 0; j < this.pNode[i].length; j++){
                    tNode.verbinden(dies.pNode[i][j]);
                    tNode = diese.pNode[i][j];
                }
                tNode.connect(dieses.ctx.ziel);
            }
        },

        abspielen(Schleife){
            this.src.loop = Schleife || falsch;
            diese.Ausgabe();
            dies.src.start(0);
        },

        stoppen() {
            dies.src.stop();
        },

        addNode(Knoten, Gruppen-Idx = 0){
            dies.pNode[Gruppen-Idx] = dies.pNode[Gruppen-Idx] || [];
            dies.pNode[groupIdx].push(Knoten);
        }
    };

    //Knotentyp festlegen Aud.NODETYPE = {
        GNODE: 0 // stellt den GainNode-Knoten dar}

    //Aud-Verwaltungsobjekt AudManager = {
        URLs: [],
        Artikel: [],
        ctx: null,
        init(){
            versuchen{
                this.ctx = neuer AudioContext();
            }fangen (e) {
                Konsole.log(`${e}`);
            }
        },
        laden(Rückruf){
            für (lass i = 0; i < this.urls.length; i++){
                dies.loadSingle(diese.urls[i], Rückruf);
            }
        },

        ladeSingle(URL, Rückruf){
            let req = neue XMLHttpRequest();
            req.open('GET', URL, wahr);
            req.responseType = "Array-Puffer";
            lass self = dies;
            req.onload = Funktion () {
                self.ctx.decodeAudioData(diese.Antwort)
                    .Dann(
                        buf => {
                            lass aud = neues Aud(self.ctx, url);
                            aud.src.buffer = Puffer;
                            selbst.items.push(aud);

                            wenn (self.items.length == self.urls.length){
                                Rückruf();
                            }
                        },
                        err => {
                            console.log(`Dekodierungsfehler: ${err}`);
                        }
                    )
            };

            anfordern.senden();
        },

        Knoten erstellen(Knotentyp, Parameter){
            lass Knoten = null;
            Schalter (Knotentyp) {
                Fall 1:
                    Knoten = this.ctx.createPanner();
                    brechen;
                Fall 2:
                    Knoten = this.ctx.createScriptProcessor(param[0], param[1], param[2]);
                    brechen;
                Standard:
                    Knoten = this.ctx.createGain();
            }
            Rücklaufknoten;
        }
    };

    Lassen Sie ctx = document.getElementById('cav').getContext('2d');
//Definiere die Koordinaten des bewegten Punktes, sei cX = 190,
        cY = 100,
        Grad = 0;

    fenster.onload = Funktion (){
        init();
    }

    Funktion renderCir(x, y, r, col){
        ctx.speichern();
        ctx.beginPath();
        ctx.arc(x, y, r, 0, Math.PI*2);
        ctx.closePath();

        ctx.fillStyle = col;
        ctx.fill();
        ctx.wiederherstellen();
    }

    Funktion renderCenter(){
        renderCir(160, 100, 8, "rot");
    }

    Funktion renderCat() {
        renderCir(cX, cY, 8, "blau");
    }

    Funktion init(){
        AudManager.urls = ["test.mp3"];
        AudManager.init();

        AudManager.load(()=>{
            let pNod1 = AudManager.createNode(1);
            let sound1 = AudManager.items[0];

            sound1.addNode(pNod1);
            sound1.abspielen(wahr);
            ZeitHandle();
        });
    }

    Funktion ZeitHandle() {
        Fenster.setInterval(()=>{
            ctx.clearRect(0,0,320,200);
            sei rad = Math.PI*Grad / 180;
            sei sx = 90*Math.cos(rad),
                sy = 90*Math.sin(rad);
            cX = 160 + sx;
            cY = 100 + sy;

            AudManager.items[0].pNode[0][0].setPosition(sx*0.1, -sy*0.1, 0);
            renderCenter();
            renderCat();
            Grad++;
        }, 30);
    }
</Skript>
</html>

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.

Das könnte Sie auch interessieren: