javascript - 使 AudioBufferSourceNode 成为
问题描述
这种交换的一个方向是可能的 - 我知道您可以使用<audio>
元素的源作为获取音频的一种方式,以便通过createElementSourceNode()
. 是否可以做相反的事情,其中 anAudioBufferSourceNode
用作<audio>
元素的来源?
我很确定这是不可能的,但我一直在通过 npm 寻找标准外观、简洁的默认浏览器音频元素播放控件的娱乐,用于使用,AudioBuffers
但我没有找到任何东西。
解决方案
您可以将 AudioBufferSourceNode 连接到MediaStreamDestination 节点,然后使用该节点的属性提供HTMLAudioElementsrcObject
.stream
:
start.onclick = e => {
const audioCtx = new AudioContext();
fetch("https://dl.dropboxusercontent.com/s/1cdwpm3gca9mlo0/kick.mp3")
.then(resp => resp.arrayBuffer())
.then(buf => audioCtx.decodeAudioData(buf))
.then(audioBuffer => {
const source = audioCtx.createBufferSource();
source.buffer = audioBuffer;
source.playbackRate.value = 0.1;
source.loop = true;
source.start(0);
const streamNode = audioCtx.createMediaStreamDestination();
source.connect(streamNode);
const audioElem = new Audio();
audioElem.controls = true;
document.body.appendChild(audioElem);
audioElem.srcObject = streamNode.stream;
})
.catch(console.error);
}
<button id="start">start</button>
推荐阅读
- php - 在 php mysql 和 html 中选择多个给定选项的逻辑问题
- python - 启动 jupyter notebook 时出现 bash 错误 - 解释器错误:没有这样的文件或目录
- firebase - 如何使用 Firebase 在域中托管单个 JS 文件?
- javascript - 通过对象中的字符串数组过滤和对象数组
- r - 如何在 environment.yml 中安装 CRAN 包
- php - 如何在 AWS SNS 上设置发件人号码(使用 PHP v3 SDK)
- docker - 为什么 docker 占用大量空间以及如何处理它?
- java - 如何告诉 UI 线程为另一个线程的按钮设置动画?
- reactjs - 赛普拉斯不输入日期
- node.js - 使用属性过滤查询中的对象 mongodb 列表