Question

我需要使用香草JavaScript从用户的媒体文件在画布上绘制音频频谱。但是，我不能解决这个问题。因为，每个人都使用savesurfer.js。

我确实在Web音频API上使用过createAnalyser。但是'CreateAnalyser'无法获得用户媒体文件的频率。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <input type="file" id="file">
    <canvas id="canvas" width="500" height="250"></canvas>
    <script>

        // draw an oscilloscope of the current audio source
        var canvas = document.getElementById('canvas');
        var canvasCtx = canvas.getContext('2d');
        var WIDTH = canvas.width;
        var HEIGHT = canvas.height;
        var audio = null;

        document.getElementById('file').addEventListener('change', function(e) {
            var audioCtx = new AudioContext();
            var file = e.target.files[0];
            var fileName = file.name;
            var fileReader = new FileReader();
            var audio = new Audio(fileName);
            var analyser = audioCtx.createAnalyser();

            fileReader.onload = function(e) {
                var buffer = e.target.result;
                var source = audioCtx.createBufferSource();
                audioCtx.decodeAudioData(buffer, (buffer) => {
                    source.loop = true;

                    var offlineAudioCtx = new OfflineAudioContext(buffer);

                    offlineAudioCtx.startRendering().then(function(buffer) {
                        source.buffer = buffer;
                        source.connect(analyser);
                        source.connect(audioCtx.destination);
                        var dataArray = new Uint8Array(analyser.frequencyBinCount);
                        analyser.getByteTimeDomainData(dataArray);
                        console.log(dataArray);
                    });
                });
            }
            fileReader.readAsArrayBuffer(file);
        });
    </script>
</body>
</html>

Answer 1

您在这里缺少了一些东西。首先，您没有连接到分析器节点的输入，因此您需要执行类似的操作

source.connect(analyser);

您现在应该获得非恒定输出。

您可能不想在每个事件上创建一个新的AudioContext（和AnalyserNode）。您只需一个。

您可能还想在每个事件中多次致电analyser.getByteTimeDomainData()，但这可能没问题。同样，时空球数据的实际长度是fftSize，而不是frequencyBinCount。您在此处所做的只是仅复制可用时域数据的一半。也许对于您想要的东西也没关系。

如何使用香草JavaScript绘制音频频谱？

1 个答案: