问题描述
我想使用 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,0.025)
tonePlaying = true
}
}
function stopTone(){
g.gain.setTargetAtTime(0,0.025)
tonePlaying = false
}