js通過audioContext實(shí)現(xiàn)3D音效
本文實(shí)例為大家分享了js通過audioContext實(shí)現(xiàn)3D音效的具體代碼，供大家參考，具體內(nèi)容如下
前言AudioContext的setPosition實(shí)現(xiàn)3D音效
效果展示
<!DOCTYPE html><html lang='en'><head> <meta charset='UTF-8'> <title>3D Audio</title> <style>body, div{ margin: 0px; padding: 0px; text-align: center;}#cav{ border: 1px solid black; border-radius: 4px; margin: 10px auto;} </style></head><body><canvas height='200'></canvas></body><script> let Aud = function (ctx, url) {this.ctx = ctx;this.url = url;// source節(jié)點(diǎn)this.src = ctx.createBufferSource();// 多個處理節(jié)點(diǎn)組this.pNode = []; }; Aud.prototype = {output(){ for (let i = 0; i < this.pNode.length; i++){let tNode = this.src;for (let j = 0; j < this.pNode[i].length; j++){ tNode.connect(this.pNode[i][j]); tNode = this.pNode[i][j];}tNode.connect(this.ctx.destination); }},play(loop){ this.src.loop = loop || false; this.output(); this.src.start(0);},stop() { this.src.stop();},addNode(node, groupIdx = 0){ this.pNode[groupIdx] = this.pNode[groupIdx] || []; this.pNode[groupIdx].push(node);} }; //設(shè)置節(jié)點(diǎn)類型 Aud.NODETYPE = {GNODE: 0 // 表示gainNode節(jié)點(diǎn) } //Aud管理對象 AudManager = {urls: [],items: [],ctx: null,init(){ try{this.ctx = new AudioContext(); }catch (e) {console.log(`${e}`); }},load(callback){ for (let i = 0; i < this.urls.length; i++){this.loadSingle(this.urls[i], callback); }},loadSingle(url, callback){ let req = new XMLHttpRequest(); req.open(’GET’, url, true); req.responseType = ’arraybuffer’; let self = this; req.onload = function () {self.ctx.decodeAudioData(this.response) .then(buf => { let aud = new Aud(self.ctx, url); aud.src.buffer = buf; self.items.push(aud); if (self.items.length == self.urls.length){callback(); }},err => { console.log(`decode error:${err}`);} ) }; req.send();},createNode(nodeType, param){ let node = null; switch (nodeType) {case 1: node = this.ctx.createPanner(); break;case 2: node = this.ctx.createScriptProcessor(param[0], param[1], param[2]); break;default: node = this.ctx.createGain(); } return node;} }; let ctx = document.getElementById(’cav’).getContext(’2d’);// 定義移動點(diǎn)坐標(biāo) let cX = 190,cY = 100,deg = 0; window.onload = function (){init(); } function 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(); } function renderCenter(){renderCir(160, 100, 8, 'red'); } function renderCat() {renderCir(cX, cY, 8, 'blue'); } function init(){AudManager.urls = ['test.mp3'];AudManager.init();AudManager.load(()=>{ let pNod1 = AudManager.createNode(1); let sound1 = AudManager.items[0]; sound1.addNode(pNod1); sound1.play(true); timeHandle();}); } function timeHandle() {window.setInterval(()=>{ ctx.clearRect(0,0,320,200); let rad = Math.PI*deg / 180; let 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(); deg++;}, 30); }</script></html>
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持好吧啦網(wǎng)。
相關(guān)文章：
1. ThinkPHP5 通過ajax插入圖片并實(shí)時顯示(完整代碼)2. IntelliJ IDEA設(shè)置條件斷點(diǎn)的方法步驟3. Java構(gòu)建JDBC應(yīng)用程序的實(shí)例操作4. Express 框架中使用 EJS 模板引擎并結(jié)合 silly-datetime 庫進(jìn)行日期格式化的實(shí)現(xiàn)方法5. Python使用oslo.vmware管理ESXI虛擬機(jī)的示例參考6. IDEA EasyCode 一鍵幫你生成所需代碼7. 一篇文章帶你了解JavaScript-對象8. javascript設(shè)計模式 ? 建造者模式原理與應(yīng)用實(shí)例分析9. python flask框架快速入門10. 解決Python paramiko 模塊遠(yuǎn)程執(zhí)行ssh 命令 nohup 不生效的問題
網(wǎng)公網(wǎng)安備