diff options
Diffstat (limited to 'files/es/web/api/web_audio_api/index.html')
| -rw-r--r-- | files/es/web/api/web_audio_api/index.html | 511 |
1 files changed, 511 insertions, 0 deletions
diff --git a/files/es/web/api/web_audio_api/index.html b/files/es/web/api/web_audio_api/index.html new file mode 100644 index 0000000000..329f080a65 --- /dev/null +++ b/files/es/web/api/web_audio_api/index.html @@ -0,0 +1,511 @@ +--- +title: Web Audio API +slug: Web/API/Web_Audio_API +translation_of: Web/API/Web_Audio_API +original_slug: Web_Audio_API +--- +<div>{{apiref("Web Audio API")}}</div> + +<p class="summary">La API de Audio Web provee un sistema poderoso y versatil para controlar audio en la Web, permitiendo a los desarrolladores escoger fuentes de audio, agregar efectos al audio, crear visualizaciones de audios, aplicar efectos espaciales (como paneo) y mucho más.</p> + +<h2 id="Conceptos_y_uso_de_audio_Web">Conceptos y uso de audio Web</h2> + +<p>La API de Audio Web involucra manejar operaciones de audio dentro de un <strong>contexto de audio</strong>, y ha sido diseñada para permitir <strong>enrutamiento modular</strong>. Las operaciones de audio básicas son realizadas con <strong>nodos de audio</strong>, que están enlazados juntos para formar un <strong>gráfico de enrutamiento de audio</strong>. Muchas fuentes — con diferentes tipos de diseño de canales — están soportadas incluso dentro de un único contexto. Este diseño modular provee flexibilidad para crear funciones de audio complejas con efectos dinámicos.</p> + +<p>Los nodos de audio están enlazados en cadenas y redes simples por sus entradas y salidas. Éstos típicamente empiezan con una o más fuentes. Las fuentes provee matrices de intensidades de sonidos (muestras) en segmentos de tiempo muy pequeños, a menudo decenas de miles de éstos por segundo. Éstos podrían ser calculados matemáticamente (como {{domxref("OscillatorNode")}}), o pueden ser grabaciones de archivos de audio o video (como {{domxref("AudioBufferSourceNode")}} y {{domxref("MediaElementAudioSourceNode")}}) y transmisiones de audio ({{domxref("MediaStreamAudioSourceNode")}}). De hecho, los archivos de sonido son sólo grabaciones de intensidades de sonido, que vienen desde micrófonos o instrumentos eléctricos, y mezclados en una onda única y complicada.</p> + +<p>Los resultados de éstos nodos podrían ser enlazados a las entradas de otros, que mezclan o modifican estas transmisiones de muestras de audio en diferentes transmisiones. Una modificación común es multiplicar las muestras por un valor para hacerlas más fuertes o silenciosas (como es el caso con {{domxref("GainNode")}}). Una vez que el sonido ha sido lo suficientemente procesado por el efecto necesario, puede ser enlazados a la entrada de un destino({{domxref("AudioContext.destination")}}), que enviá el sonido a los altavoces o auriculares. Esta última conexión sólo es necesaria si el usuario debe escuchar el audio.</p> + +<p>Un diagrama de flujo simple y típico para el audio web se vería algo como esto:</p> + +<ol> + <li>Crear contexto de audio</li> + <li>Dentro del contexto, crear fuentes — como <code><audio></code>, oscillator, stream</li> + <li>Crear nodos de efectos, <span class="short_text" id="result_box" lang="es"><span>tales como reverberación, filtro biquad, panner, compresor</span></span></li> + <li>Ecoge el destino final del audio, por ejemplo tu sistema de altavoces</li> + <li>Conecta las fuentes a los efectos, y los efectos al destino.</li> +</ol> + +<p><img alt="A simple box diagram with an outer box labeled Audio context, and three inner boxes labeled Sources, Effects and Destination. The three inner boxes have arrow between them pointing from left to right, indicating the flow of audio information." src="https://mdn.mozillademos.org/files/12241/webaudioAPI_en.svg" style="display: block; height: 143px; margin: 0px auto; width: 643px;"></p> + +<p>El tiempo es controlado con alta precisión baja latencia, permitiendo a los desarrolladores escribir código que responda con precisión a los eventos y sea capaz de apuntar a muestras específicas, incluso en una alta frecuencia de muestreo. <span id="result_box" lang="es"><span>Por lo tanto, las aplicaciones como las cajas de ritmos y los secuenciadores están a su alcance.</span></span></p> + +<p>El API de Audio Web también nos permite controlar cómo el audio es <em>espacializado</em>. Usando un sistema basado en un <em>modelo fuente-oyente</em>, esto permite controlar el <em>modeo de paneo</em> y que se ocupa de la <em>atenuación inducida por distancia </em>o <em>desplazamiento doppler</em> i<span class="short_text" id="result_box" lang="es"><span>nducido por una fuente en movimiento (o un oyente en movimiento).</span></span></p> + +<div class="note"> +<p>Puedes leear sobre la teoría del API de Audio Web con más detalle en nuestro artículo <a href="/en-US/docs/Web/API/Web_Audio_API/Basic_concepts_behind_Web_Audio_API">Conceptos Básicos detrás del API de Audio Web</a>.</p> +</div> + +<h2 id="Interfaces_del_API_de_Audio_Web">Interfaces del API de Audio Web</h2> + +<p>La API de Audio Web tiene un número de interfaces y eventos asociados, que han sido divididos en nueve categorias de funcionalidad.</p> + +<h3 id="Definición_general_del_gráfico_de_audio">Definición general del gráfico de audio</h3> + +<p><span id="result_box" lang="es"><span>Contenedores y definiciones generales que dan forma a los gráficos de audio en el uso de Web Audio API</span></span>.</p> + +<dl> + <dt>{{domxref("AudioContext")}}</dt> + <dd>La interfaz <strong><code>AudioContext</code></strong> representa un gráfico de procesamiento de audio construido de módulos de audio enlazados juntos, cada uno representado por un {{domxref("AudioNode")}}. Un contexto de audio controla la creación de los nodos que contiene y la ejecución del procesamiento del audio, or decoding. Necesitas crear un <code>AudioContext</code> antes de hacer cualquier cosa, ya que todo pasa dentro de un contexto de audio.</dd> + <dt>{{domxref("AudioNode")}}</dt> + <dd>La interfaz <strong><code>AudioNode</code></strong><strong> </strong>representa un módulo de procesamiento de audio como una <em>fuente de audio</em> (por ejemplo un ejemplo HTML {{HTMLElement("audio")}} or {{HTMLElement("video")}}), <em>destino de audio</em>, <em>módulo de procesamiento intermedio</em> (por ejemplo un filtro como {{domxref("BiquadFilterNode")}}, o <em>control de volumen</em> como {{domxref("GainNode")}}).</dd> + <dt>{{domxref("AudioParam")}}</dt> + <dd>La interfaz <strong><code>AudioParam</code></strong><strong> </strong>representa un parámetro relacionado al audio, como uno de un {{domxref("AudioNode")}}. Esto puede ser establecido a un valor específico o un cambio de valor, y puede ser agendado para que ocurra en un momento específico y siguiendo un patrón específico.</dd> + <dt>{{domxref("AudioParamMap")}}</dt> + <dd>Provee una interfaz como para mapear a un grupo de interfaces {{domxref("AudioParam")}}, lo que significa que proporciona los métodos <code>forEach()</code>, <code>get()</code>, <code>has()</code>, <code>keys()</code>, y <code>values()</code>, como también una propiedad <code>size</code>.</dd> + <dt>{{domxref("BaseAudioContext")}}</dt> + <dd>La interfaz <strong><code>BaseAudioContext</code></strong> actúa como una definición base para procesamiento de gráficos de audio en y fuera de línea, como lo representa {{domxref("AudioContext")}} y {{domxref("OfflineAudioContext")}} resepectivamente. No tendrás que usar <code>BaseAudioContext</code> directamente — tendrás que usar sus características a través de una de éstas dos interfaces heredadas.</dd> + <dt>El evento {{event("ended")}}</dt> + <dd>El evento <code>ended</code> es lanzado cuando la reproducción se detiene porque se alcanzó el fin del archivo de medio.</dd> +</dl> + +<h3 id="Definiendo_fuentes_de_audio">Definiendo fuentes de audio</h3> + +<p>Las interfaces que definen fuentes de audio para usar en la API de Web.</p> + +<dl> + <dt>{{domxref("AudioScheduledSourceNode")}}</dt> + <dd>La interfaz <strong><code>AudioScheduledSourceNode</code></strong> es una interfaz padre para muchos tipos de interfaces de nodos de fuentes de audio. Es un {{domxref("AudioNode")}}.</dd> +</dl> + +<dl> + <dt>{{domxref("OscillatorNode")}}</dt> + <dd>La interfaz <strong><code style="font-size: 14px;">OscillatorNode</code></strong><strong> </strong>representa una forma de onda periódica, como una onda sinusoidal o triangular. Es un módulo de procesamiento de audio {{domxref("AudioNode")}} que causa que se cree una <em>frecuencia</em> de onda determinada.</dd> + <dt>{{domxref("AudioBuffer")}}</dt> + <dd>La interfaz <strong><code>AudioBuffer</code></strong> representa un recurso de audio corto que reside en la memoria, creado desde un archivo de audio usando el método {{ domxref("AudioContext.decodeAudioData()") }}, o creado con datos sin procesar usando {{ domxref("AudioContext.createBuffer()") }}. Una vez decodificado en esta forma, el audio puede ser colocado en un {{ domxref("AudioBufferSourceNode") }}.</dd> + <dt>{{domxref("AudioBufferSourceNode")}}</dt> + <dd>La interfaz <strong><code>AudioBufferSourceNode</code></strong> representa una fuente de audio que consiste en una datos de audio en la memoria, almacenada en un {{domxref("AudioBuffer")}}. Es un {{domxref("AudioNode")}} que actúa como una fuente de audio.</dd> + <dt>{{domxref("MediaElementAudioSourceNode")}}</dt> + <dd>La interfaz <code><strong>MediaElementAudio</strong></code><strong><code>SourceNode</code></strong> representa una fuente de audio que consiste en un elemento {{ htmlelement("audio") }} o {{ htmlelement("video") }} de HTML5. Es un {{domxref("AudioNode")}} que actúa como una fuente de audio.</dd> + <dt>{{domxref("MediaStreamAudioSourceNode")}}</dt> + <dd>La interfaz <code><strong>MediaStreamAudio</strong></code><strong><code>SourceNode</code></strong> representa una fuente de audio que consiste en un {{domxref("MediaStream")}} de <a href="/en-US/docs/WebRTC" title="/en-US/docs/WebRTC">WebRTC</a> (como una cámara web, micrófono, o una transmisión siendo enviada a una computadora remota). Es un {{domxref("AudioNode")}} que actúa como una fuente de audio.</dd> +</dl> + +<h3 id="Definiendo_filtros_de_efectos_de_audio">Definiendo filtros de efectos de audio</h3> + +<p>Interfaces para definir efectos que quieras aplicar a tus fuentes de audio.</p> + +<dl> + <dt>{{domxref("BiquadFilterNode")}}</dt> + <dd>La interfaz <strong><code>BiquadFilterNode</code></strong><strong> </strong>representa una filtro de bajo orden sencillo. Es un {{domxref("AudioNode")}} que puede representar diferentes tipos de filtros, dispositivos de control de tono, o ecualizadores gráficos. Un <code>BiquadFilterNode</code> siempre tiene exactamente una entrada y una salida.</dd> + <dt>{{domxref("ConvolverNode")}}</dt> + <dd>La interfaz <code><strong>Convolver</strong></code><strong><code>Node</code></strong><strong> </strong>es un <span style="line-height: 1.5;">{{domxref("AudioNode")}} que realiza una Convolución Lineal en un</span><span style="line-height: 1.5;"> {{domxref("AudioBuffer")}} determinado, y es usado a menudo para lograr un efecto de reverberación</span><span style="line-height: 1.5;">.</span></dd> + <dt>{{domxref("DelayNode")}}</dt> + <dd>La interfaz <strong><code>DelayNode</code></strong> representa una <a href="http://en.wikipedia.org/wiki/Digital_delay_line" title="http://en.wikipedia.org/wiki/Digital_delay_line">línea de detardo</a>; un módulo de procesamiento de audio de {{domxref("AudioNode")}} que causa un retardo entre la llegada de una entrada de datos y su propagación a la salida.</dd> + <dt>{{domxref("DynamicsCompressorNode")}}</dt> + <dd>La intefaz <strong><code>DynamicsCompressorNode</code></strong> proporciona un efecto de compresión, que reduce el volumen de las partes más ruidosas de la señal para ayudar a evitar el recorte y la distorsión que pueden ocurrir cuando se reproducen y multiplexan múltiples sonidos a la vez.</dd> + <dt>{{domxref("GainNode")}}</dt> + <dd>La intefaz <strong><code>GainNode</code></strong><strong> </strong>representa un cambio de volumen. Es un módulo de procesamiento de audio de {{domxref("AudioNode")}} que causa que una <em>ganancia</em> determinada para ser aplicada a la entrada de datos antes de su propacación a la salida.</dd> + <dt>{{domxref("WaveShaperNode")}}</dt> + <dd>La interfaz <strong><code>WaveShaperNode</code></strong><strong> </strong>representa un la interfaz representa un distorsionador no lineal. Es un {{domxref("AudioNode")}} que usa una curva para aplicar una distorsión en forma de onda a la señal. Además de los obvios efectos de distorsión, a menudo se usa para agregar una sensación cálida a la señal.</dd> + <dt>{{domxref("PeriodicWave")}}</dt> + <dd>Describe una forma de onda periódica que puede ser usada para dar forma a la salida de un {{ domxref("OscillatorNode") }}.</dd> + <dt>{{domxref("IIRFilterNode")}}</dt> + <dd>Implementa un filtro de <strong><a class="external external-icon" href="https://en.wikipedia.org/wiki/infinite%20impulse%20response" title="infinite impulse response">respuesta de pulso infinito</a></strong> (IIR) general; este tipo de filtro se puede usar para implementar dispositivos de control de tono y ecualizadores gráficos también.</dd> +</dl> + +<h3 id="Definición_de_destinos_de_audio">Definición de destinos de audio</h3> + +<p>Una vez que haya terminado de procesar su audio, estas interfaces definen dónde emitirlo.</p> + +<dl> + <dt>{{domxref("AudioDestinationNode")}}</dt> + <dd>La interfaz <strong><code>AudioDestinationNode</code></strong> representa el destino final de una fuente de audio en contexto determinado — usualmente los altavoces de tu dispositivo.</dd> + <dt>{{domxref("MediaStreamAudioDestinationNode")}}</dt> + <dd>La interfaz <code><strong>MediaStreamAudio</strong></code><strong><code>DestinationNode</code></strong> representa un destino de audio que consiste en un {{domxref("MediaStream")}} de <a href="/en-US/docs/WebRTC" title="/en-US/docs/WebRTC">WebRTC</a> con un <code>AudioMediaStreamTrack</code> sencillo, que puede ser usado de una manera similiar a un {{domxref("MediaStream")}} obtenido desde {{ domxref("MediaDevices.getUserMedia", "getUserMedia()") }}. Es un {{domxref("AudioNode")}} que actúa como un destino de audio.</dd> +</dl> + +<h3 id="Análisis_y_visualización_de_datos">Análisis y visualización de datos</h3> + +<p>Si quieres extraer el tiempo, frecuencia, y otros datos de tu audio, <code>AnalyserNode</code> es lo que necesitas.</p> + +<dl> + <dt>{{domxref("AnalyserNode")}}</dt> + <dd>La interfaz <strong><code>AnalyserNode</code></strong> representa un nodo capáz de proveer la frecuencia en tiempo real y la información del análisis del dominio de tiempo, para propósitos de análisis y visualización de datos.</dd> +</dl> + +<h3 id="División_y_fusión_de_canales_de_audio">División y fusión de canales de audio</h3> + +<p>Para dividir y fusionar canales de audio, deberás usar estas interfaces.</p> + +<dl> + <dt>{{domxref("ChannelSplitterNode")}}</dt> + <dd>La interfaz <code><strong>ChannelSplitterNode</strong></code> separa los diferentes canales de una fuente de audio enn un conjunto de salidas <em>mono</em>.</dd> + <dt>{{domxref("ChannelMergerNode")}}</dt> + <dd>La interfaz <code><strong>ChannelMergerNode</strong></code> reune las diferentes salidas mono en una sola salida. Cada entrada deberá ser usada para llenar un canal de la salida.</dd> +</dl> + +<h3 id="Espacialización_de_audio">Espacialización de audio</h3> + +<p>Estas interfaces te permiten agregar efectos de paneo de especialización de audio a tus fuentes de audio.</p> + +<dl> + <dt>{{domxref("AudioListener")}}</dt> + <dd>La interfaz <strong><code>AudioListener</code></strong><strong> </strong>representa la posición y orientación de la única persona escuchando la escena de audio usada en la espacialización de audio.</dd> + <dt>{{domxref("PannerNode")}}</dt> + <dd>La interfaz <code><strong>PannerNode</strong></code> representa la posición y comportamiento de una señal de fuente de audio en un espacio 3D, permitiéndote crear efectos de paneo complejos.</dd> + <dt>{{domxref("StereoPannerNode")}}</dt> + <dd>La interfaz <code><strong>StereoPannerNode</strong></code> representa un nodo de panner estéreo simple que se puede usar para panoramizar un flujo de audio hacia la izquierda o hacia la derecha.</dd> +</dl> + +<h3 id="Proccesamiento_de_audio_en_JavaScript">Proccesamiento de audio en JavaScript</h3> + +<p>Usando worklets de audio (pequeñas tareas), puedes definir nodos personalizados de audio escritos en JavaScript o <a href="/en-US/docs/WebAssembly">WebAssembly</a>. Los worklets de audios implementan la interfaz {{domxref("Worklet")}}, una versión ligera de la interfaz {{domxref("Worker")}}. A partir del enero de 2018, los worklets de audio están disponibles en Chrome 64 detrás de un identificador.</p> + +<dl> + <dt>{{domxref("AudioWorklet")}} {{experimental_inline}}</dt> + <dd>La interfaz <code>AudioWorklet</code> está disponible a través de {{domxref("BaseAudioContext.audioWorklet")}} y te permite agregar nuevos móduloss al worklet de audio.</dd> + <dt>{{domxref("AudioWorkletNode")}} {{experimental_inline}}</dt> + <dd>La intefaz <code>AudioWorkletNode</code> representa un {{domxref("AudioNode")}} que está insertada en un gráfico de audio y puede pasar mensajes a la <code>AudioWorkletProcessor</code>.</dd> + <dt>{{domxref("AudioWorkletProcessor")}} {{experimental_inline}}</dt> + <dd>La interfaz <code>AudioWorkletProcessor</code> representa código de procesamiento de audio que se ejecuta en un <code>AudioWorkletGlobalScope</code> que genera, procesa, o analiza audio directamente, y puede pasar mensajes al <code>AudioWorkletNode</code>.</dd> + <dt>{{domxref("AudioWorkletGlobalScope")}} {{experimental_inline}}</dt> + <dd>La interfaz <code>AudioWorkletGlobalScope</code> es un objeto derivado de <code>WorkletGlobalScope</code> que representa un contexto del worker en el que se ejecuta un script de procesamiento de audio; está diseñado para permitir la generación, procesamiento, y análisis de datos de audio directamente usando JavaScript en un hilo worklet.</dd> +</dl> + +<p>Antes de que se definieran los worklets de audio, la API de Web Audio usó <code>ScriptProcessorNode</code> {{deprecated_inline}} para procesamiento de audio basado en JavaScript. Como el código se ejecuta en el hilo principal, tuvo un mal rendimiento. <code>ScriptProcessorNode</code> se mantiene por razones históricas pero está marcada como obsoleta y será removida en una versión futura de la especificación.</p> + +<dl> + <dt>{{domxref("ScriptProcessorNode")}} {{deprecated_inline}}</dt> + <dd>La interfaz <strong><code>ScriptProcessorNode</code></strong><strong> </strong>permite la generación, procesamiento, o análisis de audio usando JavaScript. Es un módulo de procesamiento de audio {{domxref("AudioNode")}} que está enlazado a dos buffers, uno conteniendo la actual entrada, uno conteniendo la salida. Un evento, implementando la interfaz {{domxref("AudioProcessingEvent")}}, es enviado al objeto cada vez que el buffer de entrada contiene nuevos datos, y el manejador del evento termina cuando ha llenado el buffer de salida con datos.</dd> + <dt>{{event("audioprocess")}} (event) {{deprecated_inline}}</dt> + <dd>El evento <code>audioprocess</code> es lanzado cuando un buffer de entrada de un {{domxref("ScriptProcessorNode")}} del API del Audio Web está listo para ser procesado.</dd> + <dt>{{domxref("AudioProcessingEvent")}} {{deprecated_inline}}</dt> + <dd>El evento <code>AudioProcessingEvent</code> del <a href="/en-US/docs/Web_Audio_API" title="/en-US/docs/Web_Audio_API">API de Audio Web</a> representa los eventos que ocurren cuando un buffer de entrada {{domxref("ScriptProcessorNode")}} está listo para ser procesado.</dd> +</dl> + +<h3 id="Procesamiento_de_audio_offlineen_segundo_plano">Procesamiento de audio offline/en segundo plano</h3> + +<p>Es posible procesar/renderizar un gráfico de muy rápidamente en segundo plano — renderizándolo en un {{domxref("AudioBuffer")}} en lugar de hacerlo a los altavoces del equipo — con lo siguiente.</p> + +<dl> + <dt>{{domxref("OfflineAudioContext")}}</dt> + <dd>La interfaz <strong><code>OfflineAudioContext</code></strong> es una interfaz {{domxref("AudioContext")}} representando un gráfico de procesamiento de audio construido a partir de varios {{domxref("AudioNode")}} enlazados juntos. En contraste con un <code>AudioContext</code> estándar, un <code>OfflineAudioContext</code> realmente no procesa el audio sino que lo genera, <em>lo más rápido que puede</em>, en un buffer.</dd> + <dt>{{event("complete")}} (event)</dt> + <dd>El evento <code>complete</code> es lanzado cuando el renderizado de un {{domxref("OfflineAudioContext")}} está terminado.</dd> + <dt>{{domxref("OfflineAudioCompletionEvent")}}</dt> + <dd>La interfaz <code>OfflineAudioCompletionEvent</code> representa los eventos que ocurren cuando procesamiento de un {{domxref("OfflineAudioContext")}} is terminado. El evento {{event("complete")}} implementa esta interfaz.</dd> +</dl> + +<h2 id="Example" name="Example">Interfaces obsoletas</h2> + +<p>Las siguientes interfaces fueron definidas en versiones antiguas de la especificación del API de Audio Web, pero ahora están obsoletas y han sido reemplazadas por otras interfaces.</p> + +<dl> + <dt>{{domxref("JavaScriptNode")}}</dt> + <dd>Usada para dirigir procesamiento de audio a través de JavaScript. Esta interfaz está obsoleta, y ha sido reemplazada por {{domxref("ScriptProcessorNode")}}.</dd> + <dt>{{domxref("WaveTableNode")}}</dt> + <dd>Usada para definir una forma de onda periórica. Esta interfaz está obsoleta, y ha sido reemplazada por {{domxref("PeriodicWave")}}.</dd> +</dl> + +<h2 id="Example" name="Example">Ejemplo</h2> + +<p>Este ejemplo muestra una amplia variedad de funciones del API de Audio Web siendo usadas. Puedes ver este código en acción en la demostración de <a href="https://mdn.github.io/voice-change-o-matic/">Voice-change-o-matic</a> (también revisa el <a href="https://github.com/mdn/voice-change-o-matic">código completo en Github</a>) — este es un demo experimental de juguete cambiador de voz; manten tus parlantes en bajo volumen cuando lo uses ¡Al menos al comenzar!</p> + +<p>Las líneas del API de Audio Web están resaltadas; si quieres saber más sobre lo que hacen los diferentes métodos, etc., busca en las páginas de referencia.</p> + +<pre class="brush: js; highlight:[1,2,9,10,11,12,36,37,38,39,40,41,62,63,72,114,115,121,123,124,125,147,151]">var audioCtx = new (window.AudioContext || window.webkitAudioContext)(); // definir contexto de audio +// los navegadores Webkit/blink necesitan prefijo, Safari no funcionará sin window. + +var voiceSelect = document.getElementById("voice"); // caja de selección para la selección de opciones de efectos de voz +var visualSelect = document.getElementById("visual"); // caja<span id="result_box" lang="es"><span class="alt-edited"> de selección para la selección de opciones de visualización de audio</span></span> +var mute = document.querySelector('.mute'); // botón de silencio +var drawVisual; // requestAnimationFrame + +var analyser = audioCtx.createAnalyser(); +var distortion = audioCtx.createWaveShaper(); +var gainNode = audioCtx.createGain(); +var biquadFilter = audioCtx.createBiquadFilter(); + +function makeDistortionCurve(amount) { // función para hacer que la forma de curva para distorsión / nodo modificador de onda para usar + var k = typeof amount === 'number' ? amount : 50, + n_samples = 44100, + curve = new Float32Array(n_samples), + deg = Math.PI / 180, + i = 0, + x; + for ( ; i < n_samples; ++i ) { + x = i * 2 / n_samples - 1; + curve[i] = ( 3 + k ) * x * 20 * deg / ( Math.PI + k * Math.abs(x) ); + } + return curve; +}; + +navigator.getUserMedia ( + // restricciones - solo el audio es necesario para esta aplicación + { + audio: true + }, + + // Retrollamada de éxito + function(stream) { + source = audioCtx.createMediaStreamSource(stream); + source.connect(analyser); + analyser.connect(distortion); + distortion.connect(biquadFilter); + biquadFilter.connect(gainNode); + gainNode.connect(audioCtx.destination); // conectando los diferentes nodos de grafo de audio juntos + + visualize(stream); + voiceChange(); + + }, + + // Retrollamada de error + function(err) { + console.log('Se produjo el siguiente error gUM: ' + err); + } +); + +function visualize(stream) { + WIDTH = canvas.width; + HEIGHT = canvas.height; + + var visualSetting = visualSelect.value; + console.log(visualSetting); + + if(visualSetting == "sinewave") { + analyser.fftSize = 2048; + var bufferLength = analyser.frequencyBinCount; // la mitad del valor de FFT + var dataArray = new Uint8Array(bufferLength); // crear una matriz para almacenar los datos + + canvasCtx.clearRect(0, 0, WIDTH, HEIGHT); + + function draw() { + + drawVisual = requestAnimationFrame(draw); + + analyser.getByteTimeDomainData(dataArray); // obtener datos de forma de onda y ponerlo en la matriz creada arriba + + canvasCtx.fillStyle = 'rgb(200, 200, 200)'; // dibujar onda con canvas + canvasCtx.fillRect(0, 0, WIDTH, HEIGHT); + + canvasCtx.lineWidth = 2; + canvasCtx.strokeStyle = 'rgb(0, 0, 0)'; + + canvasCtx.beginPath(); + + var sliceWidth = WIDTH * 1.0 / bufferLength; + var x = 0; + + for(var i = 0; i < bufferLength; i++) { + + var v = dataArray[i] / 128.0; + var y = v * HEIGHT/2; + + if(i === 0) { + canvasCtx.moveTo(x, y); + } else { + canvasCtx.lineTo(x, y); + } + + x += sliceWidth; + } + + canvasCtx.lineTo(canvas.width, canvas.height/2); + canvasCtx.stroke(); + }; + + draw(); + + } else if(visualSetting == "off") { + canvasCtx.clearRect(0, 0, WIDTH, HEIGHT); + canvasCtx.fillStyle = "red"; + canvasCtx.fillRect(0, 0, WIDTH, HEIGHT); + } + +} + +function voiceChange() { + distortion.curve = new Float32Array; + biquadFilter.gain.value = 0; // restablecer los efectos cada vez que se ejecuta la función VoiceChange + + var voiceSetting = voiceSelect.value; + console.log(voiceSetting); + + if(voiceSetting == "distortion") { + distortion.curve = makeDistortionCurve(400); // aplicar distorsión al sonido usando el nodo waveshaper + } else if(voiceSetting == "biquad") { + biquadFilter.type = "lowshelf"; + biquadFilter.frequency.value = 1000; + biquadFilter.gain.value = 25; // aplicar el filtro lowshelf a los sonidos usando biquad + } else if(voiceSetting == "off") { + console.log("Voice settings turned off"); // no hacer nada, ya que se eligió la opción de apagado + } + +} + +// oyentes de eventos para cambiar la visualización y la configuración de voz + +visualSelect.onchange = function() { + window.cancelAnimationFrame(drawVisual); + visualize(stream); +} + +voiceSelect.onchange = function() { + voiceChange(); +} + +mute.onclick = voiceMute; + +function voiceMute() { // alternar para silenciar y activar el sonido + if(mute.id == "") { + gainNode.gain.value = 0; // ganancia establecida en 0 para silenciar el sonido + mute.id = "activated"; + mute.innerHTML = "Unmute"; + } else { + gainNode.gain.value = 1; // ganancia establecida en 1 para activar el sonido + mute.id = ""; + mute.innerHTML = "Mute"; + } +} +</pre> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentario</th> + </tr> + <tr> + <td>{{SpecName('Web Audio API')}}</td> + <td>{{Spec2('Web Audio API')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_en_navegadores">Compatibilidad en navegadores</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Soporte Básico</td> + <td>14 {{property_prefix("webkit")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>23</td> + <td>{{CompatNo}}</td> + <td>15 {{property_prefix("webkit")}}<br> + 22 (unprefixed)</td> + <td>6 {{property_prefix("webkit")}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>Firefox OS</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Soporte Básico</td> + <td>{{CompatNo}}</td> + <td>28 {{property_prefix("webkit")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>25</td> + <td>1.2</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>6 {{property_prefix("webkit")}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="También_ver">También ver</h2> + +<ul> + <li><a href="/en-US/docs/Web/API/Web_Audio_API/Using_Web_Audio_API">Usando el API de Audio Web</a></li> + <li><a href="/en-US/docs/Web/API/Web_Audio_API/Visualizations_with_Web_Audio_API">Visualizaciones con el API de Audio Web</a></li> + <li><a href="http://mdn.github.io/voice-change-o-matic/">Voice-change-O-matic example</a></li> + <li><a href="http://mdn.github.io/violent-theremin/">Violent Theremin example</a></li> + <li><a href="/en-US/docs/Web/API/Web_Audio_API/Web_audio_spatialization_basics">Bases de la espacialización de audio Web</a></li> + <li><a href="http://www.html5rocks.com/tutorials/webaudio/positional_audio/" title="http://www.html5rocks.com/tutorials/webaudio/positional_audio/">Mixing Positional Audio and WebGL</a></li> + <li><a href="http://www.html5rocks.com/tutorials/webaudio/games/" title="http://www.html5rocks.com/tutorials/webaudio/games/">Developing Game Audio with the Web Audio API</a></li> + <li><a href="/en-US/docs/Web/API/Web_Audio_API/Porting_webkitAudioContext_code_to_standards_based_AudioContext" title="/en-US/docs/Web_Audio_API/Porting_webkitAudioContext_code_to_standards_based_AudioContext">Porting webkitAudioContext code to standards based AudioContext</a></li> + <li><a href="https://github.com/bit101/tones">Tonos</a>: Una sencilla librería para reproducción de tonos/notas específicas usando el API de Audio Web.</li> + <li><a href="https://github.com/goldfire/howler.js/">howler.js</a>: a JS audio library that defaults to <a href="https://dvcs.w3.org/hg/audio/raw-file/tip/webaudio/specification.html">Web Audio API</a> and falls back to <a href="http://www.whatwg.org/specs/web-apps/current-work/#the-audio-element">HTML5 Audio</a>, as well as providing other useful features.</li> + <li><a href="https://github.com/mattlima/mooog">Mooog</a>: jQuery-style chaining of AudioNodes, mixer-style sends/returns, and more.</li> + <li><a class="external external-icon" href="https://github.com/chrisjohndigital/OpenLang">OpenLang</a>: HTML5 video language lab web application using the Web Audio API to record and combine video and audio from different sources into a single file (<a class="external external-icon" href="https://github.com/chrisjohndigital/OpenLang">source on GitHub</a>)</li> +</ul> + +<h3 id="Enlaces_rápidos">Enlaces rápidos</h3> + +<ol> + <li><strong>Guíass</strong> + + <ol> + <li><a href="/en-US/docs/Web/API/Web_Audio_API/Basic_concepts_behind_Web_Audio_API">Conceptos básicos detrás del API de Audio Web</a></li> + <li><a href="/en-US/docs/Web/API/Web_Audio_API/Using_Web_Audio_API">Usando el API de Audio Web</a></li> + <li><a href="/en-US/docs/Web/API/Web_Audio_API/Visualizations_with_Web_Audio_API">Visualizaciones con el API de Audio Web</a></li> + <li><a href="/en-US/docs/Web/API/Web_Audio_API/Web_audio_spatialization_basics">Bases de la espacialización de audio Web</a></li> + <li><a href="/en-US/docs/Web/API/Web_Audio_API/Porting_webkitAudioContext_code_to_standards_based_AudioContext" title="/en-US/docs/Web_Audio_API/Porting_webkitAudioContext_code_to_standards_based_AudioContext">Portando código de webkitAudioContext a estándares basados en AudioContext</a></li> + </ol> + </li> + <li><strong>Ejemplos</strong> + <ol> + <li><a href="/en-US/docs/Web/API/Web_Audio_API/Simple_synth">Teclado sintetizador sencillo</a></li> + <li><a href="http://mdn.github.io/voice-change-o-matic/">Voice-change-O-matic</a></li> + <li><a href="http://mdn.github.io/violent-theremin/">Violent Theremin</a></li> + </ol> + </li> + <li><strong>Interfaces</strong> + <ol> + <li>{{domxref("AnalyserNode")}}</li> + <li>{{domxref("AudioBuffer")}}</li> + <li>{{domxref("AudioScheduledSourceNode")}}</li> + <li>{{domxref("AudioBufferSourceNode")}}</li> + <li>{{domxref("AudioContext")}}</li> + <li>{{domxref("AudioDestinationNode")}}</li> + <li>{{domxref("AudioListener")}}</li> + <li>{{domxref("AudioNode")}}</li> + <li>{{domxref("AudioParam")}}</li> + <li>{{event("audioprocess")}} (event)</li> + <li>{{domxref("AudioProcessingEvent")}}</li> + <li>{{domxref("BiquadFilterNode")}}</li> + <li>{{domxref("ChannelMergerNode")}}</li> + <li>{{domxref("ChannelSplitterNode")}}</li> + <li>{{event("complete")}} (event)</li> + <li>{{domxref("ConvolverNode")}}</li> + <li>{{domxref("DelayNode")}}</li> + <li>{{domxref("DynamicsCompressorNode")}}</li> + <li>{{event("ended_(Web_Audio)", "ended")}} (event)</li> + <li>{{domxref("GainNode")}}</li> + <li>{{domxref("MediaElementAudioSourceNode")}}</li> + <li>{{domxref("MediaStreamAudioDestinationNode")}}</li> + <li>{{domxref("MediaStreamAudioSourceNode")}}</li> + <li>{{domxref("OfflineAudioCompletionEvent")}}</li> + <li>{{domxref("OfflineAudioContext")}}</li> + <li>{{domxref("OscillatorNode")}}</li> + <li>{{domxref("PannerNode")}}</li> + <li>{{domxref("PeriodicWave")}}</li> + <li>{{domxref("ScriptProcessorNode")}}</li> + <li>{{domxref("WaveShaperNode")}}</li> + </ol> + </li> +</ol> |