爲什麼添加音頻分析儀時，聲音會停止播放？ Webaudio Api

Question

Im遵循此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; 
}); 

，但我想利用音頻分析儀數據搬東西......

所以我要修改聲音類，而不是將音頻的媒體元素源連接到音頻上下文中，現在它應該連接分析器。

但當我添加此代碼，聲音停止播放...

/* 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);