时间戳

首页 > 解决方案 > Tone.js - AudioContext 不允许启动

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

问题描述

我用 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 上运行良好，并且如果我在浏览器调试控制台中硬拷贝它，它就可以运行。

我不知道为什么我会收到这个错误。

标签： javascriptweb-audio-apitone.js

解决方案

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

因此，您需要在某处添加一个按钮，以在单击事件上激活 AudioContext。Tone.js 的 README 中有一个简短的描述，描述了如何做到这一点。

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

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

推荐阅读