jsはaudioContextを通じて3Dサウンド効果を実現します

この記事では、audioContextを介して3Dサウンド効果を実現するためのjsの具体的なコードを参考までに共有します。具体的な内容は次のとおりです。

序文

AudioContextのsetPositionは3Dサウンドエフェクトを実装します

エフェクト表示

コードショーケース

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
    <メタ文字セット="UTF-8">
    <title>3D オーディオ</title>
    <スタイル>
        本文、div{
            マージン: 0px;
            パディング: 0px;
            テキスト配置: 中央;
        }

        #cav{
            境界線: 1px 黒一色;
            境界線の半径: 4px;
            マージン: 10px 自動;
        }
    </スタイル>
</head>
<本文>
<キャンバスid="cav" 幅="320" 高さ="200"></キャンバス>
</本文>
<スクリプト>
    Aud = 関数 (ctx, url) {
        this.ctx = ctx;
        this.url = url;

// ソースノード this.src = ctx.createBufferSource();

//複数の処理ノードグループ this.pNode = [];
    };

    オーディオプロトタイプ = {
        出力（）{
            (i = 0 とします; i < this.pNode.length; i++){
                tNode = this.src; とします。
                (j = 0 とします; j < this.pNode[i].length; j++){
                    tNode.connect(this.pNode[i][j]);
                    tNode = this.pNode[i][j];
                }
                tNode.connect(this.ctx.destination);
            }
        },

        再生(ループ){
            this.src.loop = ループ || false;
            この出力();
            開始(0);
        },

        停止（） {
            this.src() を停止します。
        },

        addNode(ノード、グループIdx = 0){
            this.pNode[groupIdx] = this.pNode[groupIdx] || [];
            this.pNode[groupIdx].push(ノード);
        }
    };

    //ノードタイプを設定する Aud.NODETYPE = {
        GNODE: 0 // gainNode ノードを表します}

    //Aud管理オブジェクト AudManager = {
        URL: [],
        アイテム: [],
        ctx: null、
        初期化(){
            試す{
                this.ctx = 新しい AudioContext();
            }キャッチ（e）{
                コンソールにログ出力します。
            }
        },
        ロード(コールバック){
            (i = 0 とします; i < this.urls.length; i++){
                this.loadSingle(this.urls[i], コールバック);
            }
        },

        loadSingle(url, コールバック){
            req = new XMLHttpRequest();
            要求を開きます('GET'、URL、true)。
            req.responseType = 'arraybuffer';
            自分自身 = this とします。
            req.onload = 関数（）{
                self.ctx.decodeAudioData(このレスポンス)
                    。それから（
                        バッファ => {
                            aud = new Aud(self.ctx, url); とします。
                            aud.src.buffer = buf;
                            自己アイテムをプッシュします(aud);

                            (self.items.length == self.urls.length)の場合{
                                折り返し電話（）;
                            }
                        },
                        エラー => {
                            console.log(`デコードエラー:${err}`);
                        }
                    ）
            };

            要求を送信します。
        },

        ノードを作成します(ノードタイプ、パラメータ){
            ノードを null にします。
            スイッチ (ノードタイプ) {
                ケース1:
                    ノード = this.ctx.createPanner();
                    壊す;
                ケース2:
                    ノード = this.ctx.createScriptProcessor(param[0], param[1], param[2]);
                    壊す;
                デフォルト：
                    ノード = this.ctx.createGain();
            }
            ノードを返します。
        }
    };

    ctx = document.getElementById('cav').getContext('2d') とします。
// 移動点の座標を定義する cX = 190,
        cY = 100、
        度 = 0;

    window.onload = 関数 (){
        初期化();
    }

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

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

    関数renderCenter(){
        renderCir(160, 100, 8, "赤");
    }

    関数renderCat() {
        renderCir(cX, cY, 8, "青");
    }

    関数init(){
        AudManager.urls = ["test.mp3"];
        AudManager を初期化します。

        AudManager.load(()=>{
            pNod1 = AudManager.createNode(1); とします。
            sound1 = AudManager.items[0]とします。

            sound1.addNode(pNod1);
            sound1を再生します(true);
            時間ハンドル();
        });
    }

    関数timeHandle() {
        ウィンドウ.setInterval(()=>{
            ctx.clearRect(0,0,320,200);
            rad = Math.PI*deg / 180 とします。
            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);
            レンダリングセンター();
            レンダリングCat();
            度++;
        }, 30);
    }
</スクリプト>
</html>

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません: