将声音“音量”添加到一些 JavaScript 代码（音频上下文）

Question

我有一个正在运行的小 javascript，它会播放 30 秒的音调。我想看看是否可以修改它，以便它可以以一半的音量播放（声音太大了）。我研究并发现了“获得”节点信息，但我查看了示例，老实说我是 javascrip 的菜鸟，并且我不完全理解我看到的示例。

这是我到目前为止所拥有的（效果很好，我只是想将其“音量”调小一些）

function myFunction(frequency, duration, callback) {

var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
var oscillator = audioCtx.createOscillator();
duration = 30000 / 1000;     // the 10000 used to be 'duration' 
oscillator.type = 'square';
oscillator.frequency.value = 500; // value in hertz
oscillator.connect(audioCtx.destination);
oscillator.onended = callback;
oscillator.start(0);
oscillator.stop(audioCtx.currentTime + duration);
}

任何人都可以帮我修改这个，以便我可以调整音量参数直到正确为止吗？

Answer 1

文档

您想要执行的操作的文档可以在

BaseAudioContext

下找到，特别是

BaseAudioContext.createGain()

方法。

MDN 文档有点缺乏，因为它只提供了无法按原样工作的片段。因此，下面给出了一个过于简化的示例，请记住这可能不是最佳实践。

说明

振荡器和增益控制都是音频节点。因此，您应该将它们描绘在如下所示的信号链中。

Web Audio Signal Chain

振荡器节点穿过增益节点，增益节点再穿过音频上下文。

解决方案

使用您当前的格式，因为下面给出了自包含片段（请参阅此处的jsfiddle）

<!DOCTYPE html>
<html>
<head>
    <script>
        var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
        var gainNode = audioCtx.createGain();
        gainNode.connect(audioCtx.destination);
        var gain = 0.1;
        //---------------------------------------------------------------------
        gainNode.gain.setValueAtTime(gain, audioCtx.currentTime);
    </script>
</head>
<!-- ===================================================================== -->
<body>

<div>
    <button onclick="myFunction()">
        Click me
    </button>
</div>
<script>
    function myFunction()
    {
        //---------------------------------------------------------------------      
        var duration = 0.5; // in seconds
        //---------------------------------------------------------------------
        var oscillator = audioCtx.createOscillator();
        oscillator.type = 'square';
        oscillator.frequency.value = 500;
        oscillator.connect(gainNode);
        oscillator.start(audioCtx.currentTime);
        oscillator.stop(audioCtx.currentTime + duration);
        //---------------------------------------------------------------------
    }
</script>
</body>
<!-- ===================================================================== -->
</html>

最佳实践

为了获得最佳实践，我建议您应该避免一遍又一遍地重新创建节点。相反，我会简单地在短时间内调高增益，然后将其调低，下面给出了一个例子。据我所知，WebAudio 没有包络生成器节点，但如果需要，您可以使用

.linearRampToValueAtTime()

。

注意：这目前在 Safari 中不起作用。（参见这里的jsfiddle）

<!DOCTYPE html>
<html>
<head>
    <script>
        //---------------------------------------------------------------------
        // Edit These
        var gain = 0.1;
        var duration = 1000;
        //---------------------------------------------------------------------
        var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
        var gainNode = audioCtx.createGain();
        //---------------------------------------------------------------------  
        var oscillator = audioCtx.createOscillator();
        oscillator.type = 'square';
        oscillator.frequency.value = 500;
        //---------------------------------------------------------------------
        oscillator.connect(gainNode);
        gainNode.connect(audioCtx.destination);
        //---------------------------------------------------------------------
        gainNode.gain.setValueAtTime(0.0, audioCtx.currentTime); // turned off by default
        oscillator.start(audioCtx.currentTime);
        //---------------------------------------------------------------------
    </script>
</head>
<!-- ===================================================================== -->
<body>

<div>
    <button onclick="soundOn()">
        Click me
    </button>
</div>
<script>
    function mute()
    {
        gainNode.gain.setValueAtTime(0.0, audioCtx.currentTime);
    }
    function soundOn()
    {
        gainNode.gain.setValueAtTime(gain, audioCtx.currentTime);
        setTimeout(mute,duration);
    }
</script>
</body>
<!-- ===================================================================== -->
</html>

将声音“音量”添加到一些 JavaScript 代码（音频上下文）

问题描述投票：0回答：1

1个回答

文档

说明

解决方案

最佳实践

更多资源

最新问题

将声音“音量”添加到一些 JavaScript 代码（音频上下文）

问题描述 投票：0回答：1

1个回答

文档

说明

解决方案

最佳实践

更多资源

最新问题

问题描述投票：0回答：1