Detect Sound Javascript

问题:

Is there any way to detect whether a certain page is making noise using jscript? Some sort of environmental variable or something that tracks the status of the speakers? I'm attempting to write a script that puts an icon on the Tab Title if that Tab is making sound.

回答1:

No, this isn't possible.

Lots of plugins can make sound, and they all do it in their own way. There is no catch-all here.

Perhaps on Vista/7 where applications sound usage is actually kept track of, and when using a browser like Chrome that makes a separate process for each page, you might have more luck. It would involve figuring out which processes are playing sound, then figuring out what page each process had loaded. Through JavaScript though? No way.

回答2:

Scraped from Quora

The majority of sound on the web is done through Flash. Flash doesn't inform the browser when it is making sound. That is to say, if two different tabs are running Flash, the browser can't know which is the one making sound.

The introduction of the HTML5 media tags could help in this area, but I suspect an audio indicator that only worked some of the time (for non-Flash pages) would be more frustrating than no audio indicator.

(Pay no attention to the comment below (in the linked Quora question) saying Chrome displays a 'play' icon when sound is played. That's Soundcloud changing the title of its own page, not Google Chrome)

回答3:

I don't think you can detect whether or not the speakers are making noise in JavaScript, however you may not have to.

Perhaps you could keep track of this yourself, implicitly. So for example, if there is a play button, on click you could start playing the audio and show the icon. Once the user clicks the stop button, you stop the audio and hide the icon.

回答4:

This can help you, fbc_array is de array noise use fbc_array[value] for get this noise. example:

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>