web-audio-api | 易学教程

Web Audio API append/concatenate different AudioBuffers and play them as one song

阅读更多关于 Web Audio API append/concatenate different AudioBuffers and play them as one song

I've been playing with the Web Audio API and I'm trying to load multiple parts of a song and append them to a new ArrayBuffer and then use that ArrayBuffer for playing all the parts as one song. In the following example I am using the same song data (which is a small loop) instead of different parts of a song. The problem is that it still plays just once instead of two times and I don't know why. Download song function init() { /** * Appends two ArrayBuffers into a new one. * * @param {ArrayBuffer} buffer1 The first buffer. * @param {ArrayBuffer} buffer2 The second buffer. */ function

Creating a 10-Band Equalizer Using Web Audio API

阅读更多关于 Creating a 10-Band Equalizer Using Web Audio API

I'm trying to wrap my head around using the Web Audio API to recreate something like Winamp's 10-band equalizer. (source: head-fi.org ) From what I can gather, I have to create 10 Biquad Filters , set their type to 2 (for a Bandpass filter) and set their frequency to [60, 170, 310, 600, 1000, 3000, 6000, 12000, 14000, 16000] respectively. Once I have done that (and here's where I'm getting a little confused) I would then create a separate Gain Node for each frequency "band" and bind its value to a slider. <input id="someFreqBand" type="range" min="-12" max="12" step="0.1" value="0" onchange=

onaudioprocess not called on ios11

阅读更多关于 onaudioprocess not called on ios11

I am trying to get audio capture from the microphone working on Safari on iOS11 after support was recently added However, the onaudioprocess callback is never called. Here's an example page: <html> <body> <button onclick="doIt()">DoIt</button> <ul id="logMessages"> </ul> <script> function debug(msg) { if (typeof msg !== 'undefined') { var logList = document.getElementById('logMessages'); var newLogItem = document.createElement('li'); if (typeof msg === 'function') { msg = Function.prototype.toString(msg); } else if (typeof msg !== 'string') { msg = JSON.stringify(msg); } var newLogText =

How to get microphone input volume value with web audio api?

阅读更多关于 How to get microphone input volume value with web audio api?

问题 I am using the microphone input with web audio api and need to get the volume value. Right now I have already got the microphone to work: http://updates.html5rocks.com/2012/09/Live-Web-Audio-Input-Enabled Also, i know there's a method manipulating the volume of audio file: http://www.html5rocks.com/en/tutorials/webaudio/intro/ // Create a gain node. var gainNode = context.createGain(); // Connect the source to the gain node. source.connect(gainNode); // Connect the gain node to the

Web Audio to visualize and interact with waveforms

阅读更多关于 Web Audio to visualize and interact with waveforms

问题 How do I write a JavaScript program to display a waveform from an audio file? I want to use Web Audio and Canvas. I tried this code: (new window.AudioContext).decodeAudioData(audioFile, function (data) { var channel = data.getChannelData(0); for (var i = 0; i < channel; i++) { canvas.getContext('2d').fillRect(i, 1, 40 - channel[i], 40); } }); But the result is far from what I want (namely, the image is not smooth since I'm drawing with rectangles). I want it to look smooth like this image:

What does the FFT data in the Web Audio API correspond to?

阅读更多关于 What does the FFT data in the Web Audio API correspond to?

问题 I've used the FFT data from the Analyser node using the getByteFrequencyData method in the Web Audio API to create a spectrum visualizer as shown below: In this instance I have 256 bins of data. What exactly do the numbers in this correspond to? Is it the decibel level of each frequency component. If so how do I know what the value of the frequency of each bin corresponds to? I would like to know so I can experiment in building a graphic eq and so would like to know at which points to

FF and Opera not open encoded files with “URL Blob”

阅读更多关于 FF and Opera not open encoded files with “URL Blob”

问题 I have encoded song with Blob. But in FF (38) and Opera it's not work. "Media resource blob: site.com/75f35d17-9aaf-4c7a-a52c-943d62ffd40f could not be decoded." In FF 37 it's work well. http://jsfiddle.net/mLq0uptw/1/ Help please, how i can play this Blob URL song in FF and Opera? window.requestAnimFrame = (function(){ return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || function( callback ){ window.setTimeout(callback, 1000 / 60); }

Web audio api, stop sound gracefully

阅读更多关于 Web audio api, stop sound gracefully

The web audio api furnish the method .stop() to stop a sound. I want my sound to decrease in volume before stopping. To do so I used a gain node. However I'm facing weird issues with this where some sounds just don't play and I can't figure out why. Here is a dumbed down version of what I do: https://jsfiddle.net/01p1t09n/1/ You'll hear that if you remove the line with setTimeout() that every sound plays. When setTimeout is there not every sound plays. What really confuses me is that I use push and shift accordingly to find the correct source of the sound, however it seems like it's another

Recording audio in Chrome for Android using web audio API and navigator.getUserMedia

阅读更多关于 Recording audio in Chrome for Android using web audio API and navigator.getUserMedia

问题 Chrome for Android versions 30 and 31 beta on Android 4.1 do not appear to correctly record audio using HTML5 web audio and navigator.webkitGetUserMedia. (Chrome 30+ on Android is supposed to support these APIs.) The symptom is that the code appears to work correctly, including displaying the prompt for whether or not to allow microphone access, but recorded data contains nothing but zeros. I created a simplified testcase (go to http://jsfiddle.net/JCFtK/, and click Record button, then choose

How to create very basic left/right equal power panning with createPanner();

阅读更多关于 How to create very basic left/right equal power panning with createPanner();

I am looking at the web audio API spec and the panning node uses three values to create a 3D spectrum for sound. I was wondering if in order to create a basic 2D "equal power" panner the programmer needs to do the formulaic programming to scale this ... or if I am over thinking it and there is a simpler way to do it. EDIT There is now a stereoPanner node being introduced. I can still get a panning effect by changing only the first argument to setPosition() and keeping other arguments zero. <!DOCTYPE html> <html> <head> <script> var c = new webkitAudioContext(); var s = c.createBufferSource();