js通过audioContext实现3D音效

2024-04-02 19:04:59 395人浏览八月长安

摘要

本文实例为大家分享了js通过audiocontext实现3D音效的具体代码，供大家参考，具体内容如下前言 AudioContext的setPosition实现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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程网。

--结束END--

本文标题: js通过audioContext实现3D音效

本文链接: https://lsjlt.com/news/123947.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

猜你喜欢

js通过audioContext实现3D音效

本文实例为大家分享了js通过audioContext实现3D音效的具体代码，供大家参考，具体内容如下前言 AudioContext的setPosition实现3D音效效果展示 ...

99+

2024-04-02
怎么在JavaScript中利用audioContext实现一个3D音效

怎么在JavaScript中利用audioContext实现一个3D音效？针对这个问题，这篇文章详细介绍了相对应的分析和解答，希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。JavaScript的特点1.JavaScript主要...

99+

2023-06-14
js实现3D轮播图效果

本文实例为大家分享了js实现3D轮播图效果的具体代码，供大家参考，具体内容如下主要有平移和旋转构成3d效果的轮播图，小白一只，不足之处还请大家多多指教，代码如下 css代码： ...

99+

2024-04-02
js如何实现3d悬浮效果

这篇文章主要介绍了js如何实现3d悬浮效果，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。效果如下：代码如下：<!DOCTYPE&nbs...

99+

2024-04-02
js如何实现3D图片展示效果

这篇文章给大家分享的是有关js如何实现3D图片展示效果的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。点击左上角的按钮前后切换效果图：代码如下：<!doctype ...

99+

2024-04-02
怎么用js实现3D轮播图效果

本篇内容主要讲解“怎么用js实现3D轮播图效果”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“怎么用js实现3D轮播图效果”吧!具体内容如下：主要有平移和旋转构成3d效果的轮播图，小白一只，不足之...

99+

2023-06-25
js如何实现3D图片环展示效果

这篇文章给大家分享的是有关js如何实现3D图片环展示效果的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。可对整体进行拖拽效果图：代码如下：<!DOCTYPE htm...

99+

2024-04-02
css3+js如何实现3D行星运转效果

这篇文章给大家分享的是有关css3+js如何实现3D行星运转效果的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。HTML部分<div class="pat...

99+

2024-04-02
如何使用css实现过渡+3D效果

这篇文章主要为大家展示了“如何使用css实现过渡+3D效果”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“如何使用css实现过渡+3D效果”这篇文章吧。css过渡...

99+

2024-04-02
OpenSUSE界面3D过渡效果怎么实现

这篇文章给大家介绍OpenSUSE界面3D过渡效果怎么实现，内容非常详细，感兴趣的小伙伴们可以参考借鉴，希望对大家能有所帮助。Linux桌面的3D化已经相当普通了，就拿主流的Ubuntu来说，如果硬件支持的话，Compiz是默认启用的。而将...

99+

2023-06-16
JS如何实现微信播音效果

这篇文章主要讲解了“JS如何实现微信播音效果”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“JS如何实现微信播音效果”吧！图片切换轮播法这个功能其实是我刚毕业的时候实现的，那也是5年前的事情了...

99+

2023-07-05
如何通过JS/CSS实现网页返回顶部效果

这篇文章给大家分享的是有关如何通过JS/CSS实现网页返回顶部效果的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。CSS 按钮样式：#myBtn {display: none; p...

99+

2024-04-02
Android通过TextToSpeech实现文字转语音

一、直接上代码： import android.app.Activity;import android.os.Bundle;import android.speech.tts.TextToSpeech;import android.util...

99+

2023-10-10

android java 开发语言
V5填报表如何通过 JS 实现实现隔行异色的效果

V5填报表如何通过 JS 实现实现隔行异色的效果，针对这个问题，这篇文章详细介绍了相对应的分析和解答，希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。V5 版本填报表单元格属性中，单元格的前景背景颜色没有提供浏览式报表的表达式属...

99+

2023-06-04
js如何通过Date对象实现倒计时动画效果

小编给大家分享一下js如何通过Date对象实现倒计时动画效果，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！js通过Date对象实...

99+

2024-04-02
JS实现微信播音效果示例详解

目录需要实现的效果图片切换轮播法CSS实现需要实现的效果图片切换轮播法这个功能其实是我刚毕业的时候实现的，那也是5年前的事情了，受限于当时的水平，仅仅是实现了，其他啥都不是。...

99+

2023-02-21

JS微信播音效果微信播音效果
Android实现3D滚动效果

先上效果图下载链接http://down.51cto.com/data/1076318...

99+

2023-01-31

效果 Android
如何通过js代码实现301跳转

通过js代码实现301跳转的方法：在对应的网页文件中使用此JS代码可实现301跳转，比如将不带www的域名跳转到带www的域名，代码如下：<script language=javascript> ...

99+

2024-04-02
如何用js实现汉字转拼音的效果

要实现汉字转拼音的效果，可以使用第三方库 pinyin.js。以下是一个示例：1. 在页面中引入 pinyin.js：```html...

99+

2023-08-18

JS
android 通过MediaRecorder实现简单的录音示例

整理文档，搜刮出一个android 通过MediaRecorder实现简单的录音示例，稍微整理精简一下做下分享。 MainActivity package com.cent...

99+

2022-06-06

示例 mediarecorder Android