<%--
  Created by IntelliJ IDEA.
  User: ZJW
  Date: 2019/7/16
  Time: 17:11
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>

<html style="height: 100%">
<head>
    <meta charset="utf-8">
    <script type="text/javascript" src="https://dsada1.oss-cn-beijing.aliyuncs.com/js/echars-china/echarts.min.js"></script>
    <script type="text/javascript" src="https://dsada1.oss-cn-beijing.aliyuncs.com/js/echars-china/china.js"></script>
    <script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=GBv1nHN2KWLFdYyuOKDI8ZuvWs7vboRy"></script>
    <script type="text/javascript" src="https://dsada1.oss-cn-beijing.aliyuncs.com/js/echars-china/echarts-gl.min.js"></script>
    <script type="text/javascript" src="https://dsada1.oss-cn-beijing.aliyuncs.com/js/echars-china/ecStat.min.js"></script>
    <script type="text/javascript" src="https://dsada1.oss-cn-beijing.aliyuncs.com/js/echars-china/dataTool.min.js"></script>
    <script type="text/javascript" src="https://dsada1.oss-cn-beijing.aliyuncs.com/js/echars-china/world.js"></script>
    <script type="text/javascript" src="https://dsada1.oss-cn-beijing.aliyuncs.com/js/echars-china/bmap.min.js"></script>
    <script type="text/javascript" src="https://dsada1.oss-cn-beijing.aliyuncs.com/js/echars-china/simplex.js"></script>
    <!-- <script type="text/javascript" src="https://api.map.baidu.com/getscript?v=2.0&amp;ak=GBv1nHN2KWLFdYyuOKDI8ZuvWs7vboRy&amp;services=&amp;t=20190622163250"></script> -->
</head>
<body style="height: 100%; margin: 0">
<div id="container" style="height: 100%"></div>

<script type="text/javascript">
    var dom = document.getElementById("container");
    var myChart = echarts.init(dom);
    var app = {};
    option = null;
    var UPDATE_DURATION = 100;

    window.AudioContext = window.AudioContext || window.webkitAudioContext;

    var audioContext = new AudioContext();

    var oReq = new XMLHttpRequest();
    oReq.open('GET', 'http://m10.music.126.net/20190718154742/fde36e0a68072a1be4c8358c41d409be/ymusic/61fc/aa5b/1949/d9d6b7bd994d18bfe13416d122c8b267.mp3', true);
    oReq.responseType = 'arraybuffer';

    oReq.onload = function(e) {
        audioContext.decodeAudioData(oReq.response, initVisualizer);
    };
    oReq.send();

    function initVisualizer(audioBuffer) {
        inited = true;

        var source = audioContext.createBufferSource();
        source.buffer = audioBuffer;

        // Must invoked right after click event
        if (source.noteOn) {
            source.noteOn(0);
        }
        else {
            source.start(0);
        }

        var analyzer = audioContext.createAnalyser();
        var gainNode = audioContext.createGain();
        analyzer.fftSize = 4096;

        gainNode.gain.value = 1;
        source.connect(gainNode);
        gainNode.connect(analyzer);
        analyzer.connect(audioContext.destination);

        var frequencyBinCount = analyzer.frequencyBinCount;
        var dataArray = new Uint8Array(frequencyBinCount);


        var beta = 0;
        function update() {
            analyzer.getByteFrequencyData(dataArray);

            var item = [];
            var size = 50;
            var dataProvider = [];

            for (var i = 0; i < size * size; i++) {
                var x = i % size;
                var y = Math.floor(i / size);
                var dx = x - size / 2;
                var dy = y - size / 2;

                var angle = Math.atan2(dy, dx);
                if (angle < 0) {
                    angle = Math.PI * 2 + angle;
                }
                var dist = Math.sqrt(dx * dx + dy * dy);
                var idx = Math.min(
                    frequencyBinCount - 1, Math.round(angle / Math.PI / 2 * 60 + dist * 60) + 100
                );

                var val = Math.pow(dataArray[idx] / 100, 3);
                dataProvider.push([x, y, Math.max(val, 0.1)]);
            }

            myChart.setOption({
                grid3D: {
                    viewControl: {
                        beta: beta,
                        alpha: Math.sin(beta / 10 + 40) * (beta % 10 + 5) / 15 * 30 + 30,
                        distance: Math.cos(beta / 50 + 20) * (beta % 10 + 5) / 15 * 50 + 80,
                        animationDurationUpdate: UPDATE_DURATION,
                        animationEasingUpdate: 'linear'
                    }
                },
                series: [{
                    data: dataProvider
                }]
            });
            beta += 2;

            setTimeout(update, UPDATE_DURATION);
        };

        update();
    }

    option = {
        // tooltip: {},
        visualMap: {
            show: false,
            min: 0.1,
            max: 4,
            inRange: {
                color: ['#00FFFF', '#4169E1', '#1E90FF', '#7B68EE', '#4B0082']
                // color: ['#010103', '#2f490c', '#b0b70f', '#fdff44', '#fff']
            }
        },
        xAxis3D: {
            type: 'value'
        },
        yAxis3D: {
            type: 'value'
        },
        zAxis3D: {
            type: 'value',
            min: -6,
            max: 6
        },
        grid3D: {
            show: false,
            environment: '#000',
            viewControl: {
                distance: 100
            },
            postEffect: {
                enable: true,
                FXAA: {
                    enable: true
                }
            },
            light: {
                main: {
                    shadow: true,
                    intensity: 10,
                    quality: 'high'
                },
                ambientCubemap: {
                    texture: 'https://dsada1.oss-cn-beijing.aliyuncs.com/js/echars-china/hdr/canyon.hdr',
                    exposure: 0,
                    diffuseIntensity: 0.2
                }
            }
        },
        series: [{
            type: 'bar3D',
            silent: true,
            shading: 'lambert',
            data: [],
            barSize: 1,
            lineStyle: {
                width: 4
            },
            // animation: false,
            animationDurationUpdate: UPDATE_DURATION
        }]
    };
    if (option && typeof option === "object") {
        myChart.setOption(option, true);
    }
</script>
</body>
</html>
