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

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 を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • JavaScript ベースでアラーム効果音を実現する
  • js を使用して Web ページにバックグラウンド ミュージックを追加し、サウンド効果を選択する方法

<<:  高並列処理 nginx サーバー向け Linux カーネル最適化構成の説明

>>:  MYSQL サブクエリとネストされたクエリの最適化例の分析

推薦する

Linuxはlsof/extundeleteツールを使用して、誤って削除されたファイルやディレクトリを復元します。

序文Linux には Windows のような目立つごみ箱がないため、簡単に復元することはできません...

Vuex全体のケースの詳細な説明

目次1. はじめに2. 利点3. 使用手順1. Vuexをインストールする2. Vuexを参照する3...

2つのウェブサイトページ翻訳プラグインの共有

TranslateThis URL: http://translateth.is Google 翻訳...

Docker に nginx をインストールし、https 経由でアクセスを構成する方法

1. 最新のnginx dockerイメージをダウンロードする $ docker pull ngin...

mysql mycat ミドルウェアのインストールと使用

1. mycatとはエンタープライズアプリケーション開発のための完全にオープンソースの大規模データベ...

Docker コンテナは実行後に終了します (実行を継続する方法)

現象Dockerコンテナを起動する docker run –name [コンテナ名] [コンテナID...

Vue 天気予報入門

この記事では、参考までに天気予報を実装するためのVueの具体的なコードを紹介します。具体的な内容は次...

Linuxプロセスネットワークトラフィック統計の実装プロセス

序文Linux には、ネットワーク接続、プロセス、およびその他の情報をリアルタイムで収集するための対...

MySQL 文字セットの変更に関する実践的なチュートリアル

序文: MySQL では、システムが多くの文字セットをサポートしており、異なる文字セット間にはわずか...

Windows (x86、64 ビット) で MySQL 5.7.17 無料インストール バージョンをアップグレードするための詳細なチュートリアル

Laravel 5.4 のデフォルトの utf8mb64 文字エンコーディングをサポートするには、M...

マウスを動かしたときに画像のズーム効果とゆっくりとした遷移​​効果を実現するCSSのサンプルコード

transform:scale()比例したズームインまたはズームアウトを実現できます。 transi...

Docker を使用した RabbitMQ 環境のデプロイの詳細な紹介

前提条件: Dockerはすでにインストールされています1. 画像を見つける(方法は2つあります) ...

表示しているページのスナップショットを Baidu が保存できないように設定する方法

今日、Baidu でページを検索したところ、ページが削除されていたため、当然 Baidu スナップシ...

ウェブサイト標準の検証方法を通じてFlashページを共有する方法

1. 埋め込みは違法です<embed> タグは Netscape のプライベート タグで...

Firefox で Webdings フォントをサポートする方法

Firefox、Opera、その他のブラウザは Webdings フォントをサポートしていません。回...