4

我想制作一个显示交互式视觉效果的简单网站，并且我希望其中一些是音频驱动的。我希望参观者能够用他们自己选择的音乐来驱动视觉效果。除了从麦克风获取音频输入之外，我很难找到很多关于其他任何内容的文档。

例如，我的网页（在选项卡 1 中）正在运行 javascript 代码 X，它允许我处理在 Web 浏览器的另一个选项卡中播放的音频流。这可能吗？

4

2 回答 2

2

如果我正确理解您的问题，您想从当前选项卡之外的来源捕获音频。

作为W3C 规范的一部分，没有这样的 api ，可能是由于如果有的话会出现有关用户完整性的问题。由于浏览器本质上是在执行外来代码，因此浏览器往往被严格沙盒化，并且需要获得同意以防止任何侵犯用户隐私的行为。

如果您或用户有权访问媒体，请尝试使用Audio和FileAPI。如果您提到的那样或使用输入音频捕获 API 都不够，您将不得不转向创建浏览器扩展或完全转向另一个平台。

于 2015-11-10T20:24:06.640 回答
0

您可以使用 WebRtc API 获取麦克风流

if (!navigator.getUserMedia)
  navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia ||
  navigator.mozGetUserMedia || navigator.msGetUserMedia;

if (navigator.getUserMedia) {
    navigator.getUserMedia({audio:true}, success, function(e) {
    });
}

…………………………………………………………………………

 function success(e) {
      audioContext = window.AudioContext || window.webkitAudioContext;
      context = new audioContext();

      // the sample rate is in context.sampleRate
      audioInput = context.createMediaStreamSource(e);

      var bufferSize = 2048;
      recorder = context.createScriptProcessor(bufferSize, 1, 1);
      recorder.onaudioprocess = function(e){

        console.log ('recording');
        var left = e.inputBuffer.getChannelData(0);
    // stream
        window.Stream.write(convertoFloat32ToInt16(left));
  }
  audioInput.connect(recorder)
  recorder.connect(context.destination); 


function convertoFloat32ToInt16(buffer) {
  var l = buffer.length;
  var buf = new Int16Array(l)
  while (l--) {
    buf[l] = buffer[l]*0xFFFF;    //convert to 16 bit
  }
  return buf.buffer
}

如果您只喜欢音频流的可视化，您可以使用 javascript 插件，例如在此处输入链接描述

于 2015-11-10T19:42:51.877 回答