Question

我需要使用香草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>

我认为dataArray具有媒体文件的频率。但是dataArray只有128个。

Answer 1

您错过了一些重要步骤

decodeAudioData
如果要提供缓冲区，则要createBufferSource
您要source.start（）开始播放

所以-这样就可以了，但是我使用的是setInterval而不是您想要显示分析器输出的任何内容

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<div class="navbar navbar-default navbar-static-top">
  <div class="container">
    <ul class="nav navbar-nav">
      <li class="dropdown">
        <a href="#" data-toggle="dropdown" class="dropdown-toggle">Services <b class="caret"></b></a>
        <ul class="dropdown-menu">
          <li><a href="#">Service1</a></li>
          <li role="presentation" class="sub-menu">
            <a data-toggle="collapse" href="#collapse">
              Service2 <b class="caret"></b>
            </a>
            <ul>
              <div id="collapse" class="panel-collapse collapse">
                <li role="presentation"><a href="#">Service2 sub1</a></li>
                <li role="presentation"><a href="#">Service2 sub2</a></li>
              </div>
            </ul>
          </li>
        </ul>
      </li> <!-- .dropdown -->
    </ul> <!-- .navbar-nav -->
  </div> <!-- .container -->
</div> <!-- .navbar -->

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

如何使用香草JavaScript从用户的媒体文件中获取频率？

1 个答案: