js通过audioContext实现3D音效
更新时间：2021年04月19日 11:09:08 作者：莫兮是我
这篇文章主要为大家详细介绍了js通过audioContext实现3D音效，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了js通过audioContext实现3D音效的具体代码，供大家参考，具体内容如下
前言
AudioContext的setPosition实现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 id="cav" width="320" height="200"></canvas>
</body>
<script>
let Aud = function (ctx, url) {
this.ctx = ctx;
this.url = url;
// source节点
this.src = ctx.createBufferSource();
// 多个处理节点组
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);
}
};
//设置节点类型
Aud.NODETYPE = {
GNODE: 0 // 表示gainNode节点
}
//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');
// 定义移动点坐标
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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了微信小程序开发探究,非常具有实用价值，需要的朋友可以参考下。2016-12-12
iframe的高度需要根据子页面的实际高度来进行调整，但是如果子页面不在同一域中怎么办？这时候脚本没有办法获取到子页面的高度，存在JavaScript跨域的问题2013-09-09
你必须知道的Javascript知识点之"深入理解作用域链"的介绍
本篇文章小编为大家介绍，你必须知道的Javascript知识点之"深入理解作用域链"的介绍。需要的朋友参考下2013-04-04
众所周知，在webpack中使用模块热替换(HMR)，能够使得应用在运行时，本文就介绍一下如何实现HMR，感兴趣的可以了解一下2021-07-07
今天小编就为大家分享一篇解决layui数据表格排序图标被超出的表头挤出去的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-09-09
用js判断浏览器是否是IE的比较好的办法...2007-05-05
我们需要引入几个相关的概念：执行环境栈、全局对象、执行环境、变量对象、活动对象、作用域和作用域链等，这些概念正是JS引擎工作的核心组件。这篇文章的目的不是孤立的为你讲解每一个概念需要的朋友可以参考下2016-11-11
这篇文章主要为大家详细介绍了js仿小米二级菜单显示效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-03-03
这篇文章主要介绍Javascript将双字节字符转换成单字节字符并计算长度的方法,简单实用,需要的朋友可以参考下。2016-06-06
webpack是近期最火的一款模块加载器兼打包工具，它能把各种资源，例如JS（含JSX）、coffee、样式（含less/sass）、图片等都作为模块来使用和处理。这篇文章主要给大家总结介绍了关于webpack学习教程之前端性能优化的相关资料，需要的朋友可以参考下。2017-12-12
最新评论