javascript - Tone.js - AudioContext 不允许启动

Question

我使用 Codepen 编写了一个简单的合成器。它实际上可以工作并且做了我期望它做的事情(在 Codepen 上和网站上的 Debug模式下)。不幸的是，它在我的本地计算机上不起作用:如果我下载代码并尝试运行它，它会给我在问题标题中提到的错误。

如果我将代码“硬拷贝”到浏览器控制台中并运行它，它就会完美运行。

这是我的完整应用程序，每当您将鼠标悬停在带有相应音符的打击垫上时，它都会播放一些合成声音:https://codepen.io/mattiasu96/pen/pxPXpB

//Simple definition of some filter and oscillator to create a composite sound
------------------------------------------
var filter = new Tone.AutoFilter(2,40,2.5).toMaster();
filter.depth=1;
filter.wet=1;
filter.filter.rolloff=-48;
filter.start();



var synth = new Tone.Synth({
  oscillator: {
    type: 'sawtooth',

  },
  envelope: {
    attack: 0.001,
    decay: 0.1,
    sustain: 5,
    release: 0.1
  }
}).connect(filter);

var synthB = new Tone.Synth({
  oscillator: {
    type: 'sawtooth',
    detune  : -10 ,

  },
  envelope: {
    attack: 0.001,
    decay: 0.1,
    sustain: 5,
    release: 0.1
 }
}).connect(filter);

var synthC = new Tone.Synth({
  oscillator: {
    type: 'sawtooth',
    detune  : +10 ,

  },
  envelope: {
    attack: 0.001,
    decay: 0.1,
    sustain: 5,
    release: 0.1
  }
}).connect(filter);

var synthD = new Tone.Synth({
  oscillator: {
    type: 'sawtooth',
    detune  : -5 ,

  },
  envelope: {
    attack: 0.001,
    decay: 0.1,
    sustain: 5,
    release: 0.1
  }
}).connect(filter);

var synthE = new Tone.Synth({
  oscillator: {
    type: 'sawtooth',
    detune  : -2 ,

  },
  envelope: {
    attack: 0.001,
    decay: 0.1,
    sustain: 5,
    release: 0.1
  }
}).connect(filter);

var mode = 0; // 0 = modalità single note, 1 = modalità multiple notes


notes = document.querySelectorAll(".hex");
----------------------------------------

// Triggering the notes using the pads i have created

notes.forEach(function(note) {
    note.addEventListener("mouseover", function(event){
    x =  event.target.title;
    filter.baseFrequency=x;
    synth.triggerAttack(x);
    synthB.triggerAttack(x);
    synthC.triggerAttack(x);
    synthD.triggerAttack(x);
    synthE.triggerAttack(x);


    });
});

   notes.forEach(function(note) {
    note.addEventListener("mouseout", function(event){
    x =  event.target.title;
    synth.triggerRelease();
    synthB.triggerRelease();
    synthC.triggerRelease();
    synthD.triggerRelease();
    synthE.triggerRelease();


    });
});

一切正常，但在本地不行，正如我上面提到的。该代码实际上是正确的，因为它在 Codepen 上运行良好，并且如果我将其硬复制到浏览器调试控制台中，它也可以运行。

我不明白为什么会出现此错误。

Answer 1

您所描述的问题听起来像是浏览器不允许 AudioContext(由 Tone.js 使用)在没有任何用户交互的情况下启动。不幸的是，“mouseover”和“mouseout”事件不算作用户交互。

因此，您需要在某处添加一个按钮，在单击事件时激活 AudioContext。有一个short description in the README of Tone.js其中描述了如何做到这一点。

控制 AudioContext 是否可以自行启动或必须由用户交互激活的机制通常称为自动播放策略。可以在特定站点上禁用该策略。例如，Chrome 还维护一个过去播放过音频的网站列表，以允许频繁使用的网站在没有任何用户交互的情况下播放音频。我想 https://codepen.io/ 就是这种情况在您的计算机上。

在开发工具的帮助下运行代码时，自动播放策略通常也不起作用，这可能就是为什么它也适合您的原因。