Получите уровни звука из потока аудио микрофона HTML5

В предыдущем вопросе о переполнении стека я нашел этот код:

<script>
// this is to store a reference to the input so we can kill it later 
var liveSource;
// creates an audiocontext and hooks up the audio input
function connectAudioInToSpeakers(){
  var context = new webkitAudioContext();  
  navigator.webkitGetUserMedia({audio: true}, function(stream) {
    console.log("Connected live audio input");
    liveSource = context.createMediaStreamSource(stream);
    liveSource.connect(context.destination);
    console.log(liveSource);
  });
 }
// disconnects the audio input
function makeItStop(){
   console.log("killing audio!");
   liveSource.disconnect();
 }
// run this when the page loads
connectAudioInToSpeakers();
</script>

который берет звук с микрофона пользователя и воспроизводит его через динамики. Что мне нужно, так это уровень (амплитуда) входного сигнала (например, чтобы я мог отображать красное предупреждение, если происходит отсечение, или чтобы сообщить пользователю, что ему нужно говорить). Как в приведенном выше коде получить необработанные данные?

Например, как я могу записать фактические числа в консоль? Я предполагаю, что все это хранится в liveSoure?

Мне не нужны никакие умные анимации холста и т. д., просто число, которое говорит мне, насколько громким является ввод. Это относительно просто? И если да, то как это делается?

Спасибо


web-audio-api webkitaudiocontext
person Lars    schedule 08.04.2013    source источник

Ответы (1)


arrow_upward
6
arrow_downward

Вот как я это сделал — вы можете увидеть это вживую на http://labs.dinahmoe.com/dynamicmusicengine/ Просто подключите liveSource к этому JavaScriptNode (есть также context.createScriptProcessor(4096, 1, 1) с новым синтаксисом, хотя оба будут поддерживаться в соответствии с http://www.w3.org/2011/audio/wiki/F2F_Mar_2013)

var levelChecker = context.createJavaScriptNode(4096, 1 ,1);
liveSource.connect(levelChecker);
levelChecker.connect(context.destination);

levelChecker.onaudioprocess = function(e) {
        var buffer = e.inputBuffer.getChannelData(0);

        // Iterate through buffer to check if any of the values exceeds 1.
        for (var i = 0; i < buffer.length; i++) {
            if (1 =< buffer[i]) {
                console.log("Oh noes! We got a peak.", buffer[i]);
            }
        }
person Oskar Eriksson    schedule 09.04.2013
comment
Просто собираюсь добавить на самом деле, кажется, что он работает только в течение нескольких секунд, а затем перестает работать. Ты знаешь почему? Я поместил это в отдельный вопрос здесь: stackoverflow. com/questions/15900103/ Спасибо. - person Lars; 09.04.2013
comment
Как бы то ни было, этот метод очень неэффективен. Однако это необходимо, если вы хотите получить истинные пики в заданном фрагменте семплов. Более быстрый метод заключается в использовании данных во временной области с узла анализатора, но вы можете пропустить некоторые пики. Это может не иметь значения, если вы просто делаете визуализацию. - person Brad; 19.01.2014