この記事では、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 を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: 高並列処理 nginx サーバー向け Linux カーネル最適化構成の説明
>>: MYSQL サブクエリとネストされたクエリの最適化例の分析
序文Linux には Windows のような目立つごみ箱がないため、簡単に復元することはできません...
目次1. はじめに2. 利点3. 使用手順1. Vuexをインストールする2. Vuexを参照する3...
TranslateThis URL: http://translateth.is Google 翻訳...
1. 最新のnginx dockerイメージをダウンロードする $ docker pull ngin...
1. mycatとはエンタープライズアプリケーション開発のための完全にオープンソースの大規模データベ...
現象Dockerコンテナを起動する docker run –name [コンテナ名] [コンテナID...
この記事では、参考までに天気予報を実装するためのVueの具体的なコードを紹介します。具体的な内容は次...
序文Linux には、ネットワーク接続、プロセス、およびその他の情報をリアルタイムで収集するための対...
序文: MySQL では、システムが多くの文字セットをサポートしており、異なる文字セット間にはわずか...
Laravel 5.4 のデフォルトの utf8mb64 文字エンコーディングをサポートするには、M...
transform:scale()比例したズームインまたはズームアウトを実現できます。 transi...
前提条件: Dockerはすでにインストールされています1. 画像を見つける(方法は2つあります) ...
今日、Baidu でページを検索したところ、ページが削除されていたため、当然 Baidu スナップシ...
1. 埋め込みは違法です<embed> タグは Netscape のプライベート タグで...
Firefox、Opera、その他のブラウザは Webdings フォントをサポートしていません。回...