{"id":150,"date":"2024-01-09T11:43:09","date_gmt":"2024-01-09T10:43:09","guid":{"rendered":"https:\/\/so-xarxa.recursos.uoc.edu\/?page_id=150"},"modified":"2024-01-11T13:15:10","modified_gmt":"2024-01-11T12:15:10","slug":"1-3-3-ejemplos","status":"publish","type":"page","link":"https:\/\/so-xarxa.recursos.uoc.edu\/es\/1-3-3-ejemplos\/","title":{"rendered":"1.3.3. Ejemplos"},"content":{"rendered":"
<\/p>\n

Ahora vamos a ver un primer ejemplo muy simple en el que definiremos un oscilador y lo enviaremos a la salida para detener el sonido a los 2 segundos.<\/p>\n

var context = new (window.AudioContext || window.webkitAudioContext)();\r\n\r\n\/\/ creating oscillator node  \r\nvar oscillator = context.createOscillator();\r\n\r\n\/\/ configuration oscillator\r\noscillator.type = ' sawtooth';\r\noscillator.frequency.value = 440;\r\n\r\n\/\/ connecting to the destination\r\noscillator.connect(context.destination);\r\noscillator.start();\r\n\r\n\/\/ stop oscillator after 2 seconds  \r\nsetTimeout(() => {\r\n  oscillator.stop();\r\n}, 2000)\r\n}\r\n<\/pre>\n
Creamos un contexto de audio con:<\/p>\n
var context = new (window.AudioContext || window.webkitAudioContext)();<\/pre>\n
Definimos el contexto con el prefijo webkit<\/code> porque Safari lo requiere y de esta manera la haremos compatible con todos los navegadores.<\/p>\n
Despu\u00e9s hemos creado el nodo oscilador con el m\u00e9todo createOscillator()<\/code>.<\/p>\n
Se le ha asignado con la propiedad type<\/code> el tipo ' sawtooth'<\/code> que corresponde a una onda en forma de diente de sierra. Con frecuency.value<\/code> se le asigna una frecuencia de 440 Hz.<\/p>\n
Finalmente conectamos con el m\u00e9todo connect()<\/code> el oscilador con el destino final que habitualmente es la salida de audio del dispositivo donde se ejecuta. Despu\u00e9s con el m\u00e9todo start()<\/code> haremos que se reproduzca el sonido que detendremos con el m\u00e9todo stop()<\/code> 2 segundos despu\u00e9s.<\/p>\n
\n<\/div>\n
<\/p>\n
En el segundo ejemplo vamos a introducir un nodo de procesamiento entre el oscilador y la salida. El nodo gain<\/code> sirve para cambiar el volumen del audio.<\/p>\n
var context = new (window.AudioContext || window.webkitAudioContext)();\r\n\r\n\/\/ creating oscillator and gain nodes\r\nvar oscillator = context.createOscillator();\r\nvar gain = context.createGain();\r\n\r\n\/\/ connecting oscillator to gain\r\noscillator.connect(gain);\r\n\r\n\/\/ configuration oscillator  \r\noscillator.type = 'sawtooth';\r\noscillator.frequency.value = 440;\r\n\r\n\/\/ setting volume to 20%\r\ngain.gain.setValueAtTime(0.2, 0);  \r\n\r\n\/\/ connecting to the destination\r\ngain.connect(context.destination);\r\noscillator.start();  \r\n\r\nsetTimeout(() => {\r\n  oscillator.stop();\r\n}, 2000);\r\n}\r\n<\/pre>\n
Primero se crear\u00e1 el nodo de forma similar a la creaci\u00f3n del nodo del oscilador con createGain()<\/code>. Despu\u00e9s se conecta el oscilador al nodo gain<\/code> con connect()<\/code>.<\/p>\n
Con gain.gain.setValueAtTime(0.2, 0)<\/code>\u00a0 determinamos que el volumen resultante sea del 20% y que se ejecute inmediatamente.<\/p>\n
Finalmente, conectamos el nodo gain<\/code> con la salida.<\/p>\n
\n<\/div>\n
Tan solo han sido dos breves y sencillas pinceladas a la API Web Audio, las posibilidades de desarrollo son muchas y requerir\u00edan un cap\u00edtulo o libro para su estudio completo. Esta API ha sido fundamental para la creaci\u00f3n de experiencias auditivas inmersivas en la web, desde juegos en l\u00ednea y aplicaciones interactivas hasta secuenciadores de m\u00fasica y obras de arte sonoras.<\/p>\n
Su capacidad para manipular el audio en tiempo real y ofrecer un control preciso sobre cada aspecto del sonido ha permitido a los desarrolladores explorar nuevas fronteras en la integraci\u00f3n del audio en l\u00ednea.<\/p>\n
Encontrar\u00e9is informaci\u00f3n actualizada de la API Web Audio en: https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Web_Audio_API<\/a><\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":"
Tan solo han sido dos breves y sencillas pinceladas a la API Web Audio, las posibilidades de desarrollo son muchas y requerir\u00edan un cap\u00edtulo o libro para su estudio completo. Esta API ha sido fundamental para la creaci\u00f3n de experiencias auditivas inmersivas en la web, desde juegos en l\u00ednea y aplicaciones interactivas hasta secuenciadores de […]<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"acf":[],"_links":{"self":[{"href":"https:\/\/so-xarxa.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/pages\/150"}],"collection":[{"href":"https:\/\/so-xarxa.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/so-xarxa.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/so-xarxa.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/so-xarxa.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/comments?post=150"}],"version-history":[{"count":8,"href":"https:\/\/so-xarxa.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/pages\/150\/revisions"}],"predecessor-version":[{"id":395,"href":"https:\/\/so-xarxa.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/pages\/150\/revisions\/395"}],"wp:attachment":[{"href":"https:\/\/so-xarxa.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/media?parent=150"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}