yichael_sandbagalgorithm/assets/Script/MusicAlgorithm.js

var o0 = require('o0');
var o0Project = require('o0Project');
var o0CC = require('o0CC');
var o0Game = require('o0Game');
//var fft = require("fft");
var jsfft = require("jsfft");
//var webAudioAnalyser = require('web-audio-analyser');



cc.Class({
    extends: cc.Component,

    properties: {
        canvas: {
            default: null,
            type: cc.Canvas
        },
        camera: {
            default: null,
            type: cc.Camera
        },
        UICamera: {
            default: null,
            type: cc.Camera
        },
        gameScene:null,

        menuNode:null,
        
        DeviceMs:1,

        map:null,
        mapHit:null,
        mapRadius: 200,
        chart:null,

        TestButton:[],
        Filter:null,
        LastTime:new Date().getTime(),

        audioSource:null,
    },

    // use this for initialization
    onLoad: function () {
        //cc.director.setAnimationInterval(1.0/30);
        //cc.game.setFrameRate(30);//模拟器不能正常显示

        var self = this;
        this.audioSource = this.node.getComponent(cc.AudioSource);
        //cc.resources.load("music/Pink ditong", cc.AudioClip, (err, clip)=>{
        cc.resources.load("music/Pink Pineapple - PPAP Pen Pineapple Apple Pen", cc.AudioClip, (err, clip)=>{
            if (err) {
                cc.error(`AudioClip load error : ${err}`);
                return;
            }
            self.audioSource.clip = clip;
            self.audioBuffer = this.audioSource.clip._audio;
            var channel = self.audioBuffer.getChannelData(0);
            self.audioChannel = [];
            for(var i in channel){
                self.audioChannel.push(channel[i]);
            }

            self.audioSource.play();
            self.audioSource.pause();

            self.frequency = [];
            var halfFFTSize = 2048;
            for(var i = 0;i<self.audioChannel.length;i+=128){//step 采样率
                const data = new jsfft.ComplexArray(halfFFTSize).map((value, j, n) => {
                    var v = self.audioChannel[i - halfFFTSize / 2 + j];
                    value.real = v ? v : 0;
                });
                const frequencies = data.FFT();
                var mag = [];
                
                for(var j = 0;j<halfFFTSize;++j){
                    mag.push(Math.sqrt(frequencies.real[j] * frequencies.real[j] + frequencies.imag[j] * frequencies.imag[j]));
                    //mag.push(Math.abs(frequencies.imag[j]));
                }/** */
                self.frequency.push(mag);
            }
            console.log(self.frequency );
            
            var max = 0;
            for(var i = 0;i<self.frequency.length;++i){
                var freI = self.frequency[i];
                for(var j =0;j<freI.length;++j){
                    max = Math.max(max,freI[j]);
                }
            }

            for(var i = 0;i<self.frequency.length;++i){
                var freI = self.frequency[i];
                for(var j =0;j<freI.length;++j){
                    freI[j] /= max;
                }
            }

            self.frequencyStacked = [];
            for(var i = 0;i<self.frequency.length;++i){
                var freI = self.frequency[i];
                var v = 0;
                for(var j =0;j<freI.length && j<100;++j){
                    v += freI[j] * Math.pow(10,(50-j));
                }
                self.frequencyStacked.push(v);
            }

            max = 0;
            for(var i = 0;i<self.frequencyStacked.length;++i){
                max = Math.max(max,self.frequencyStacked[i]);
            }
            for(var i = 0;i<self.frequencyStacked.length;++i){
                self.frequencyStacked[i] /= max;
            }

            /*
            var testArray = [];

            const data2 = new jsfft.ComplexArray(512).map((value, i, n) => {
                testArray.push(i);
                testArray.push(n);
                testArray.push((i > n/3 && i < 2*n/3) ? 1 : 0);
            });
            console.log(testArray);

            const data = new jsfft.ComplexArray(512).map((value, i, n) => {
                value.real = (i > n/3 && i < 2*n/3) ? 1 : 0;
            });
            const frequencies = data.FFT();
            console.log(data);
            console.log(frequencies);/** */

            console.log("o0o0o0o0o0o0o0o0o0o0o0o0o0            audioContext");
            console.log(self.audioSource.clip);
            
            if(false && (window.OfflineAudioContext || window.webkitOfflineAudioContext)){
                const {length, numberOfChannels, sampleRate} = self.audioBuffer;
                const OfflineContext = (window.OfflineAudioContext || window.webkitOfflineAudioContext);
                const context = new OfflineContext(numberOfChannels, length, sampleRate);
                const source = context.createBufferSource();
                source.buffer = self.audioBuffer;
                self.audioChannel = source.buffer.getChannelData(0);

                console.log(source.buffer.getChannelData(0));
                var channel = source.buffer.getChannelData(0);

                var max = 0;
                var min = 1;
                for(var i in channel){
                    max = Math.max(channel[i],max);
                    min = Math.min(channel[i],min);
                }
                console.log(max);
                console.log(min);
                //console.log(channel.min());
            }



            if(false && (window.OfflineAudioContext || window.webkitOfflineAudioContext)){
                const {length, numberOfChannels, sampleRate} = self.audioBuffer;
                var audioContext = new (window.OfflineAudioContext || window.webkitOfflineAudioContext)(numberOfChannels, length, sampleRate);

                var audioBufferSourceNode = audioContext.createBufferSource();
                audioBufferSourceNode.buffer = self.audioSource.clip._audio;

                var webAudioAnalyser = webAudioAnalyser(audioBufferSourceNode);

                //self.audioChannel = audioBufferSourceNode.buffer.getChannelData(0);
                var analyser = audioContext.createAnalyser();
                //analyser.fftSize = 256;
                audioBufferSourceNode.connect(analyser);
                analyser.connect(audioContext.destination);
                audioBufferSourceNode.start(0);

                self.analyser = analyser;
                /** */


                //analyser.getByteTimeDomainData(dataArray);
                
                var dataArray = new Uint8Array(analyser.frequencyBinCount);
                analyser.getByteFrequencyData(dataArray);
                console.log("dataArray");
                console.log(dataArray);
                /*
                for(var i in dataArray){
                    console.log(dataArray[i]);
                }/** */
                
            }

            
            if(false && (window.AudioContext || window.webkitAudioContext)){
                const {length, numberOfChannels, sampleRate} = self.audioBuffer;
                //var audioContext = new (window.OfflineAudioContext || window.webkitOfflineAudioContext)(numberOfChannels, length, sampleRate);
                var audioContext = new (window.AudioContext || window.webkitAudioContext)();
                var audioBufferSourceNode = audioContext.createBufferSource();
                audioBufferSourceNode.buffer = self.audioSource.clip._audio;

                self.audioContext = audioContext;

                //self.audioChannel = audioBufferSourceNode.buffer.getChannelData(0);
                var analyser = audioContext.createAnalyser();
                analyser.fftSize = 256;
                audioBufferSourceNode.connect(analyser);
                analyser.connect(audioContext.destination);
                //audioBufferSourceNode.suspend();
                audioBufferSourceNode.start(0,40,20);
                //audioContext.startRendering();

                self.webAudioSource = audioBufferSourceNode;
                self.analyser = analyser;
                /** */


                //audioContext.currentTime = 10;
                //analyser.getByteTimeDomainData(dataArray);
                
                var dataArray = new Uint8Array(analyser.frequencyBinCount);
                analyser.getByteFrequencyData(dataArray);

                
                console.log("dataArray");
                console.log(audioContext.currentTime);
                console.log(dataArray);
                /*
                for(var i in dataArray){
                    console.log(dataArray[i]);
                }/** */
                
            }
        });
        //


/*
return getTopCandidate( 
    groupByTempo(buffer.sampleRate)(
        identifyIntervals( 
            findPeaks(  
                source.buffer.getChannelData(0) 
            )  
        ) 
    ) 
);/** */

        /*
        //var file = this.files[0];
        var fr = new FileReader();
    
        fr.onload = function(e){
            audioCtx.decodeAudioData(e.target.result,function(buffer){
                console.log(buffer);
                for(var i in buffer){
                    console.log(i);
                }
                //playFun(buffer);  // 解码后返回的AudioBuffer对象作为播放函数的参数传入
            },function(err){
                console.log(err);
            })
        }
        fr.readAsArrayBuffer(this.audioSource.clip._audio);/** */



        //cc.director.getPhysicsManager().enabled = true;

        //this.cocos.node.x;
        //node.parent = this.canvas.node;
        //this.label.node.parent = node;
        //this.label.node.x = 0;
        //this.label.node.y = 0;
        //this.label.string = this.text;

        //var Snake = require("Snake");
        //cc.log("oooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo "+Snake);

        /*var snake = new cc.Node('snake');
        snake.parent = this.camera.node;
        snake.addComponent('Snake');/** */

        //newSnake(this.camera.node);

        this.menuNode = new cc.Node();
        this.node.addChild(this.menuNode,1);
        
        this.map = o0CC.addScriptNode(this.node,'cc.Graphics',10);
        this.mapHit = o0CC.addScriptNode(this.node,'cc.Graphics',10);
        this.chart = o0CC.addScriptNode(this.node,'cc.Graphics',10);

        var col = 3;
        for(var i = 0;i<col;++i){
            this.TestButton.push([]);
            for(var j = 0;j<2;++j){
                var testButton = o0CC.addScriptNode(this.menuNode,'o0CCButton',11);
                o0CC.setGroup(testButton,o0Game.GroupIndex.UI);
                testButton.node.x = (i-(col-1)/2)*this.canvas.node.width/col;
                testButton.node.y = this.canvas.node.height/2 - 20 - j * 40;
                testButton.node.width = this.canvas.node.width/col;
                testButton.node.height = 40;/** */
                testButton.name = "null";
                this.TestButton[i].push(testButton);
            }
        }
        this.TestButton[1][0].name = "resume";
        this.TestButton[1][0].o0ClickEvent.push(function () {
            if(self.TestButton[1][0].name == "play"){
                self.TestButton[1][0].name = "pause";
                self.audioSource.play();
                //self.audioSource.resume();
            }else if(self.TestButton[1][0].name == "resume"){
                self.TestButton[1][0].name = "pause";
                //self.audioSource.play();
                self.audioSource.resume();
            }else{
                self.TestButton[1][0].name = "resume";
                //self.audioSource.stop();
                self.audioSource.pause();
            }
        });
        
        /*
        this.dragLabel = o0CC.addScriptNode(this.menuNode,'o0CCLabel',11);
        o0CC.setGroup(this.dragLabel,o0Game.GroupIndex.UI);
        this.dragLabel.node.x = 0;
        this.dragLabel.node.y = 0;
        this.dragLabel.node.width = this.canvas.node.width/2;
        this.dragLabel.node.height = this.canvas.node.height/2;/** */
        
        self.dragRate = 0;
        self.mouseLocation = new o0.Vector2(0,0);
        var listener = {
            event: cc.EventListener.MOUSE,
            onMouseDown: function (event) {
                self.mouseLocation = event.getLocation();
                if(self.mouseLocation.y > 1000)
                    return;
                self.dragRate = 0.005;
                //console.log("onMouseDown");
            },
            onMouseUp: function (event) {
                self.mouseLocation = event.getLocation();
                self.dragRate = 0;
                //console.log("onMouseUp");
                //self.setTargetSpeeding(false);
            },
            onMouseMove: function (event) {
                //console.log("onMouseMove");
                if(self.audioSource != undefined && self.dragRate != 0){
                    var newMouseLocation = event.getLocation();
                    self.audioSource.setCurrentTime(self.audioSource.getCurrentTime() + (newMouseLocation.x - self.mouseLocation.x) * self.dragRate );
                    //self.webAudioSource.setCurrentTime(self.webAudioSource.currentTime + (newMouseLocation.x - self.mouseLocation.x) * self.dragRate);
                    self.mouseLocation = newMouseLocation;
                    
                    console.log(self.audioChannel);
                }
            },
            onMouseScroll: function (event) {
            }
        }
        cc.eventManager.addListener(listener, this.node);
        //cc.EventTarget.addListener(listener, this.node);

        /*
        this.gameScene = o0CC.addScriptNode(this.node,'GameScene',0);
        this.gameScene.canvas = this.canvas;
        this.gameScene.camera = this.camera;/** */
        this.backgroundGraphic = this.menuNode.addComponent(cc.Graphics,0);
        o0CC.setGroup(this.backgroundGraphic,o0Game.GroupIndex.UI);

        cc.director.getScheduler().setTimeScale(50);

        this.Filter = new o0Project.Filter();

        console.log("init finished");
        
    },

    onDeviceMotionEvent (event) {
        let newTime = new Date().getTime();

        var [acc,forceChanged,momentum] = this.Filter.Update(new o0.Vector3(event.acc),newTime - this.LastTime,new o0.Vector3(0,0,0));

        this.LastTime = newTime;
    },
    // called every frame
    update: function (dt) {
        var self = this;
        
        if(self.audioContext){
            console.log(self.audioContext.currentTime);
        }

        if(false && this.analyser != undefined){
            var dataArray = new Uint8Array(this.analyser.frequencyBinCount);
            this.analyser.getByteFrequencyData(dataArray);
            for(var i in dataArray){
                if(dataArray[i] != 0){
                    if(this.logCount == undefined){
                        this.logCount = 10;
                    }else if(this.logCount > 0){
                        this.logCount--;
                        console.log(dataArray);
                    }
                    break;
                }
            }
        }


        this.chart.node.x = -this.canvas.node.width/2;
        this.chart.node.y = -this.canvas.node.height/2;

        if(this.audioChannel){
            this.audioChannelScaledLength = this.canvas.node.width - 20;
            if(this.audioChannelScaled == undefined || this.audioChannelScaled.length != this.audioChannelScaledLength){
                this.audioChannelScaled = [];
                var step = Math.ceil(this.audioChannel.length / this.audioChannelScaledLength);
                var k = 0;
                for(var i=0;i<this.audioChannelScaledLength;++i){
                    var max = 0;
                    var min = 0;
                    for(var j=0;j<step;++j){
                        var v;
                        if(k >= this.audioChannel.length){
                            break;
                        }else{
                            v = this.audioChannel[k];
                        }
                        max = Math.max(max,v);
                        min = Math.min(min,v);
                        ++k;
                    }
                    this.audioChannelScaled.push([min,max]);
                }
                //console.log(this.audioChannelScaled);
            }
        }

        this.chart.clear();

        if(this.audioChannelScaled){
            this.chart.strokeColor = new cc.Color(255,0,0,255);
            this.chart.moveTo(this.canvas.node.width/2, 0);
            this.chart.lineTo(this.canvas.node.width/2, 1000);
            this.chart.stroke();/** */

            var halfaudioChannelScaledLength = this.audioChannelScaled.length/2;
            

            var frequencyStackedDrawFrame = Math.floor(this.audioSource.getCurrentTime() / this.audioSource.getDuration() * this.frequencyStacked.length - halfaudioChannelScaledLength);
            for(var i = 0;i< this.audioChannelScaled.length;i++){
                var iFrequency = self.frequencyStacked[i+frequencyStackedDrawFrame];
                if(iFrequency == undefined){
                    continue;
                }
                this.chart.strokeColor = new cc.Color(255,255,255,255);
                this.chart.moveTo(i+10, 750);
                this.chart.lineTo(i+10, 750 + iFrequency * 100);
                this.chart.stroke();
            }


            this.chart.lineWidth = 3;
            var frequencyDrawStep = 50;
            var frequencyStartDrawFrame = Math.floor(this.audioSource.getCurrentTime() / this.audioSource.getDuration() * this.frequency.length - halfaudioChannelScaledLength/frequencyDrawStep);
            for(var i = 0;i< this.audioChannelScaled.length/frequencyDrawStep;i++){
                var iFrequency = self.frequency[i+frequencyStartDrawFrame];
                if(iFrequency == undefined){
                    continue;
                }
                for(var j = 0;j<iFrequency.length && j<100;++j){
                    var color = iFrequency[j] * 255;
                    this.chart.strokeColor = new cc.Color(color,color,color,255);
                    this.chart.moveTo(i * frequencyDrawStep +10, 500 + j*2);
                    this.chart.lineTo((i+1) * frequencyDrawStep +10, 500 + j*2);
                    this.chart.stroke();
                }/** */
            }
            this.chart.lineWidth = 2;

            this.chart.strokeColor = new cc.Color(255,255,255,255);
            var currentFrame = Math.floor(this.audioSource.getCurrentTime() / this.audioSource.getDuration() * this.audioChannel.length);
            for(var i = 0;i< halfaudioChannelScaledLength;++i){
                this.chart.moveTo(-i+10 + halfaudioChannelScaledLength, 350);
                this.chart.lineTo(-i+10 + halfaudioChannelScaledLength, 350 + this.audioChannel[currentFrame-i] * 100);
                this.chart.stroke();

                this.chart.moveTo(i+10 + halfaudioChannelScaledLength, 350);
                this.chart.lineTo(i+10 + halfaudioChannelScaledLength, 350 + this.audioChannel[currentFrame+i] * 100);
                this.chart.stroke();
            }
            
            for(var i =0;i< this.audioChannelScaled.length;++i){
                this.chart.moveTo(i+10, 100);
                this.chart.lineTo(i+10, 100 + this.audioChannelScaled[i][0] * 100);
                this.chart.stroke();
                this.chart.moveTo(i+10, 100);
                this.chart.lineTo(i+10, 100 + this.audioChannelScaled[i][1] * 100);
                this.chart.stroke();
            }
            this.chart.strokeColor = new cc.Color(255,0,0,255);

            this.chart.moveTo(10, 100);
            this.chart.lineTo(10+this.audioChannelScaled.length, 100);
            this.chart.stroke();
            this.chart.moveTo(10, 499);
            this.chart.lineTo(10+this.audioChannelScaled.length, 495);
            this.chart.stroke();

            //console.log(this.audioSource.getCurrentTime());
            var seekX =  this.audioSource.getCurrentTime() / this.audioSource.getDuration() * this.audioChannelScaled.length;
            this.chart.moveTo(10 + seekX, 0);
            this.chart.lineTo(10 + seekX, 200);
            this.chart.stroke();/** */

            
        }






        this.TestButton[0][0].name = "power";
        for(var i = this.Filter.frame.length-1;i>=0;--i){
            var io = this.Filter.frame[i];
            if(io.hit != 0){
                this.TestButton[0][1].name = io.hit;
                break;
            }
        }
        /*
        this.TestButton[1][12].name = this.Filter.angle;
        this.TestButton[3][12].name = this.Filter.punchCount;
        this.TestButton[2][12].name = this.Filter.leftRight;
        for(var i =0;i<this.TestButton.length;++i){
            for(var j =10;j>=0;--j){
                this.TestButton[i][j+1].name = this.TestButton[i][j].name;
                this.TestButton[i][j+1].button.normalColor = this.TestButton[i][j].button.normalColor;
            }
        }/* */
    }
});