1 files changed, 109 insertions, 0 deletions
diff --git a/files/es/web/api/texttrack/cuechange_event/index.html b/files/es/web/api/texttrack/cuechange_event/index.html
new file mode 100644
index 0000000000..4a667535fc
--- /dev/null
+++ b/files/es/web/api/texttrack/cuechange_event/index.html
@@ -0,0 +1,109 @@
+---
+title: 'TextTrack: evento cuechange'
+slug: Web/API/TextTrack/cuechange_event
+tags:
+  - API
+  - Audio
+  - Event
+  - Media
+  - Reference
+  - TextTrack
+  - Video
+  - WebVTT
+  - cuechange
+  - events
+  - oncuechange
+  - track
+translation_of: Web/API/TextTrack/cuechange_event
+---
+<div>{{APIRef}}</div>
+
+<p><span class="seoSummary">El evento <strong><code>cuechange</code></strong> se activa cuando un {{domxref("TextTrack")}} ha cambiado las anotaciones que se estan mostrando.</span> El evento es activado tanto en <code>TextTrack</code> <em>y</em> en el {{domxref("HTMLTrackElement")}} donde esta siendo mostrado, si lo hay.</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Burbujas</th>
+   <td>No</td>
+  </tr>
+  <tr>
+   <th scope="row">Cancelable</th>
+   <td>No</td>
+  </tr>
+  <tr>
+   <th scope="row">Interfaz</th>
+   <td>{{domxref("Event")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">Propiedad del controlador de eventos</th>
+   <td>{{domxref("GlobalEventHandlers.oncuechange")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 id="En_el_TextTrack">En el TextTrack</h3>
+
+<p>Tu puedes preparar una escucha para el evento <code>cuechange</code> en un <code>TextTrack</code> usando el método {{domxref("EventTarget.addEventListener", "addEventListener()")}}:</p>
+
+<pre class="brush: js notranslate">track.addEventListener('cuechange', function () {
+  let cues = track.activeCues;  // array de las anotaciones actuales
+});
+</pre>
+
+<p>O puedes solo preparar la propiedad del controlador de eventos {{domxref("GlobalEventHandlers.oncuechange", "oncuechange")}}:</p>
+
+<pre class="brush: js notranslate">track.oncuechange = function () {
+  let cues = track.activeCues; // array of current cues
+}</pre>
+
+<h3 id="En_el_elemento_track">En el elemento track</h3>
+
+<p>El subyacente {{domxref("TextTrack")}}, indicado por la propiedad {{domxref("HTMLTrackElement.track", "track")}}, recive un evento  {{domxref("TextTrack.cuechange_event", "cuechange")}} cada vez que la anotación que esta siendo actualmente presentada cambia. Est sucede incluso si la pista de texto no está asociada cun un elemento multimedia.</p>
+
+<p>Si la pista de texto <em>está</em> asociada con el elemento multimedia, usando el elemento {{HTMLElement("track")}} como hijo del elemento {{HTMLElement("audio")}} o del elemento {{HTMLElement("video")}}, el evento <code>cuechange</code> es también enviado al {{domxref("HTMLTrackElement")}}.</p>
+
+<pre class="brush: js notranslate">let textTrackElem = document.getElementById("texttrack");
+
+textTrackElem.addEventListener("cuechange", (event) =&gt; {
+  let cues = event.target.track.activeCues;
+});
+</pre>
+
+<p>Además, puedes utilizar el controlador de eventos <code>oncuechange</code>:</p>
+
+<pre class="brush: js notranslate">let textTrackElem = document.getElementById("texttrack");
+
+textTrackElem.oncuechange = (event) =&gt; {
+  let cues = event.target.track.activeCues;
+});</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', '#event-media-cuechange', 'cuechange')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_de_los_navegadores">Compatibilidad de los navegadores</h2>
+
+<div class="hidden">La tabla de compatibilidad en esta página está generada desde datos estructurados. Si quieres contribuir a los datos, por favor visita <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> y envíanos una pull request.</div>
+
+<p>{{Compat("api.TextTrack.cuechange_event")}}</p>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>{{glossary("WebVTT")}}</li>
+</ul>