<html>
    <head>
        <meta charset="utf-8">
        <script src="../common/jquery.min.js"></script>
        <script src="../common/echarts.min.js"></script>
        <script src="../common/echarts-gl.min.js"></script>
        <script src="../common/prettify/prettify.js"></script>
        <script src="../common/showCode.js"></script>
        <link rel="stylesheet" href="../common/reset.css">
        <link rel="stylesheet" href="../common/prettify/prettify.css">
        <script src="../common/perfect-scrollbar/0.6.8/js/perfect-scrollbar.min.js"></script>
        <link rel="stylesheet" href="../common/perfect-scrollbar/0.6.8/css/perfect-scrollbar.min.css">
    </head>
    <body>

        <div id="main">
            <pre class="prettyprint">
// 初始化坐标系和图表
chart.setOption({
    xAxis3D: { ... },
    yAxis3D: { ... },
    zAxis3D: { ... },
    grid3D: { ... },
    series: {
        type: 'bar3D'
    }
});

function update() {
    analyzer.getByteFrequencyData(dataArray);
    // 根据频域数据构造 bar data。
    var data = ...

    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: data
        }]
    });

    setTimeout(update, UPDATE_DURATION);
};

update();

            </pre>
            <div id="chart"></div>
        </div>

        <script>


        var UPDATE_DURATION = 100;

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

        var audioContext = new AudioContext();

        var oReq = new XMLHttpRequest();
        oReq.open('GET', '../data/music.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: ['#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: '../data/audio.hdr',
                        exposure: 0,
                        diffuseIntensity: 0.2
                    }
                }
            },
            series: [{
                type: 'bar3D',
                silent: true,
                shading: 'lambert',
                data: [],
                barSize: 1,
                lineStyle: {
                    width: 4
                },
                // animation: false,
                animationDurationUpdate: UPDATE_DURATION
            }]
        }

        var myChart = initShowCode(option, {codeWidth: 500});

        </script>
    </body>
</html>