Tone.js

Question

我用 Codepen 写了一个简单的合成器。它确实有效并且做了我期望它做的事情（在 Codepen 和网站上的调试模式下）。不幸的是，它在我的本地机器上不起作用：如果我下载代码并尝试运行它，它会给我在问题标题中提到的错误。

如果我 "hard copy" 将代码输入浏览器控制台并运行它，它将完美运行。

这是我的完整应用程序，只要您将鼠标悬停在带有相应音符的打击垫上，它就会播放一些合成声音：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/ 就是这种情况。

当运行在开发工具的帮助下编写代码时，自动播放策略通常也没有效果，这可能就是为什么它也适用于您的原因。

Tone.js - 不允许启动 AudioContext

Tone.js - The AudioContext was not allowed to start

javascript

web-audio-api