网络音频API音量指示器-不再有声音

Question

I try to make a kind of volume meter (as a pulsation effect) with the web audio api from a sound file loaded in an <audio> tag, my indicator effect works fine with this code, I can retrieve volume changes from the playing audio and I use the value to apply opacity effects to a <div> with jquery.

But I can't ear the sound when I load my script, audio is playing, volume is changing, but no sound. Maybe I missed a connector somewhere?

Any ideas?

    var audio = document.getElementById('sound');
    var context = new AudioContext();
    var analyser = context.createScriptProcessor(1024, 1, 1);
    var source = context.createMediaElementSource(audio);

    source.connect(analyser);
    analyser.connect(context.destination);

    opacify();

    function opacify(){
        analyser.onaudioprocess = function(e){
            var out = e.outputBuffer.getChannelData(0);
            var int = e.inputBuffer.getChannelData(0);
            var max = 0;
            for(var i = 0; i < int.length; i++){
                out[i] = 0;
                max = int[i] > max ? int[i] : max;
            }
            $('#artist').css({'opacity': max}); // updates opacity from value
        }
    }

Any help appreciated. Thanks...

Answer 1

You need to set the output buffer of your scriptNode to something if you want some output from it. By default, the output is empty.

(You can set it to out[i] = int[i] if you want same output).

 var audio = new Audio(); audio.crossOrigin = 'anonymous'; audio.src = 'https://dl.dropboxusercontent.com/s/8c9m92u1euqnkaz/GershwinWhiteman-RhapsodyInBluePart1.mp3'; audio.play(); var context = new AudioContext(); var analyser = context.createScriptProcessor(1024, 1, 1); var source = context.createMediaElementSource(audio); source.connect(analyser); analyser.connect(context.destination); opacify(); function opacify() { analyser.onaudioprocess = function(e) { var out = e.outputBuffer.getChannelData(0); var int = e.inputBuffer.getChannelData(0); var max = 0; for (var i = 0; i < int.length; i++) { out[i] = int[i]; // set the output as the input max = int[i] > max ? int[i] : max; } artist.style.opacity = max; } } 

 #artist { height: 50px; width: 50px; background-color: red; } 

 <div id="artist"></div> 

But this will make just unnecessary processing, eating useless memory, so you could even just connect directly the sourceNode to the destinationNode, if you want to ear unprocessed sound from the source.

 var audio = new Audio(); audio.crossOrigin = 'anonymous'; audio.src = 'https://dl.dropboxusercontent.com/s/8c9m92u1euqnkaz/GershwinWhiteman-RhapsodyInBluePart1.mp3'; audio.play(); var context = new AudioContext(); var analyser = context.createScriptProcessor(1024, 1, 1); var source = context.createMediaElementSource(audio); source.connect(analyser); source.connect(context.destination); // connect the source to the destination analyser.connect(context.destination); // chrome needs the analyser to be connected too... opacify(); function opacify() { analyser.onaudioprocess = function(e) { // no need to get the output buffer anymore var int = e.inputBuffer.getChannelData(0); var max = 0; for (var i = 0; i < int.length; i++) { max = int[i] > max ? int[i] : max; } artist.style.opacity = max; } } 

 #artist { height: 50px; width: 50px; background-color: red; } 

 <div id="artist"></div> 

Anyway, out[i] = 0 will do nothing good.