0

您好我正在创建一个简单的上传页面，用户可以在其中加载本地文件并进行播放。一个小时以来，我没有上传到服务器，只是想创建一个文件输入，然后用 Tone.js 播放音频文件（如果可能的话）。

我正在使用这个测试 P5.js 库和 Tone.js 音频框架，代码如下：

let inputFile, bttPlayFile;
let files;

window.AudioContext = window.AudioContext || window.webkitAudioContext;
let context = new Tone.Context();
let source;

function setup() {
  
  inputFile = createFileInput(uploadTrack);
  bttPlayFile = createButton('play');
  bttPlayFile.mousePressed(tooglePlay);
}

function playSound(arraybuffer) {
  context.decodeAudioData(arraybuffer, function(buf) {
    source = new Tone.BufferSource();
    source.connect(context).toDestinattion();
    source.Tone.Buffer = buf;
    source.start(0);
  });
}

function selectedFile(evt) {   
  files = evt.target.files;
  playFile(files[0]);
}

function playFile(file) {
  let reader = new FileReader();
  reader.onload = function(e) {
    console.log(e.target.result);
    playSound(e.target.result);
  }
  reader.readAsArrayBuffer(file);
}

function uploadTrack() {
  inputFile.changed(selectedFile, false);
}

function tooglePlay() {
  Tone.Transport.start();
}
<!DOCTYPE html>
<html lang="en">
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>

    <link rel="stylesheet" type="text/css" href="style.css">
    <meta charset="utf-8" />
    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tone/14.8.32/Tone.js" integrity="sha512-USKCQh+O8BX/a2K06xPNTwduhmQvN/m9FhkR7PRysCRlPoqIItl7Qz3xVTZC/oIHe6g5XvnLHDUgGpRMZZTmFQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

  </head>
  <body>
    <script src="sketch.js"></script>
  </body>
</html>

目前，什么都没有发生，我想了解为什么以及如何进行此操作。谢谢！

4

1 回答 1

0

如果您打开浏览器的控制台，您应该会看到一条警告。

AudioContext 被“暂停”。从用户操作调用 Tone.start() 以启动音频。

我认为如果您Tone.start()在加载和解码所选音频文件之前调用“播放”按钮的单击处理程序，它将起作用。

window.AudioContext = window.AudioContext || window.webkitAudioContext它与您的问题无关，但从您的代码中删除应该是安全的。Tone.js 在内部使用标准化的音频上下文，它应该为您处理这个问题。

于 2022-01-30T00:21:04.877 回答