如何从用户'；使用香草javascript的媒体文件？_Javascript_Web Audio Api

如何从用户'；使用香草javascript的媒体文件？

javascript

如何从用户'；使用香草javascript的媒体文件？,javascript,web-audio-api,Javascript,Web Audio Api,我需要获得频率从用户的媒体文件与香草javascript。因为，我会在画布上画光谱我确实在Web音频API上使用了createMediaElementSource和getByteTimeDomainData。但是，我无法解决这个问题 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="wi

我需要获得频率从用户的媒体文件与香草javascript。因为，我会在画布上画光谱

我确实在Web音频API上使用了createMediaElementSource和getByteTimeDomainData。但是，我无法解决这个问题

<!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.createMediaElementSource(audio);
                var dataArray = new Uint8Array(analyser.fftSize);
                source.connect(analyser);
                analyser.connect(audioCtx.destination);
                analyser.getByteTimeDomainData(dataArray);
                console.log(dataArray);
            }
            fileReader.readAsArrayBuffer(file);
        });
    </script>
</body>
</html>


文件
//绘制当前音频源的示波器
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'，函数（e）{
var audioCtx=新的AudioContext（）；
var file=e.target.files[0]；
var fileName=file.name；
var fileReader=newfilereader（）；
var audio=新音频（文件名）；
var Analyzer=audioCtx.createAnalyzer（）；
fileReader.onload=函数（e）{
var buffer=e.target.result；
var source=audioCtx.createMediaElementSource（音频）；
var DATARRAY=新的Uint8Array（analyzer.fftSize）；
源。连接（分析仪）；
分析仪连接（audioCtx.目的地）；
Analyzer.getByteTimeDomainData（数据数组）；
log（数据数组）；
}
readAsArrayBuffer（文件）；
});

我认为dataArray具有媒体文件的频率。

但是，dataArray只有128个。您错过了几个重要步骤

解码音频数据

如果要提供缓冲区，则需要创建BufferSource

您想使用source.start（）开始播放

所以-这是你想要的，但是我使用的是setInterval，而不是你想要显示分析仪输出的任何东西

    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();
        // you don't need this next line at all
        // var audio = new Audio(fileName);
        var analyser = audioCtx.createAnalyser();

        fileReader.onload = function(e) {
            var buffer = e.target.result;
            console.log(buffer);
            audioCtx.decodeAudioData(buffer).then(audioBuffer => {
                console.log(audioBuffer);
                var source = audioCtx.createBufferSource();
                var dataArray = new Uint8Array(analyser.fftSize);
                source.buffer = audioBuffer;
                source.connect(analyser);
                analyser.connect(audioCtx.destination);
                source.start();
                setInterval(() => {
                    console.log(source.context.currentTime);
                    analyser.getByteTimeDomainData(dataArray);
                    console.log(dataArray);
                }, 1000);
            });
        }
        fileReader.readAsArrayBuffer(file);
    });

你跟随了吗？当然是马特伦！我确实这么做了。

Audio

constructor接受一个URI，而不仅仅是一个文件名。。。如果您希望可以使用

新音频（URL.createobejctur（文件））但是甚至不要使用FileReader。如果希望使用FileReader，则需要对缓冲区变量进行处理。（提示：这样一来，您就不需要MediaElementSource，而需要BufferSource，您需要先解码buffer
中包含的音频数据。