1

我正在尝试使用 HTMLAudioElement 和 AudioSourceNode 测试播放音频。对于以后的应用程序，我需要两个功能：

  1. 在播放速率更改后必须保留音高。
  2. 音量需要更改为大于 1 的值。

因为功能 2 我添加了使用 AudioSourceNode 和 GainNode 的解决方法。

我需要在后面的应用程序中将音频文件作为 ArrayBuffer，这就是我之前添加文件读取部分的原因。

问题：

该代码适用于 Chrome 和 Opera，但不适用于 Firefox。playBackRate 设置为2，但音频信号的playbackRate 没有改变。为什么会这样，我该如何解决？

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Timestretching 2</title>
  <script type="text/javascript">
      var audioContext = window.AudioContext // Default
          || window.webkitAudioContext // Safari and old versions of Chrome
          || window.mozAudioContext
          || false;

      function play() {
          var fileInput = document.getElementById("file");
          var file = fileInput.files[0];

          var reader = new FileReader();
          reader.onload = function (event) {
              console.log("finished!");
              console.log(event.srcElement.result);

              var audioCtxt = new audioContext();
              var url = URL.createObjectURL(new File([event.srcElement.result], "test.wav"));
              var player = new Audio();

              const source = audioCtxt.createMediaElementSource(player);
              player.src = url;
              console.log("wait to play");
              player.addEventListener("canplay", function () {
                  // create a gain node to set volume greater than 1
                  const gainNode = audioCtxt.createGain();
                  gainNode.gain.value = 2.0; // double the volume
                  source.connect(gainNode);
                  gainNode.connect(audioCtxt.destination);

                  player.playbackRate = 2.0;
                  player.play();
                  player.playbackRate = 2.0;

                  console.log("playbackRate is " + player.playbackRate);
              });
          };

          reader.onprogress = function (progress) {
              console.log(progress.loaded / progress.total);
          };

          reader.onerror = function (error) {
              console.error(error);
          };

          reader.readAsArrayBuffer(file);
      }
  </script>
</head>
<body>
<input id="file" type="file" value="Audio Datei auswählen"/>
<button onclick="play()">PLAY</button>
</body>
</html>

4

0 回答 0