个人中心
gpt4 book ai didi

javascript - 通过javascript录制网站的内部音频

转载 作者：行者123 更新时间：2023-12-04 03:56:38 24 4
gpt4 key购买 nike

我做了 this webapp为了创作音乐，我想添加一个功能，将作品下载为 .mp3/wav/whateverFileFormatPossible，我一直在寻找如何做到这一点很多次，但总是放弃，因为我找不到任何关于如何做的例子这样做，我发现的只有麦克风录音机，但我想录制网站的最终音频目的地。
我以这种方式播放音频:

const a_ctx = new(window.AudioContext || window.webkitAudioContext)()
function playAudio(buf){
    const source = a_ctx.createBufferSource()
    source.buffer = buf
    source.playbackRate.value = pitchKey;
    //Other code to modify the audio like adding reverb and changing volume
    source.start(0)
}

其中 buf 是 AudioBuffer。
总而言之，我想录制整个窗口音频但无法想出办法。
link to the whole website code on github

最佳答案

也许您可以使用 MediaStream Recording API ( https://developer.mozilla.org/en-US/docs/Web/API/MediaStream_Recording_API ):

The MediaStream Recording API, sometimes simply referred to as the Media Recording API or the MediaRecorder API, is closely affiliated with the Media Capture and Streams API and the WebRTC API. The MediaStream Recording API makes it possible to capture the data generated by a MediaStream or HTMLMediaElement object for analysis, processing, or saving to disk. It's also surprisingly easy to work with.


另外，你可以看看这个话题: new MediaRecorder(stream[, options]) stream can living modify? .它似乎讨论了一个相关的问题，可能会为您提供一些见解。
以下代码生成一些随机噪声，应用一些变换，播放它并创建一个音频控件，它允许通过“将音频另存为...”从上下文菜单中下载噪声(我需要更改已保存的扩展名文件到 .wav 以播放它。) 

<html>
<head>
<script>

const context = new(window.AudioContext || window.webkitAudioContext)()

async function run()
{
    var myArrayBuffer = context.createBuffer(2, context.sampleRate, context.sampleRate);
    // Fill the buffer with white noise;
    // just random values between -1.0 and 1.0
    for (var channel = 0; channel < myArrayBuffer.numberOfChannels; channel++) {
      // This gives us the actual array that contains the data
      var nowBuffering = myArrayBuffer.getChannelData(channel);
      for (var i = 0; i < myArrayBuffer.length; i++) {
        // audio needs to be in [-1.0; 1.0]
        nowBuffering[i] = Math.random() * 2 - 1;
      }
    }
    playAudio(myArrayBuffer)
}

function playAudio(buf){
    const streamNode = context.createMediaStreamDestination();
    const stream = streamNode.stream;
    const recorder = new MediaRecorder( stream );
    const chunks = [];
    recorder.ondataavailable = evt => chunks.push( evt.data );
    recorder.onstop = evt => exportAudio( new Blob( chunks ) );

    const source = context.createBufferSource()
    source.onended = () => recorder.stop();
    source.buffer = buf
    source.playbackRate.value = 0.2
    source.connect( streamNode );
    source.connect(context.destination);
    source.start(0)
    recorder.start();
}

function exportAudio( blob ) {
  const aud = new Audio( URL.createObjectURL( blob ) );
  aud.controls = true;
  document.body.prepend( aud );
}


</script>
</head>
<body onload="javascript:run()">
<input type="button" onclick="context.resume()" value="play"/>
</body>
</html>

这就是你要找的吗？

关于javascript - 通过javascript录制网站的内部音频，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/63763230/

24 4 0
文章推荐： java - 检索表名列表
文章推荐： swift - 相当于 SpriteKit 中的弹出窗口
文章推荐： python - Conda 骨架 pypi 因 pmdarima 而失败——AttributeError numpy disutils
文章推荐： python - Pandas - 取 N 个以前的值并从 Series 中创建矩阵
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com