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() }
<on id="play">Play</on><on id="pause">Pause</on><br />
<label><input type="range" value="50" max="100" /> Track 1</label><br />
<label><input type="range" value="50" max="100" /> Track 2</label>

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

(725)
如何删除.htaccess文件与权限0444
上一篇
无法在~/bin中保存文件
下一篇

相关推荐

  • webstorm运行vue:Hello World!

    是一款功能强大的开发工具,可以用来创建和运行Vue.js应用程序。在中创建一个新的Vue.js项目:…

    2023-06-07 03:28:31
    0 73 51
  • webapi 教程:如何使用 WebAPI 构建功能强大的 Web 应用

    示例示例WebAPI 教程WebAPI 是一种基于 HTTP 协议的应用程序接口,它允许 Web 开发人员以简单、统一的方式来创建和管理 Web 应用程序。它可以用于创建可以从任何设备或平台访问的 RESTful API,这些 API 可以用于从 Web 浏览器、桌面应用程序、移动应用程序或任何其他设备访问数据。…

    2023-02-16 13:03:37
    0 91 61
  • 打开关闭的网页:QWebview-重新打开关闭的窗口

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

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

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

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

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

    2022-12-16 01:32:08
    0 98 43
  • 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 75 83
  • 清单v3资源必须在web_accessible_resources中列出

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

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

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

    2022-11-11 15:13:36
    0 75 30

发表评论

登录 后才能评论

评论列表(80条)