Question

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

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

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

1 个答案: