WebAudio API更改其中一个源的音量

我正在读这个article

我正在读这个article

我的目标是同时播放两个声音。一个声音在不同的音量。拥有常规的“音频”标签不是一个解决方案,因为它在移动设备上效果不佳。所以我开始潜入 Web Audio API。

我写了下面的代码,在所有设备上都能很好地工作。单一问题-我无法弄清楚如何控制音量。来自 example 的代码不工作 (

请帮助

function init() {
// Fix up prefixing
window.AudioContext = window.AudioContext || window.webkitAudioContext;
context = new AudioContext();
bufferLoader = new BufferLoader(
    context,
    [
    'mp3/speech.mp3',
    'mp3/bg-melody.mp3',
    ],
    finishedLoading
    );
bufferLoader.load();
}
function finishedLoading(bufferList) {
   document.querySelector('.message').innerHTML = "Ready to play"
  // Create two sources and play them both together.
  source1 = context.createBufferSource();
  source2 = context.createBufferSource();
  source1.buffer = bufferList[0];
  source2.buffer = bufferList[1];
  source1.connect(context.destination);
  // This code is not working
  var gainNode = context.createGain();
  gainNode.gain.value = 0.1;
  source2.connect(gainNode);
  source2.connect(context.destination);
 source2.loop = true;
}
Update:

此更改修复了问题

source2.connect(gainNode).connect(context.destination);
1

connect()方法返回一个AudioNode,然后必须在其上调用connect(),以便将节点链接在一起:

const gainNode = context.createGain()
source2
  .connect(gainNode)
  .connect(context.destination)
const $ = document.querySelector.bind(document)
const $$ = document.querySelectorAll.bind(document)
const audioCtx = new (AudioContext || webkitAudioContext)()
const gainNodes = [
  audioCtx.createGain(),
  audioCtx.createGain(),
]
const url = 'https://opus-bitrates.anthum.com/audio/music-96.opus'
loadAudio(url, gainNodes[0])
loadAudio(url, gainNodes[1],
  15.132 / (32 * 2),  // 32 beats in 15.132s
)
$$('input').forEach((el, i) => {
  gainNodes[i].gain.value = el.value / 100
  el.oninput = () => gainNodes[i].gain.value = el.value / 100
})
$('#play').onclick = play
$('#pause').onclick = pause
async function loadAudio(url, gainNode, delayS = 0) {
  const buffer = await (await fetch(url)).arrayBuffer()
  const source = audioCtx.createBufferSource()
  source.buffer = await audioCtx.decodeAudioData(buffer)
  source.loop = true
  source
    .connect(gainNode)
    .connect(audioCtx.destination)
  source.start(delayS)
}
function play() { audioCtx.resume() }
function pause() { audioCtx.suspend() }
<button id="play">Play</button><button id="pause">Pause</button><br />
<label><input type="range" value="50" max="100" /> Track 1</label><br />
<label><input type="range" value="50" max="100" /> Track 2</label>

本站系公益性非盈利分享网址,本文来自用户投稿,不代表码文网立场,如若转载,请注明出处

(502)
如何删除PDF表单的所有者密码并使其可编辑
上一篇
无法在~/bin中保存文件
下一篇

相关推荐

  • 打开关闭的网页:QWebview-重新打开关闭的窗口

    关于打开关闭的网页的问题,在how to reopen a closed window中经常遇到,我正在QT5(IDEQt Creator 2.6.2) 中开发一个基本的 Web 浏览器。如果单击link\anchor和target:…

    2022-11-27 04:59:01
    0 76 46
  • 电脑桌面分区:将平板电脑连接到桌面 Web签名板

    关于电脑桌面分区的问题,在usb signature pad for pc中经常遇到,我有一个 Web 应用程序包含 javascript 签名板弹出,这个网页是完美的工作,当我从平板电脑屏幕打开它,用户可以使用平板电脑引脚签名。…

    2022-12-06 13:31:16
    0 19 20
  • WEB认证:redmine-web服务认证

    关于WEB认证的问题,在redmine iphone中经常遇到,我正在使用 Rails 2.3.5。在我的 redmine 应用程序中,我正在为 iphone 提供 web 服务。如何从 iphone 验证用户以及登录后我的 rails 应用程序如何将我识别为登录用户。登录后是否需要提供任何令牌并使用令牌进一步请求 API 调用。请建议我为 iphone 应用程序实现身份验证的方式。…

    2022-12-16 01:32:08
    0 58 88
  • Web文件预览:如何在Web应用程序中预览EML文件

    关于Web文件预览的问题,在eml file reader中经常遇到,我需要能够在基于 Angular /.Net 核心 api 构建的 Web 应用程序中预览 EML 文件。我能够通过 Microsoft 找到仅预览 Word 、 Excel 或 PowerPoint 文档的服务here。我可以在 Web 应用程序中嵌入此页面并预览这些文件类型。但是此服务不支持 EML 文件。…

    2022-12-12 03:34:15
    0 49 16
  • 清单v3资源必须在web_accessible_resources中列出

    我得到这个错误,即使“image / copy.svg”在 manifest.json 中正确声明…

    2022-11-20 07:00:42
    0 67 20
  • 批量删除 /转换.WebP文件

    我从文件夹中的页面下载了一些图像,并且所有图像都由.webp完成,例如toto.jpg.webp,titi.png.webp...…

    2022-11-11 15:13:36
    0 68 82
  • 带手刹的多个音频轨道(add audio to video handbrake)

    试图以相当普遍的方式对视频进行编码,典型的调用将如下所示:…

    2022-11-21 12:10:05
    0 52 32

发表评论

登录 后才能评论

评论列表(3条)