为什么添加音频分析器后声音停止播放？网络音频 Api

Question

我正在关注这个 tut 关于使用声音数据移动东西的内容。

到现在它可以正常工作，播放声音，这是代码：

/* Hoist some variables. */
var audio,
    context = new (window.AudioContext ||
                   window.webAudioContext ||
                   window.webkitAudioContext)(),
    /* Create a script processor node with a `bufferSize` of 1024. */
    processor = context.createScriptProcessor(1024),
    /* Create an analyser node */
    analyser = context.createAnalyser();

/* Wire the processor into our audio context. */
processor.connect(context.destination);
/* Wire the analyser into the processor */
analyser.connect(processor);

/* Define a Uint8Array to receive the analysers data. */
var data = new Uint8Array(analyser.frequencyBinCount);

/* Try instantiating a new AudioContext, throw an error if it fails. */
try {
    /* Setup an AudioContext. */
    context = new AudioContext();
} catch(e) {
    throw new Error('The Web Audio API is unavailable');
}

/* Define a `Sound` Class */
var Sound = {
    /* Give the sound an element property initially undefined. */
    element: undefined,
    /* Define a class method of play which instantiates a new Media Element
     * Source each time the file plays, once the file has completed disconnect 
     * and destroy the media element source. */
    play: function() { 
        var sound = context.createMediaElementSource(this.element);
        this.element.onended = function() {
            sound.disconnect();
            sound = null;
        }
        sound.connect(context.destination);

        /* Call `play` on the MediaElement. */
        this.element.play();
    }
};

/* Create an async function which returns a promise of a playable audio element. */
function loadAudioElement(url) {
    return new Promise(function(resolve, reject) {
        var audio = new Audio();
        audio.addEventListener('canplay', function() {
            /* Resolve the promise, passing through the element. */
            resolve(audio);
        });
        /* Reject the promise on an error. */
        audio.addEventListener('error', reject);
        audio.src = url;
    });
}

/* Let's load our file. */
loadAudioElement('/audio/shorter.mp3').then(function(elem) {
    /* Instantiate the Sound class into our hoisted variable. */
    audio = Object.create(Sound);
    /* Set the element of `audio` to our MediaElement. */
    audio.element = elem;
    /* Immediately play the file. */
    audio.play();
}, function(elem) {
    /* Let's throw an the error from the MediaElement if it fails. */
    throw elem.error;
});

但我想使用音频分析器数据来移动东西...

所以我必须修改声音 class，而不是将音频的媒体元素源仅连接到音频上下文，它现在也应该通过分析器连接。

但是当我添加这段代码时，声音停止播放...

 /* Removed for brevity... */
    play: function() { 
        var sound = context.createMediaElementSource(this.element);
        this.element.onended = function() {
            sound.disconnect();
            sound = null;
            /* Noop the audioprocess handler when the file finishes. */
            processor.onaudioprocess = function() {};
        }
        /* Add the following line to wire into the analyser. */
        sound.connect(analyser);
        sound.connect(context.destination);

        processor.onaudioprocess = function() {
            /* Populate the data array with the frequency data. */
            analyser.getByteTimeDomainData(data);
        };
        /* Call `play` on the MediaElement. */
        this.element.play();
    }

这是停止工作的完整代码：

/* Hoist some variables. */
var audio,
    context = new (window.AudioContext ||
                   window.webAudioContext ||
                   window.webkitAudioContext)(),
    /* Create a script processor node with a `bufferSize` of 1024. */
    processor = context.createScriptProcessor(1024),
    /* Create an analyser node */
    analyser = context.createAnalyser();

/* Wire the processor into our audio context. */
processor.connect(context.destination);
/* Wire the analyser into the processor */
analyser.connect(processor);

/* Define a Uint8Array to receive the analysers data. */
var data = new Uint8Array(analyser.frequencyBinCount);

/* Try instantiating a new AudioContext, throw an error if it fails. */
try {
    /* Setup an AudioContext. */
    context = new AudioContext();
} catch(e) {
    throw new Error('The Web Audio API is unavailable');
}

/* Define a `Sound` Class */
var Sound = {
    /* Give the sound an element property initially undefined. */
    element: undefined,
    /* Define a class method of play which instantiates a new Media Element
     * Source each time the file plays, once the file has completed disconnect 
     * and destroy the media element source. */
    /* Removed for brevity... */
play: function() { 
    var sound = context.createMediaElementSource(this.element);
    this.element.onended = function() {
        sound.disconnect();
        sound = null;
        /* Noop the audioprocess handler when the file finishes. */
        processor.onaudioprocess = function() {};
    }
    /* Add the following line to wire into the analyser. */
    sound.connect(analyser);
    sound.connect(context.destination);

    processor.onaudioprocess = function() {
        /* Populate the data array with the frequency data. */
        analyser.getByteTimeDomainData(data);
    };
    /* Call `play` on the MediaElement. */
    this.element.play();
}

};

/* Create an async function which returns a promise of a playable audio element. */
function loadAudioElement(url) {
    return new Promise(function(resolve, reject) {
        var audio = new Audio();
        audio.addEventListener('canplay', function() {
            /* Resolve the promise, passing through the element. */
            resolve(audio);
        });
        /* Reject the promise on an error. */
        audio.addEventListener('error', reject);
        audio.src = url;
    });
}

/* Let's load our file. */
loadAudioElement('/audio/shorter.mp3').then(function(elem) {
    /* Instantiate the Sound class into our hoisted variable. */
    audio = Object.create(Sound);
    /* Set the element of `audio` to our MediaElement. */
    audio.element = elem;
    /* Immediately play the file. */
    audio.play();
}, function(elem) {
    /* Let's throw an the error from the MediaElement if it fails. */
    throw elem.error;
});

有什么想法吗？

Answer 1

您应该将分析器连接到目的地以使其正常工作。

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