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>

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

(849)
如何通过 SP-API或PA-API获取产品广告数据
上一篇
在添加 /更新/删除项目时对屏幕中的本机导航-更新列表做出反应(navigation updater)
下一篇

相关推荐

  • win2008server配置web服务器:如何在Windows 2008 Server上配置Web服务器

    示例示例需要在上安装IIS( ),点击开始菜单,打开“控制面板”,然后点击“程序和功能”,选择“启用或关闭windows功能”,勾选“ 信息服务”,点击“确定”,安装IIS。接下来,需要配置IIS,点击开始菜单,打开“控制面板”,然后点击“管理工具”,选择“ 信息服务(IIS)管理器”,在左侧的目录树中,双击“网站”,点击“添加网站”,输入网站名称、物理路径,选择端口号,点击“确定”,完成配置。…

    2023-01-27 07:13:50
    0 55 97
  • python web开发工具:使用Python开发Web应用程序的基本步骤

    Python web开发工具是一种用于构建功能强大的Web应用程序的工具,它可以帮助开发人员快速、高效地创建动态网站和Web服务。…

    2023-01-11 04:37:23
    0 63 98
  • webview 调试:如何使用WebView调试你的网页应用

    示例示例Webview 调试是指在 Webview 中调试网页,以检查网页的正确性和可用性。在 .xml 中添加如下代码:…

    2023-01-12 07:04:47
    0 85 26
  • python写网页前端:Welcome to Python Web Development!

    Python可以用来写网页前端,它可以帮助开发者快速创建功能丰富的Web应用程序。下面是一个简单的Python代码示例,用于创建一个简单的HTML页面:…

    2023-01-03 10:18:59
    0 17 97
  • mysql数据库简答题:MySQL数据库的优势及其在Web开发中的应用

    MySQL数据库是一种关系型数据库,它将数据存储在表中,并使用SQL语句来查询和管理数据。它可以用来存储和管理各种类型的数据,包括文本、数字、日期和图像等。…

    2023-01-26 16:13:52
    0 51 56
  • 数据库实用教程:教程 Web应用程序的数据库设计(database design tutorial)

    关于数据库实用教程的问题,在database design tutorial中经常遇到,我们需要创建一个教程类型的应用程序,其中会有主题列表,每个主题都会有子主题。用户可以注册一个主题,浏览子主题并将子主题标记为“已完成”。我们选择使用MySql关系数据库。…

    2022-12-16 05:47:21
    0 80 75
  • 使用WebXR的立体照片的VR幻灯片

    我有一个庞大且不断增长的 JPS 和 MPO 格式的立体(不是 360)照片库,我想通过网站以某种形式的 VR 耳机立体幻灯片分享。…

    2022-11-11 15:20:53
    0 21 44

发表评论

登录 后才能评论

评论列表(27条)