使用 JavaScript 检测可听见的声音

Question

有什么方法可以检测某个页面是否使用 jscript 产生噪音？某种环境变量或跟踪扬声器状态的东西？我正在尝试编写一个脚本，如果该选项卡正在发出声音，则会在该选项卡标题上放置一个图标。

Answer 1

我认为您无法检测到扬声器是否在 JavaScript 中发出噪音，但您可能不必这样做。

也许您可以自己隐式地跟踪这一点。例如，如果有一个播放按钮，点击后您可以开始播放音频并显示图标。一旦用户单击停止按钮，您就会停止音频并隐藏图标。

Answer 2

抄自Quora

网络上的大部分声音是 通过 Flash 完成。闪光灯没有 在制作时通知浏览器 声音。也就是说，如果两个 不同的选项卡正在运行 Flash， 浏览器不知道哪个是 发出声音。

HTML5媒体的介绍 标签可以在这方面有所帮助，但我 怀疑只有一个音频指示器 工作了一些时间（对于非 Flash 页）会比 没有音频指示器。

（不要注意下面的评论（在链接的 Quora 问题中）说 Chrome 在播放声音时会显示一个“播放”图标。那是 Soundcloud 更改了自己页面的标题，而不是 Google Chrome）

Answer 3

不，这是不可能的。

很多插件都可以发声，而且它们都以自己的方式发声。这里没有包罗万象。

也许在 Vista/7 上，应用程序的声音使用情况实际上是被跟踪的，并且当使用像 Chrome 这样为每个页面创建单独进程的浏览器时，你可能会有更多的运气。这将涉及找出哪些进程正在播放声音，然后找出每个进程加载了哪个页面。但是通过JavaScript？没办法。

Answer 4

这可以帮助你，fbc_array 是 de array noise 使用 fbc_array[value] 来获得这个噪音。 例子：

window.onload = function() {
  var file = document.querySelector('input');
  file.onchange = function(e) {
    var boton = e.target.files;
    var archivo = boton[0];
    if (!archivo.type.match(/audio/)) {
      alert("Seleciona un audio, por favor.");
    } else {
      var lector = new FileReader();
      lector.readAsDataURL(archivo);
      lector.addEventListener("load", initMp3Player, false);
    }
  }

  function initMp3Player(e) {
    var result = e.target.result;
    var audio = document.querySelector('audio');
    audio.src = result;
    context = new AudioContext();
    analyser = context.createAnalyser();
    source = context.createMediaElementSource(audio);
    source.connect(analyser);
    analyser.connect(context.destination);
    frameLooper();
  }

  function frameLooper() {
    window.requestAnimationFrame(frameLooper);
    fbc_array = new Uint8Array(analyser.frequencyBinCount);
    analyser.getByteFrequencyData(fbc_array);
    document.querySelector('#o1').style.transform = 'scale(' + fbc_array[1] / 75 + ')';
    document.querySelector('#o2').style.transform = 'scale(' + fbc_array[50] / 100 + ')';
    document.querySelector('#o3').style.transform = 'scale(' + fbc_array[100] / 200 + ')';
  }
}

* {
  margin: 0;
  padding: 0;
  cursor: default;
}
body {
  background: #222;
}
input {
  position: fixed;
  left: 0;
  right: 0;
  margin: auto;
  background: rgb(76, 142, 250);
  border: 0;
  border-radius: 2px;
  box-sizing: border-box;
  color: #fff;
  cursor: pointer;
  font-size: .875em;
  padding: 10px 24px;
}
#o1 {
  position: fixed;
  display: block;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100px;
  width: 100px;
  background: #333;
  margin: auto;
  border-radius: 50%;
}
#o2 {
  position: fixed;
  display: block;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100px;
  width: 100px;
  margin: auto;
  background: #0074d9;
  border-radius: 50%;
}
#o3 {
  position: fixed;
  display: block;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100px;
  width: 100px;
  margin: auto;
  background: #fff;
  border-radius: 50%;
}

<input type="file"></input>
<audio autoplay></audio>
<div id="o1"></div>
<div id="o2"></div>
<div id="o3"></div>