无法使用 AudioContext 在 JavaScript 中发出声音答案

【问题标题】：Failed to use AudioContext to make sound in JavaScript无法使用 AudioContext 在 JavaScript 中发出声音
【发布时间】：2021-03-24 23:32:01
【问题描述】：

我想使用 JavaScript 中的 AudioContext API 制作四个游戏按钮来发出声音。我设置onmouseclick 监听器触发startTone() 方法和onmouseup 触发stopTone() 方法。但是，由于我确实喜欢该教程，因此它没有声音。这是我的代码：

HTML 按钮部分：

<div id="gameButtonArea">
      <button id="button1" onclick="guess(1)" onmousedown="startTone(1)" onmouseup="stopTone()"></button>
      <button id="button2" onclick="guess(2)" onmousedown="startTone(2)" onmouseup="stopTone()"></button>
      <button id="button3" onclick="guess(3)" onmousedown="startTone(3)" onmouseup="stopTone()"></button>
      <button id="button4" onclick="guess(4)" onmousedown="startTone(4)" onmouseup="stopTone()"></button>
</div>

声音合成器的Javascript初始化：

var context = new AudioContext()
var o = context.createOscillator()
var g = context.createGain()
g.connect(context.destination)
g.gain.setValueAtTime(0,context.currentTime)
o.connect(g)
o.start(0)

JavaScript 方法定义：

const freqMap = {
  1: 261.6,
  2: 329.6,
  3: 392,
  4: 466.2
}

function playTone(btn,len){ 
  o.frequency.value = freqMap[btn]
  g.gain.setTargetAtTime(volume,context.currentTime + 0.05,0.025)
  tonePlaying = true
  setTimeout(function(){
    stopTone()
  },len)
}

function startTone(btn){
  if(!tonePlaying){
    o.frequency.value = freqMap[btn]
    g.gain.setTargetAtTime(volume,context.currentTime + 0.05,0.025)
    tonePlaying = true
  }
}

function stopTone(){
    g.gain.setTargetAtTime(0,context.currentTime + 0.05,0.025)
    tonePlaying = false
}

【问题讨论】：

代码缺少 a)tonePlaying、b)volume 和 c)guess 的声明。像这样的单个错误将阻止代码死在其轨道上。添加缺少的东西，它神奇地开始工作：jsfiddle.net/pz72cu9h
@ChrisG 好吧，我在其他地方声明了 volume 和 guess(button) 方法，以处理猜测的正确性。也许我需要实现tonePlaying
抱歉，我发现我已经申报了所有这些项目，我发现了问题所在。我会解释的。

标签： javascript audiocontext

【解决方案1】：

我通过将声音合成器的初始化放在脚本文件的末尾来解决了这个问题。我在控制台中发现了一个错误：

如果像我之前一样一开始就初始化，会出错。

【讨论】：

如果相应的代码在函数内部，那么脚本的结束与否对于代码的执行时间并不重要。您发布的警告看起来像是您尝试在按下按钮之前播放音调，而不是对此的反应；但是，这根本不是您的问题所暗示的。答案需要提供工作代码，但问题甚至不够清楚，无法实际回答。