<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Teclado 4 &#8211; AMP en Línea</title>
	<atom:link href="https://www.ampenlinea.com/lesson-category/teclado-4/feed/" rel="self" type="application/rss+xml" />
	<link>https://www.ampenlinea.com</link>
	<description></description>
	<lastBuildDate>Tue, 19 Aug 2025 15:22:48 +0000</lastBuildDate>
	<language>es</language>
	<sy:updatePeriod>
	hourly	</sy:updatePeriod>
	<sy:updateFrequency>
	1	</sy:updateFrequency>
	

<image>
	<url>https://www.ampenlinea.com/wp-content/uploads/2020/07/cropped-LOGOamp-solo_enlinea-M5-32x32.png</url>
	<title>Teclado 4 &#8211; AMP en Línea</title>
	<link>https://www.ampenlinea.com</link>
	<width>32</width>
	<height>32</height>
</image> 
	<item>
		<title>AMA Teclado N4 – SE – EXAMEN PRACTICO</title>
		<link>https://www.ampenlinea.com/courses/ama-teclado-n4/lessons/ama-teclado-n4-se-examen-practico/</link>
		
		<dc:creator><![CDATA[Henry Giron]]></dc:creator>
		<pubDate>Fri, 21 Feb 2025 14:17:14 +0000</pubDate>
				<category><![CDATA[AMA Teclado N4]]></category>
		<guid isPermaLink="false">https://www.ampenlinea.com/?post_type=sfwd-lessons&#038;p=57425</guid>

					<description><![CDATA[Modal con Metrónomo Metrónomo &#215; Videos en Pop-Up TPA AMP Teclado 4-1-6 / Mi dulce chica AMP Teclado 4-1-10 / Canción #1 &#8211; E Maj7 AMP Teclado 4-1-11 / Imagine AMP Teclado 4-2-7 / Extracto: Angel AMP Teclado 4-2-7 / Extracto: Something AMP Teclado 4-2-7 / Extracto: What’s going on AMP Teclado 4-2-10 / Canción &#8230;<p class="read-more"> <a class="" href="https://www.ampenlinea.com/courses/ama-teclado-n4/lessons/ama-teclado-n4-se-examen-practico/"> <span class="screen-reader-text">AMA Teclado N4 – SE – EXAMEN PRACTICO</span> Leer más &#187;</a></p>]]></description>
										<content:encoded><![CDATA[		<div data-elementor-type="wp-post" data-elementor-id="57425" class="elementor elementor-57425" data-elementor-post-type="sfwd-lessons">
				<div class="elementor-element elementor-element-056dd26 e-flex e-con-boxed e-con e-parent" data-id="056dd26" data-element_type="container">
					<div class="e-con-inner">
		<div class="elementor-element elementor-element-7c1c3be e-con-full e-grid e-con e-child" data-id="7c1c3be" data-element_type="container">
				<div class="elementor-element elementor-element-bbafc58 elementor-widget elementor-widget-global elementor-global-49842 elementor-widget-html" data-id="bbafc58" data-element_type="widget" data-widget_type="html.default">
				<div class="elementor-widget-container">
			<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>Modal con Metrónomo</title>
  <style>
    /* Botón para abrir el modal */
    #openMetronomeBtn {
      padding: 10px 20px;
      font-size: 16px;
      cursor: pointer;
      background-color: #28a745;
      color: white;
      border: none;
      border-radius: 5px;
    }

    /* Estilos para el modal */
    .modal {
      display: none; /* Oculto por defecto */
      position: fixed;
      z-index: 1000;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.5); /* Fondo semi-transparente */
      justify-content: center;
      align-items: center;
    }

    /* Contenido del modal */
    .modal-content {
      background-color: #fff;
      margin: auto;
      padding: 20px;
      border: 1px solid #888;
      width: 400px;
      border-radius: 8px;
      position: relative;
    }

    /* Botón de cierre */
    .close {
      color: #aaa;
      position: absolute;
      top: 10px;
      right: 15px;
      font-size: 28px;
      font-weight: bold;
      cursor: pointer;
    }

    .close:hover,
    .close:focus {
      color: black;
    }
  </style>
</head>
<body>

  <!-- Botón para abrir el modal -->
  <button id="openMetronomeBtn">Metrónomo</button>

  <!-- Modal -->
  <div id="metronomeModal" class="modal">
    <div class="modal-content">
      <!-- Botón de cierre -->
      <span class="close">&times;</span>

      <!-- Iframe del metrónomo -->
      <iframe 
        src="https://guitarapp.com/metronome.html?embed=true&tempo=120&timeSignature=2&pattern=1&theme=light" 
        title="Online Metronome" 
        scrolling="no"
        style="width: 100%; height: 475px; border: none; border-radius: 4px;">
      </iframe>
    </div>
  </div>

  <script>
    // Obtener elementos
    const modal = document.getElementById("metronomeModal");
    const btn = document.getElementById("openMetronomeBtn");
    const closeBtn = document.querySelector(".close");

    // Mostrar el modal al hacer clic en el botón
    btn.addEventListener("click", () => {
      modal.style.display = "flex"; // Usar flex para centrar el contenido
    });

    // Cerrar el modal al hacer clic en el botón de cerrar (X)
    closeBtn.addEventListener("click", () => {
      modal.style.display = "none";
    });

    // Cerrar el modal al hacer clic fuera del contenido
    window.addEventListener("click", (event) => {
      if (event.target === modal) {
        modal.style.display = "none";
      }
    });
  </script>

</body>
</html>
		</div>
				</div>
				<div class="elementor-element elementor-element-5aafc93 elementor-widget elementor-widget-html" data-id="5aafc93" data-element_type="widget" data-widget_type="html.default">
				<div class="elementor-widget-container">
			<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>Videos en Pop-Up</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      padding: 20px;
    }

    /* Lista desplegable */
    select {
      padding: 10px;
      font-size: 16px;
      border: 1px solid #ccc;
      border-radius: 5px;
      margin-bottom: 20px;
      width: 100%; /* Se ajusta al ancho del contenedor */
      max-width: 400px; /* Ancho máximo */
    }

    /* Modal */
    .modal {
      display: none; /* Oculto por defecto */
      position: fixed;
      z-index: 1000;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.6); /* Fondo semi-transparente */
      justify-content: center;
      align-items: center;
    }

    /* Contenido del modal */
    .modal-content {
      background-color: white;
      border-radius: 8px;
      padding: 20px;
      width: 80%;
      max-width: 800px;
      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
      position: relative;
    }

    iframe {
      width: 100%;
      height: 450px;
      border: none;
      border-radius: 5px;
    }

    /* Botón de cierre */
    .close {
      position: absolute;
      top: 10px;
      right: 15px;
      font-size: 30px;
      font-weight: bold;
      color: #aaa;
      cursor: pointer;
      transition: color 0.3s;
    }

    .close:hover {
      color: black;
    }
  </style>
</head>
<body>


  <!-- Lista desplegable -->
 <select id="videoSelect">
    <option value="" selected disabled>TPA</option>
    <option value="https://player.vimeo.com/video/1020233888?h=2a574b7b6e">
      AMP Teclado 4-1-6 / Mi dulce chica
    </option>
    <option value="https://player.vimeo.com/video/1020233952?h=18c2f4c989">
      AMP Teclado 4-1-10 / Canción #1 - E Maj7
    </option>
    <option value="https://player.vimeo.com/video/1020234021?h=9768a23758">
      AMP Teclado 4-1-11 / Imagine
    </option>
    <option value="https://player.vimeo.com/video/1020234083?h=01bffbed09">
      AMP Teclado 4-2-7 / Extracto: Angel
    </option>
    <option value="https://player.vimeo.com/video/1020234111?h=734bd2b770">
      AMP Teclado 4-2-7 / Extracto: Something
    </option>
    <option value="https://player.vimeo.com/video/1020234159?h=f5cf8fb6c2">
      AMP Teclado 4-2-7 / Extracto: What’s going on
    </option>
    <option value="https://player.vimeo.com/video/1020234212?h=bcaedb9db0">
      AMP Teclado 4-2-10 / Canción #2 - A Maj7
    </option>
    <option value="https://player.vimeo.com/video/1020234332?h=022ec33ac9">
      AMP Teclado 4-3-9-1 / Extracto: If you leave me now
    </option>
    <option value="https://player.vimeo.com/video/1020234278?h=6a602cea1a">
      AMP Teclado 4-3-9-2 / Extracto: Gymnopedies
    </option>
    <option value="https://player.vimeo.com/video/1020234375?h=464fa07eee">
      AMP Teclado 4-3-11 / Canción #3 - Bb Maj7
    </option>
    <option value="https://player.vimeo.com/video/1020234449?h=86a769c7eb">
      AMP Teclado 4-3-12 / Canción #4 - Brisa y mar
    </option>
    <option value="https://player.vimeo.com/video/1020234514?h=7d897af281">
      AMP Teclado 4-4-5 / Extracto: Valerie
    </option>
    <option value="https://player.vimeo.com/video/1032484167?h=108b4d1e1c">
      AMP Teclado 4-4-5 / Extracto: One kiss
    </option>
    <option value="https://player.vimeo.com/video/1020234562?h=b635b36653">
      AMP Teclado 4-4-9 / Canción #5 - Almas
    </option>
    <option value="https://player.vimeo.com/video/1020234619?h=e33bb529d0">
      AMP Teclado 4-5-7 / Canción #6 - Ocaso con luna
    </option>
    <option value="https://player.vimeo.com/video/1020234705?h=65dc5daa76">
      AMP Teclado 4-5-8 / Extracto: I Feel It Coming
    </option>
    <option value="https://player.vimeo.com/video/1020234746?h=7e35b32a21">
      AMP Teclado 4-5-8 / Extracto: If ain’t got you
    </option>
    <option value="https://player.vimeo.com/video/1020233808?h=ef20c9c963">
      AMP Teclado 4-6-2 / Concierto final - Someone
    </option>
</select>

  <!-- Modal -->
  <div id="videoModal" class="modal">
    <div class="modal-content">
      <span class="close">&times;</span>
      <iframe id="videoIframe" src="" allowfullscreen></iframe>
    </div>
  </div>

  <script>
    // Obtener elementos
    const videoSelect = document.getElementById("videoSelect");
    const videoModal = document.getElementById("videoModal");
    const videoIframe = document.getElementById("videoIframe");
    const closeModal = document.querySelector(".close");

    // Mostrar el modal con el video seleccionado
    videoSelect.addEventListener("change", () => {
      const selectedVideo = videoSelect.value;
      if (selectedVideo) {
        videoIframe.src = selectedVideo; // Cambiar el src del iframe
        videoModal.style.display = "flex"; // Mostrar el modal
      }
    });

    // Cerrar el modal al hacer clic en la "X"
    closeModal.addEventListener("click", () => {
      videoModal.style.display = "none"; // Ocultar el modal
      videoIframe.src = ""; // Detener el video
    });

    // Cerrar el modal al hacer clic fuera del contenido
    window.addEventListener("click", (event) => {
      if (event.target === videoModal) {
        videoModal.style.display = "none"; // Ocultar el modal
        videoIframe.src = ""; // Detener el video
      }
    });
  </script>

</body>
</html>

		</div>
				</div>
				<div class="elementor-element elementor-element-405ccb4 elementor-widget__width-auto elementor-widget elementor-widget-global elementor-global-49845 elementor-widget-html" data-id="405ccb4" data-element_type="widget" data-widget_type="html.default">
				<div class="elementor-widget-container">
			<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>Prueba Audio JS</title>
  <style>
    /* Contenedor que muestra botones y velocidad en la misma línea */
    .controls-container {
      display: inline-flex;      /* o "flex" si prefieres ocupar todo el ancho */
      align-items: center;       /* centra verticalmente */
      gap: 15px;                 /* espacio entre los elementos */
      margin: 30px;
    }

    /* Ajuste de estilo para los botones */
    button {
      padding: 6px 12px;
      font-size: 14px;
      cursor: pointer;
    }
  </style>
</head>
<body>
  
  <audio id="myAudio" src="https://www.ampenlinea.com/wp-content/uploads/2025/01/GPP.mp3"></audio>
  
  <!-- Contenedor para alinear en una sola línea -->
  <div class="controls-container">
    <button id="decreaseSpeedBtn">-</button>
    <button id="playPauseBtn">GPP</button>
    <button id="increaseSpeedBtn">+</button>
    <div id="speedDisplay">1.0x</div> <!-- Velocidad en la misma línea -->
  </div>
  
  <script>
    const audio = document.getElementById('myAudio');
    const playPauseBtn = document.getElementById('playPauseBtn');
    const increaseSpeedBtn = document.getElementById('increaseSpeedBtn');
    const decreaseSpeedBtn = document.getElementById('decreaseSpeedBtn');
    const speedDisplay = document.getElementById('speedDisplay');

    let isPlaying = false;

    // Actualiza el texto que muestra la velocidad
    function updateSpeedDisplay() {
      speedDisplay.textContent = `${audio.playbackRate.toFixed(1)}x`;
    }

    // Al hacer clic en el botón Reproducir/Pausar
    playPauseBtn.onclick = () => {
      if (isPlaying) {
        audio.pause();
        isPlaying = false;
        playPauseBtn.textContent = "GPP"; // Texto cuando está en pausa
      } else {
        audio.play();
        isPlaying = true;
        playPauseBtn.textContent = "Pausar"; // Texto cuando está reproduciendo
      }
    };

    // Al hacer clic en el botón de +10% Velocidad
    increaseSpeedBtn.onclick = () => {
      if (audio.playbackRate < 3.0) {
        audio.playbackRate += 0.1;
        updateSpeedDisplay();
      }
    };

    // Al hacer clic en el botón de -10% Velocidad
    decreaseSpeedBtn.onclick = () => {
      if (audio.playbackRate > 0.5) {
        audio.playbackRate -= 0.1;
        updateSpeedDisplay();
      }
    };

    // Al cargar la página
    window.onload = () => {
      updateSpeedDisplay();
    };
  </script>
</body>
</html>
		</div>
				</div>
				</div>
				<div class="elementor-element elementor-element-e784f1f elementor-widget elementor-widget-html" data-id="e784f1f" data-element_type="widget" data-widget_type="html.default">
				<div class="elementor-widget-container">
			<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Modal con Pantalla Completa</title>
    <style>
        body {
            font-family: 'Arial', sans-serif;
            background-color: #f0f0f0;
            margin: 0;
            padding: 20px;
        }

        .container {
            max-width: 1000px;
            margin: 0 auto;
            padding: 20px;
            background-color: #fff;
            box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
            border-radius: 8px;
        }

        h1 {
            text-align: center;
            margin-bottom: 20px;
        }

        .pdf-container {
            position: relative;
            width: 100%;
            height: 800px; /* Ajusta la altura según tus necesidades */
            border: 1px solid #ccc;
            border-radius: 8px;
            overflow: hidden;
        }

        .pdf-container iframe {
            width: 100%;
            height: 100%;
            border: none;
        }

        .fullscreen-btn {
            position: absolute;
            top: 3px;
            right: 10px;
            padding: 8px 12px;
            background-color: #4CAF50;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 14px;
            transition: background-color 0.3s;
        }

        .fullscreen-btn:hover {
            background-color: #45a049;
        }

        @media (max-width: 768px) {
            .pdf-container {
                height: 500px; /* Altura reducida para tablets */
            }
        }

        @media (max-width: 480px) {
            .pdf-container {
                height: 300px; /* Altura reducida para móviles */
            }
        }
    </style>
</head>
<body>
    <div class="container">

        <div class="pdf-container" id="pdf-container">
            <iframe 
                src="https://www.ampenlinea.com/wp-content/uploads/2025/01/Teclado-4-SE.pdf"  
                allowfullscreen>
            </iframe>
            <button class="fullscreen-btn" id="fullscreen-btn">Pantalla Completa</button>
        </div>
    </div>

    <script>
        // Obtener referencias a los elementos
        const fullscreenBtn = document.getElementById('fullscreen-btn');
        const pdfContainer = document.getElementById('pdf-container');

        // Función para activar pantalla completa
        function toggleFullscreen() {
            if (
                document.fullscreenElement ||
                document.webkitFullscreenElement ||
                document.msFullscreenElement
            ) {
                // Salir de pantalla completa
                if (document.exitFullscreen) {
                    document.exitFullscreen();
                } else if (document.webkitExitFullscreen) { /* Safari */
                    document.webkitExitFullscreen();
                } else if (document.msExitFullscreen) { /* IE11 */
                    document.msExitFullscreen();
                }
            } else {
                // Entrar en pantalla completa
                if (pdfContainer.requestFullscreen) {
                    pdfContainer.requestFullscreen();
                } else if (pdfContainer.webkitRequestFullscreen) { /* Safari */
                    pdfContainer.webkitRequestFullscreen();
                } else if (pdfContainer.msRequestFullscreen) { /* IE11 */
                    pdfContainer.msRequestFullscreen();
                }
            }
        }

        // Evento de clic en el botón para alternar pantalla completa
        fullscreenBtn.addEventListener('click', toggleFullscreen);

        // Evento para actualizar el texto del botón según el estado de pantalla completa
        function updateFullscreenButton() {
            if (
                document.fullscreenElement === pdfContainer ||
                document.webkitFullscreenElement === pdfContainer ||
                document.msFullscreenElement === pdfContainer
            ) {
                fullscreenBtn.textContent = 'Salir de Pantalla Completa';
            } else {
                fullscreenBtn.textContent = 'Pantalla Completa';
            }
        }

        // Escuchar cambios en el estado de pantalla completa
        document.addEventListener('fullscreenchange', updateFullscreenButton);
        document.addEventListener('webkitfullscreenchange', updateFullscreenButton); // Safari
        document.addEventListener('MSFullscreenChange', updateFullscreenButton); // IE11
    </script>
</body>
</html>
		</div>
				</div>
				<div class="elementor-element elementor-element-7eff65b elementor-widget elementor-widget-template" data-id="7eff65b" data-element_type="widget" data-widget_type="template.default">
				<div class="elementor-widget-container">
					<div class="elementor-template">
					</div>
				</div>
				</div>
					</div>
				</div>
				</div>
		]]></content:encoded>
					
		
		
			</item>
		<item>
		<title>AMA Teclado N4 – SE – Sistema de Evaluación (REPASO 2)</title>
		<link>https://www.ampenlinea.com/courses/ama-teclado-n4/lessons/ama-teclado-n4-se-sistema-de-evaluacion-repaso-2/</link>
		
		<dc:creator><![CDATA[Henry Giron]]></dc:creator>
		<pubDate>Fri, 21 Feb 2025 14:14:08 +0000</pubDate>
				<category><![CDATA[AMA Teclado N4]]></category>
		<guid isPermaLink="false">https://www.ampenlinea.com/?post_type=sfwd-lessons&#038;p=57419</guid>

					<description><![CDATA[Modal con Metrónomo Metrónomo &#215; Videos en Pop-Up TPA AMP Teclado 4-1-6 / Mi dulce chica AMP Teclado 4-1-10 / Canción #1 &#8211; E Maj7 AMP Teclado 4-1-11 / Imagine AMP Teclado 4-2-7 / Extracto: Angel AMP Teclado 4-2-7 / Extracto: Something AMP Teclado 4-2-7 / Extracto: What’s going on AMP Teclado 4-2-10 / Canción &#8230;<p class="read-more"> <a class="" href="https://www.ampenlinea.com/courses/ama-teclado-n4/lessons/ama-teclado-n4-se-sistema-de-evaluacion-repaso-2/"> <span class="screen-reader-text">AMA Teclado N4 – SE – Sistema de Evaluación (REPASO 2)</span> Leer más &#187;</a></p>]]></description>
										<content:encoded><![CDATA[		<div data-elementor-type="wp-post" data-elementor-id="57419" class="elementor elementor-57419" data-elementor-post-type="sfwd-lessons">
				<div class="elementor-element elementor-element-4b3ff34 e-flex e-con-boxed e-con e-parent" data-id="4b3ff34" data-element_type="container">
					<div class="e-con-inner">
		<div class="elementor-element elementor-element-a93d499 e-con-full e-grid e-con e-child" data-id="a93d499" data-element_type="container">
				<div class="elementor-element elementor-element-014697c elementor-widget elementor-widget-global elementor-global-49842 elementor-widget-html" data-id="014697c" data-element_type="widget" data-widget_type="html.default">
				<div class="elementor-widget-container">
			<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>Modal con Metrónomo</title>
  <style>
    /* Botón para abrir el modal */
    #openMetronomeBtn {
      padding: 10px 20px;
      font-size: 16px;
      cursor: pointer;
      background-color: #28a745;
      color: white;
      border: none;
      border-radius: 5px;
    }

    /* Estilos para el modal */
    .modal {
      display: none; /* Oculto por defecto */
      position: fixed;
      z-index: 1000;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.5); /* Fondo semi-transparente */
      justify-content: center;
      align-items: center;
    }

    /* Contenido del modal */
    .modal-content {
      background-color: #fff;
      margin: auto;
      padding: 20px;
      border: 1px solid #888;
      width: 400px;
      border-radius: 8px;
      position: relative;
    }

    /* Botón de cierre */
    .close {
      color: #aaa;
      position: absolute;
      top: 10px;
      right: 15px;
      font-size: 28px;
      font-weight: bold;
      cursor: pointer;
    }

    .close:hover,
    .close:focus {
      color: black;
    }
  </style>
</head>
<body>

  <!-- Botón para abrir el modal -->
  <button id="openMetronomeBtn">Metrónomo</button>

  <!-- Modal -->
  <div id="metronomeModal" class="modal">
    <div class="modal-content">
      <!-- Botón de cierre -->
      <span class="close">&times;</span>

      <!-- Iframe del metrónomo -->
      <iframe 
        src="https://guitarapp.com/metronome.html?embed=true&tempo=120&timeSignature=2&pattern=1&theme=light" 
        title="Online Metronome" 
        scrolling="no"
        style="width: 100%; height: 475px; border: none; border-radius: 4px;">
      </iframe>
    </div>
  </div>

  <script>
    // Obtener elementos
    const modal = document.getElementById("metronomeModal");
    const btn = document.getElementById("openMetronomeBtn");
    const closeBtn = document.querySelector(".close");

    // Mostrar el modal al hacer clic en el botón
    btn.addEventListener("click", () => {
      modal.style.display = "flex"; // Usar flex para centrar el contenido
    });

    // Cerrar el modal al hacer clic en el botón de cerrar (X)
    closeBtn.addEventListener("click", () => {
      modal.style.display = "none";
    });

    // Cerrar el modal al hacer clic fuera del contenido
    window.addEventListener("click", (event) => {
      if (event.target === modal) {
        modal.style.display = "none";
      }
    });
  </script>

</body>
</html>
		</div>
				</div>
				<div class="elementor-element elementor-element-e402769 elementor-widget elementor-widget-html" data-id="e402769" data-element_type="widget" data-widget_type="html.default">
				<div class="elementor-widget-container">
			<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>Videos en Pop-Up</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      padding: 20px;
    }

    /* Lista desplegable */
    select {
      padding: 10px;
      font-size: 16px;
      border: 1px solid #ccc;
      border-radius: 5px;
      margin-bottom: 20px;
      width: 100%; /* Se ajusta al ancho del contenedor */
      max-width: 400px; /* Ancho máximo */
    }

    /* Modal */
    .modal {
      display: none; /* Oculto por defecto */
      position: fixed;
      z-index: 1000;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.6); /* Fondo semi-transparente */
      justify-content: center;
      align-items: center;
    }

    /* Contenido del modal */
    .modal-content {
      background-color: white;
      border-radius: 8px;
      padding: 20px;
      width: 80%;
      max-width: 800px;
      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
      position: relative;
    }

    iframe {
      width: 100%;
      height: 450px;
      border: none;
      border-radius: 5px;
    }

    /* Botón de cierre */
    .close {
      position: absolute;
      top: 10px;
      right: 15px;
      font-size: 30px;
      font-weight: bold;
      color: #aaa;
      cursor: pointer;
      transition: color 0.3s;
    }

    .close:hover {
      color: black;
    }
  </style>
</head>
<body>


  <!-- Lista desplegable -->
 <select id="videoSelect">
    <option value="" selected disabled>TPA</option>
    <option value="https://player.vimeo.com/video/1020233888?h=2a574b7b6e">
      AMP Teclado 4-1-6 / Mi dulce chica
    </option>
    <option value="https://player.vimeo.com/video/1020233952?h=18c2f4c989">
      AMP Teclado 4-1-10 / Canción #1 - E Maj7
    </option>
    <option value="https://player.vimeo.com/video/1020234021?h=9768a23758">
      AMP Teclado 4-1-11 / Imagine
    </option>
    <option value="https://player.vimeo.com/video/1020234083?h=01bffbed09">
      AMP Teclado 4-2-7 / Extracto: Angel
    </option>
    <option value="https://player.vimeo.com/video/1020234111?h=734bd2b770">
      AMP Teclado 4-2-7 / Extracto: Something
    </option>
    <option value="https://player.vimeo.com/video/1020234159?h=f5cf8fb6c2">
      AMP Teclado 4-2-7 / Extracto: What’s going on
    </option>
    <option value="https://player.vimeo.com/video/1020234212?h=bcaedb9db0">
      AMP Teclado 4-2-10 / Canción #2 - A Maj7
    </option>
    <option value="https://player.vimeo.com/video/1020234332?h=022ec33ac9">
      AMP Teclado 4-3-9-1 / Extracto: If you leave me now
    </option>
    <option value="https://player.vimeo.com/video/1020234278?h=6a602cea1a">
      AMP Teclado 4-3-9-2 / Extracto: Gymnopedies
    </option>
    <option value="https://player.vimeo.com/video/1020234375?h=464fa07eee">
      AMP Teclado 4-3-11 / Canción #3 - Bb Maj7
    </option>
    <option value="https://player.vimeo.com/video/1020234449?h=86a769c7eb">
      AMP Teclado 4-3-12 / Canción #4 - Brisa y mar
    </option>
    <option value="https://player.vimeo.com/video/1020234514?h=7d897af281">
      AMP Teclado 4-4-5 / Extracto: Valerie
    </option>
    <option value="https://player.vimeo.com/video/1032484167?h=108b4d1e1c">
      AMP Teclado 4-4-5 / Extracto: One kiss
    </option>
    <option value="https://player.vimeo.com/video/1020234562?h=b635b36653">
      AMP Teclado 4-4-9 / Canción #5 - Almas
    </option>
    <option value="https://player.vimeo.com/video/1020234619?h=e33bb529d0">
      AMP Teclado 4-5-7 / Canción #6 - Ocaso con luna
    </option>
    <option value="https://player.vimeo.com/video/1020234705?h=65dc5daa76">
      AMP Teclado 4-5-8 / Extracto: I Feel It Coming
    </option>
    <option value="https://player.vimeo.com/video/1020234746?h=7e35b32a21">
      AMP Teclado 4-5-8 / Extracto: If ain’t got you
    </option>
    <option value="https://player.vimeo.com/video/1020233808?h=ef20c9c963">
      AMP Teclado 4-6-2 / Concierto final - Someone
    </option>
</select>

  <!-- Modal -->
  <div id="videoModal" class="modal">
    <div class="modal-content">
      <span class="close">&times;</span>
      <iframe id="videoIframe" src="" allowfullscreen></iframe>
    </div>
  </div>

  <script>
    // Obtener elementos
    const videoSelect = document.getElementById("videoSelect");
    const videoModal = document.getElementById("videoModal");
    const videoIframe = document.getElementById("videoIframe");
    const closeModal = document.querySelector(".close");

    // Mostrar el modal con el video seleccionado
    videoSelect.addEventListener("change", () => {
      const selectedVideo = videoSelect.value;
      if (selectedVideo) {
        videoIframe.src = selectedVideo; // Cambiar el src del iframe
        videoModal.style.display = "flex"; // Mostrar el modal
      }
    });

    // Cerrar el modal al hacer clic en la "X"
    closeModal.addEventListener("click", () => {
      videoModal.style.display = "none"; // Ocultar el modal
      videoIframe.src = ""; // Detener el video
    });

    // Cerrar el modal al hacer clic fuera del contenido
    window.addEventListener("click", (event) => {
      if (event.target === videoModal) {
        videoModal.style.display = "none"; // Ocultar el modal
        videoIframe.src = ""; // Detener el video
      }
    });
  </script>

</body>
</html>

		</div>
				</div>
				<div class="elementor-element elementor-element-ab8a8c9 elementor-widget__width-auto elementor-widget elementor-widget-global elementor-global-49845 elementor-widget-html" data-id="ab8a8c9" data-element_type="widget" data-widget_type="html.default">
				<div class="elementor-widget-container">
			<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>Prueba Audio JS</title>
  <style>
    /* Contenedor que muestra botones y velocidad en la misma línea */
    .controls-container {
      display: inline-flex;      /* o "flex" si prefieres ocupar todo el ancho */
      align-items: center;       /* centra verticalmente */
      gap: 15px;                 /* espacio entre los elementos */
      margin: 30px;
    }

    /* Ajuste de estilo para los botones */
    button {
      padding: 6px 12px;
      font-size: 14px;
      cursor: pointer;
    }
  </style>
</head>
<body>
  
  <audio id="myAudio" src="https://www.ampenlinea.com/wp-content/uploads/2025/01/GPP.mp3"></audio>
  
  <!-- Contenedor para alinear en una sola línea -->
  <div class="controls-container">
    <button id="decreaseSpeedBtn">-</button>
    <button id="playPauseBtn">GPP</button>
    <button id="increaseSpeedBtn">+</button>
    <div id="speedDisplay">1.0x</div> <!-- Velocidad en la misma línea -->
  </div>
  
  <script>
    const audio = document.getElementById('myAudio');
    const playPauseBtn = document.getElementById('playPauseBtn');
    const increaseSpeedBtn = document.getElementById('increaseSpeedBtn');
    const decreaseSpeedBtn = document.getElementById('decreaseSpeedBtn');
    const speedDisplay = document.getElementById('speedDisplay');

    let isPlaying = false;

    // Actualiza el texto que muestra la velocidad
    function updateSpeedDisplay() {
      speedDisplay.textContent = `${audio.playbackRate.toFixed(1)}x`;
    }

    // Al hacer clic en el botón Reproducir/Pausar
    playPauseBtn.onclick = () => {
      if (isPlaying) {
        audio.pause();
        isPlaying = false;
        playPauseBtn.textContent = "GPP"; // Texto cuando está en pausa
      } else {
        audio.play();
        isPlaying = true;
        playPauseBtn.textContent = "Pausar"; // Texto cuando está reproduciendo
      }
    };

    // Al hacer clic en el botón de +10% Velocidad
    increaseSpeedBtn.onclick = () => {
      if (audio.playbackRate < 3.0) {
        audio.playbackRate += 0.1;
        updateSpeedDisplay();
      }
    };

    // Al hacer clic en el botón de -10% Velocidad
    decreaseSpeedBtn.onclick = () => {
      if (audio.playbackRate > 0.5) {
        audio.playbackRate -= 0.1;
        updateSpeedDisplay();
      }
    };

    // Al cargar la página
    window.onload = () => {
      updateSpeedDisplay();
    };
  </script>
</body>
</html>
		</div>
				</div>
				</div>
				<div class="elementor-element elementor-element-dc4d152 elementor-widget elementor-widget-html" data-id="dc4d152" data-element_type="widget" data-widget_type="html.default">
				<div class="elementor-widget-container">
			<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Modal con Pantalla Completa</title>
    <style>
        body {
            font-family: 'Arial', sans-serif;
            background-color: #f0f0f0;
            margin: 0;
            padding: 20px;
        }

        .container {
            max-width: 1000px;
            margin: 0 auto;
            padding: 20px;
            background-color: #fff;
            box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
            border-radius: 8px;
        }

        h1 {
            text-align: center;
            margin-bottom: 20px;
        }

        .pdf-container {
            position: relative;
            width: 100%;
            height: 800px; /* Ajusta la altura según tus necesidades */
            border: 1px solid #ccc;
            border-radius: 8px;
            overflow: hidden;
        }

        .pdf-container iframe {
            width: 100%;
            height: 100%;
            border: none;
        }

        .fullscreen-btn {
            position: absolute;
            top: 3px;
            right: 10px;
            padding: 8px 12px;
            background-color: #4CAF50;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 14px;
            transition: background-color 0.3s;
        }

        .fullscreen-btn:hover {
            background-color: #45a049;
        }

        @media (max-width: 768px) {
            .pdf-container {
                height: 500px; /* Altura reducida para tablets */
            }
        }

        @media (max-width: 480px) {
            .pdf-container {
                height: 300px; /* Altura reducida para móviles */
            }
        }
    </style>
</head>
<body>
    <div class="container">

        <div class="pdf-container" id="pdf-container">
            <iframe 
                src="https://www.ampenlinea.com/wp-content/uploads/2025/01/Teclado-4-SE.pdf"  
                allowfullscreen>
            </iframe>
            <button class="fullscreen-btn" id="fullscreen-btn">Pantalla Completa</button>
        </div>
    </div>

    <script>
        // Obtener referencias a los elementos
        const fullscreenBtn = document.getElementById('fullscreen-btn');
        const pdfContainer = document.getElementById('pdf-container');

        // Función para activar pantalla completa
        function toggleFullscreen() {
            if (
                document.fullscreenElement ||
                document.webkitFullscreenElement ||
                document.msFullscreenElement
            ) {
                // Salir de pantalla completa
                if (document.exitFullscreen) {
                    document.exitFullscreen();
                } else if (document.webkitExitFullscreen) { /* Safari */
                    document.webkitExitFullscreen();
                } else if (document.msExitFullscreen) { /* IE11 */
                    document.msExitFullscreen();
                }
            } else {
                // Entrar en pantalla completa
                if (pdfContainer.requestFullscreen) {
                    pdfContainer.requestFullscreen();
                } else if (pdfContainer.webkitRequestFullscreen) { /* Safari */
                    pdfContainer.webkitRequestFullscreen();
                } else if (pdfContainer.msRequestFullscreen) { /* IE11 */
                    pdfContainer.msRequestFullscreen();
                }
            }
        }

        // Evento de clic en el botón para alternar pantalla completa
        fullscreenBtn.addEventListener('click', toggleFullscreen);

        // Evento para actualizar el texto del botón según el estado de pantalla completa
        function updateFullscreenButton() {
            if (
                document.fullscreenElement === pdfContainer ||
                document.webkitFullscreenElement === pdfContainer ||
                document.msFullscreenElement === pdfContainer
            ) {
                fullscreenBtn.textContent = 'Salir de Pantalla Completa';
            } else {
                fullscreenBtn.textContent = 'Pantalla Completa';
            }
        }

        // Escuchar cambios en el estado de pantalla completa
        document.addEventListener('fullscreenchange', updateFullscreenButton);
        document.addEventListener('webkitfullscreenchange', updateFullscreenButton); // Safari
        document.addEventListener('MSFullscreenChange', updateFullscreenButton); // IE11
    </script>
</body>
</html>
		</div>
				</div>
				<div class="elementor-element elementor-element-020d4ce elementor-widget elementor-widget-template" data-id="020d4ce" data-element_type="widget" data-widget_type="template.default">
				<div class="elementor-widget-container">
					<div class="elementor-template">
					</div>
				</div>
				</div>
					</div>
				</div>
				</div>
		]]></content:encoded>
					
		
		
			</item>
		<item>
		<title>AMA TC 4-6-2 &#8211; Concierto final de teclado (REPASO 3)</title>
		<link>https://www.ampenlinea.com/courses/ama-teclado-n4/lessons/ama-tc-4-6-2-3/</link>
		
		<dc:creator><![CDATA[Henry Giron]]></dc:creator>
		<pubDate>Thu, 20 Feb 2025 20:40:49 +0000</pubDate>
				<category><![CDATA[AMA Teclado N4]]></category>
		<guid isPermaLink="false">https://www.ampenlinea.com/?post_type=sfwd-lessons&#038;p=57413</guid>

					<description><![CDATA[Análisis del concierto final Actividad Practicar el concierto final primero con acordes con ambas manos, luego incorpora la melodía con la mano izquierda en clave de fa, finalmente tócalo todo respetando los ritmos, melodías, acordes y símbolos del cifrado, usa la plataforma a 70bpm.]]></description>
										<content:encoded><![CDATA[		<div data-elementor-type="wp-post" data-elementor-id="57413" class="elementor elementor-57413" data-elementor-post-type="sfwd-lessons">
				<div class="elementor-element elementor-element-196414e e-flex e-con-boxed e-con e-parent" data-id="196414e" data-element_type="container">
					<div class="e-con-inner">
				<div class="elementor-element elementor-element-f775355 elementor-widget elementor-widget-shortcode" data-id="f775355" data-element_type="widget" data-widget_type="shortcode.default">
				<div class="elementor-widget-container">
					<div class="elementor-shortcode"> <!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Audio y Metrónomo</title>
  <style>
    body {
      font-family: sans-serif;
      margin: 0;
      background-color: #fafafa;
    }

    .toolbar {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 10px 15px;
      background-color: #fafafa;
      color: #333;
      border-bottom: 1px solid #ccc;
    }

    .toolbar .icons button {
      background: none;
      border: none;
      color: #333;
      font-size: 22px;
      cursor: pointer;
      margin-left: 15px;
    }

  .toolbar .icons img {
      height: 32px;
      width: 32px;
      cursor: pointer;
    }

    .modal {
      display: none;
      position: fixed;
      z-index: 1000;
      top: 0; left: 0;
      width: 100%; height: 100%;
      background-color: rgba(0, 0, 0, 0.6);
      justify-content: center;
      align-items: center;
    }

    .modal-content {
      background: #fff;
      padding: 20px;
      width: 90%;
      max-width: 480px;
      border-radius: 8px;
      position: relative;
    }

    .modal .close {
      position: absolute;
      top: 10px;
      right: 15px;
      font-size: 24px;
      cursor: pointer;
    }

    .modal iframe {
      width: 100%;
      height: 475px;
      border: none;
      border-radius: 4px;
    }

    .modal .audio-controls {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .modal .audio-controls audio {
      width: 100%;
    }
  </style>
</head>
<body>

  <div class="toolbar">
    <div class="logo">Herramientas AMP<img src="https://s.w.org/images/core/emoji/16.0.1/72x72/1f3b6.png" alt="🎶" class="wp-smiley" style="height: 1em; max-height: 1em;" /></div>
    <div class="icons">
      <img decoding="async" src="https://www.ampenlinea.com/wp-content/uploads/2025/06/brand-bandlab.svg" alt="Abrir Modales" onclick="abrirModal('audioModal')">
      <img decoding="async" src="https://www.ampenlinea.com/wp-content/uploads/2025/06/metronome.svg" alt="Abrir Metrónomo" onclick="abrirModal('metronomeModal')">
    
    </div>
  </div>

  <!-- MODAL AUDIO -->
  <div id="audioModal" class="modal">
    <div class="modal-content">
      <span class="close" onclick="cerrarModal('audioModal')">&times;</span>
      <h3>Selecciona un audio</h3>
      <div class="audio-controls">
        <select id="audioSelector" onchange="cambiarAudio(this.value)">
          <option value="https://www.ampenlinea.com/wp-content/uploads/2020/08/GPP-4213-C-Rock-Shuffle-80-bpm.mp3">GPP Rock Shuffle 80 bpm</option>
          <option value="https://www.ampenlinea.com/wp-content/uploads/2020/08/GPP-4213-B-Four-on-the-floor-80-bpm.mp3">GPP Four on the floor 80 bpm</option>
          <option value="https://www.ampenlinea.com/wp-content/uploads/2020/08/GPP-3411-Disco-80-bpm.mp3">GPP Disco 80 bpm</option>
          <option value="https://www.ampenlinea.com/wp-content/uploads/2020/08/GPP-3212-Hard-Rock-80-bpm.mp3">GPP Hard Rock 80 bpm</option>
          <option value="https://www.ampenlinea.com/wp-content/uploads/2020/08/GPP-219-8th-Note-Rock-80-bpm.mp3">GPP 8th Note Rock 80 bpm</option>
          <option value="https://www.ampenlinea.com/wp-content/uploads/2020/08/GPP-4213-A-16th-Note-Rock-85-bpm.mp3">GPP 16th Note Rock A 85 bpm</option>
          <option value="https://www.ampenlinea.com/wp-content/uploads/2020/08/GPP-4213-D-16th-Note-Rock-85-bpm.mp3">GPP 16th Note Rock B 85 bpm</option>
          <option value="https://www.ampenlinea.com/wp-content/uploads/2020/08/GPP-5512-Basic-RB-85-bpm.mp3">GPP Basic R&B 85 bpm</option>
          <option value="https://www.ampenlinea.com/wp-content/uploads/2020/08/GPP-415-Four-on-the-floor-85-bpm.mp3">GPP Four on the floor 85 bpm</option>
          <option value="https://www.ampenlinea.com/wp-content/uploads/2020/08/GPP-3112-8th-Note-Rock-90-bpm.mp3">GPP 8th Note Rock A 90 bpm</option>
          <option value="https://www.ampenlinea.com/wp-content/uploads/2020/08/GPP-338-8th-Note-Rock-90-bpm.mp3">GPP 8th Note Rock B 90 bpm</option>
          <option value="https://www.ampenlinea.com/wp-content/uploads/2020/08/GPP-3116-Disco-100-bpm.mp3">GPP Disco 100 bpm</option>
          <option value="https://www.ampenlinea.com/wp-content/uploads/2020/08/GPP-347-Bossa-Nova-100-bpm.mp3">GPP Bossa Nova 100 bpm</option>
          <option value="https://www.ampenlinea.com/wp-content/uploads/2020/08/GPP-329-Soca-100-bpm.mp3">GPP 329 Soca 100 bpm</option>
          <option value="https://www.ampenlinea.com/wp-content/uploads/2020/08/GPP-253-8th-Note-Rock-100-bpm.mp3">GPP 8th Note Rock 100 bpm</option>
          <option value="https://www.ampenlinea.com/wp-content/uploads/2020/08/GPP-235-8th-Note-Rock-100-bpm.mp3">GPP 8th Note Rock 100 bpm</option>
          <option value="https://www.ampenlinea.com/wp-content/uploads/2020/08/GPP-159-Hard-Rock-100-bpm.mp3">GPP Hard Rock 100 bpm</option>
          <option value="https://www.ampenlinea.com/wp-content/uploads/2020/08/GPP-156-16th-Note-Syncopated-Kick-100-bpm.mp3">GPP 16th Note Syncopated Kick 100 bpm</option>
          <option value="https://www.ampenlinea.com/wp-content/uploads/2020/08/GPP-147-Four-on-the-floor-100-bpm.mp3">GPP Four on the floor 100 bpm</option>
          <option value="https://www.ampenlinea.com/wp-content/uploads/2020/08/GPP-146-Half-time-Shuffle-100-bpm.mp3">GPP Half time Shuffle 100 bpm</option>

        </select>

        <audio id="audioPlayer" controls>
          <source src="https://www.ampenlinea.com/wp-content/uploads/2020/08/GPP-4213-C-Rock-Shuffle-80-bpm.mp3" type="audio/mp3">
        </audio>

        <label for="velocidadAudio">Velocidad: <span id="velocidadValor">1.00x</span></label>
        <input type="range" id="velocidadAudio" min="0.5" max="2" step="0.05" value="1" oninput="ajustarVelocidad(this.value)">
      </div>
    </div>
  </div>

  <!-- MODAL METRONOMO -->
  <div id="metronomeModal" class="modal">
    <div class="modal-content">
      <span class="close" onclick="cerrarModal('metronomeModal')">&times;</span>
      <iframe 
        src="https://guitarapp.com/metronome.html?embed=true&tempo=120&timeSignature=2&pattern=1&theme=light"
        title="Metrónomo Online">
      </iframe>
    </div>
  </div>

  <script>
    const audioPlayer = document.getElementById('audioPlayer');
    const velocidadValor = document.getElementById('velocidadValor');

    function cambiarAudio(src) {
      audioPlayer.src = src;
      audioPlayer.playbackRate = parseFloat(document.getElementById('velocidadAudio').value);
      audioPlayer.play();
    }

    function ajustarVelocidad(speed) {
      velocidadValor.textContent = parseFloat(speed).toFixed(2) + 'x';
      audioPlayer.playbackRate = parseFloat(speed);
    }

    function abrirModal(id) {
      document.getElementById(id).style.display = 'flex';
    }

    function cerrarModal(id) {
      document.getElementById(id).style.display = 'none';
    }

    window.addEventListener('click', (e) => {
      document.querySelectorAll('.modal').forEach(modal => {
        if (e.target === modal) modal.style.display = 'none';
      });
    });
  </script>

</body>
</html>
</div>
				</div>
				</div>
		<!-- dce invisible element 3976e1a --><style>
	/* --- Ajustes para usar varios shortcodes en línea --- */
.amp2 {
  display: inline-block;  /* Hace que el widget sea en línea */
  vertical-align: middle; /* Alinea botones al centro */
  margin: 4px;            /* Espaciado opcional entre botones */
}

.amp2-open {
  display: inline-block;  /* Evita que se estire como bloque */
  white-space: nowrap;    /* Mantiene ícono y texto juntos */
}

/* ===== Modal compacto (ajusta --w/--h para tamaño) ===== */
.amp2{font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif}
.amp2-open{background:#6d5ef8;color:#fff;border:0;border-radius:10px;padding:8px 14px;font-weight:600;cursor:pointer}
.amp2-overlay{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:9998}
.amp2-modal{position:fixed;inset:0;display:grid;place-items:center;z-index:9999}
/* Forzar oculto inicial en algunos temas/constructores */
.amp2 [hidden]{display:none !important}
.amp2-card{width:min(640px,95vw);background:#101225;color:#f7f8ff;border-radius:14px;box-shadow:0 20px 60px rgba(0,0,0,.55);overflow:hidden}
.amp2-header{display:flex;justify-content:space-between;align-items:center;padding:10px 12px;border-bottom:1px solid rgba(255,255,255,.08)}
.amp2-close{background:transparent;border:0;color:#fff;font-size:18px;cursor:pointer}
.amp2-controls{display:flex;flex-wrap:wrap;gap:8px;padding:10px 12px;font-size:12px}
.amp2-controls select,.amp2-controls button{height:32px;border-radius:8px;border:1px solid rgba(255,255,255,.15);background:#171a2b;color:#fff;padding:0 10px;cursor:pointer}
.amp2-clear{background:transparent}

.amp2-kb{--w:36px; --h:136px; --bw:22px; --bh:84px; position:relative; padding:12px; background:#0b0d1b}
.amp2-whites{display:flex;position:relative;width:calc(var(--w)*14);height:var(--h);margin:0 auto;z-index:1}
.amp2-blacks{position:absolute;left:50%;top:12px;transform:translateX(-50%);width:calc(var(--w)*14);height:var(--h);pointer-events:none;z-index:2}

.key{position:relative;user-select:none;-webkit-user-select:none;touch-action:manipulation}
.key.white{width:var(--w);height:var(--h);background:linear-gradient(#fff,#ececec);border:1px solid #bfbfbf;border-bottom-left-radius:6px;border-bottom-right-radius:6px;box-sizing:border-box;cursor:pointer}
.key.black{position:absolute;width:var(--bw);height:var(--bh);background:linear-gradient(#222,#111);border:1px solid #000;border-bottom-left-radius:4px;border-bottom-right-radius:4px;box-shadow:0 2px 6px rgba(0,0,0,.6);cursor:pointer;pointer-events:auto}
.key.active{filter:brightness(1.25)}
.key .dot{position:absolute;left:50%;transform:translateX(-50%);bottom:20px;width:8px;height:8px;border-radius:50%;opacity:0}
.key.root .dot{background:#ffcc00;opacity:1}
.key.member .dot{background:#2c8cff;opacity:1}
.key.selected .dot{background:#00d084;opacity:1}
.key .label{position:absolute;left:50%;transform:translateX(-50%);bottom:4px;font:600 11px/1 system-ui,-apple-system,Segoe UI,Roboto,sans-serif;color:#222}
.key.black .label{color:#e8e8e8;bottom:6px;font-weight:500}
</style><style>
  #btnShowSheet {
    padding: 12px 20px;
    font-size: 18px;
    background-color: #1a1a1a;
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
  }

  .modal {
    display: none;
    position: fixed;
    z-index: 9999;
    inset: 0;
    background: rgba(0, 0, 0, 0.95);
  }

  .modal-fullscreen {
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0;
    overflow: hidden;
  }

  .close-btn {
    position: absolute;
    top: 20px;
    right: 30px;
    background: transparent;
    border: none;
    font-size: 36px;
    color: #fff;
    cursor: pointer;
    z-index: 10000;
  }

  .sheet-container {
    position: relative;
    max-width: 95vw;
    max-height: 90vh;
    width: auto;
    height: auto;
    overflow: hidden;
  }

  #sheetImage {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 8px;
  }

  #drawCanvas {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
    pointer-events: auto;
  }
</style><div class="elementor-element elementor-element-d00f5bb e-con-full e-flex e-con e-child" data-id="d00f5bb" data-element_type="container">
				<div class="elementor-element elementor-element-960d546 elementor-widget__width-initial elementor-widget elementor-widget-html" data-id="960d546" data-element_type="widget" data-widget_type="html.default">
				<div class="elementor-widget-container">
			
<!-- &#x1f7e8; SUBTÍTULO 1 + PÁRRAFO -->
<section class="bloque-leccion">
  <h2>Análisis del concierto final</h2>

  <p></p>
  
  
  
  <img decoding="async" src="https://www.ampenlinea.com/wp-content/uploads/2025/08/tc-4-6-2.png" alt="Forma basica" class="imagen-responsiva">
</section>

<!--&#x1f7e8; Actividad + PÁRRAFO -->
<section class="bloque-leccion">
  <h1>Actividad</h1>
  <p>Practicar el concierto final primero con acordes con ambas manos, luego incorpora la melodía con la mano izquierda en clave de fa, finalmente tócalo todo respetando los ritmos, melodías, acordes y símbolos del cifrado, usa la plataforma a 70bpm.</p>
  

</section>

<!-- &#x1f3a8; ESTILO PERSONALIZADO -->
<style>
  .header-leccion {
    background-color: #f2f2f2;
    padding: 10px;
    font-size: 16px;
    text-align: center;
    border-bottom: 2px solid #ccc;
    margin-bottom: 20px;
  }

  .titulo-leccion {
    font-size: 28px;
    font-weight: bold;
    text-align: center;
    color: #b30808;
    margin-bottom: 30px;
  }

  .bloque-leccion {
    margin: 30px 0;
  }

  .bloque-leccion h3 {
    font-size: 22px;
    color: #222;
    margin-bottom: 10px;
  }

  .bloque-leccion p {
    font-size: 18px;
    line-height: 1.6;
    color: #444;
  }

  .imagen-responsiva {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 15px auto;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
  }
  
.bloque-leccion {
  user-select: none;           /* Desactiva selección en navegadores modernos */
  -webkit-user-select: none;   /* Chrome/Safari */
  -moz-user-select: none;      /* Firefox */
  -ms-user-select: none;       /* Internet Explorer/Edge */
}


</style>

<script>
  // Bloquea clic derecho
  document.addEventListener('contextmenu', function (e) {
    e.preventDefault();
  });

  // Bloquea teclas como Ctrl+C, Ctrl+U, Ctrl+S, Ctrl+Shift+I (inspeccionar)
  document.addEventListener('keydown', function (e) {
    if ((e.ctrlKey && ['c', 'u', 's'].includes(e.key.toLowerCase())) ||
        (e.ctrlKey && e.shiftKey && e.key.toLowerCase() === 'i')) {
      e.preventDefault();
    }
  });
</script>

		</div>
				</div>
				</div>
		<div class="elementor-element elementor-element-a6092fc e-con-full e-flex e-con e-child" data-id="a6092fc" data-element_type="container">
				<div class="elementor-element elementor-element-1e868a5 elementor-widget elementor-widget-shortcode" data-id="1e868a5" data-element_type="widget" data-widget_type="shortcode.default">
				<div class="elementor-widget-container">
					<div class="elementor-shortcode"><p>Debes iniciar sesión para ver este contenido.</p></div>
				</div>
				</div>
				</div>
					</div>
				</div>
				</div>
		]]></content:encoded>
					
		
		
			</item>
		<item>
		<title>AMA Teclado N4 – SE – Sistema de Evaluación (REPASO)</title>
		<link>https://www.ampenlinea.com/courses/ama-teclado-n4/lessons/ama-teclado-n4-se-sistema-de-evaluacion-repaso/</link>
		
		<dc:creator><![CDATA[Henry Giron]]></dc:creator>
		<pubDate>Wed, 19 Feb 2025 20:27:32 +0000</pubDate>
				<category><![CDATA[AMA Teclado N4]]></category>
		<guid isPermaLink="false">https://www.ampenlinea.com/?post_type=sfwd-lessons&#038;p=57405</guid>

					<description><![CDATA[Modal con Metrónomo Metrónomo &#215; Videos en Pop-Up TPA AMP Teclado 4-1-6 / Mi dulce chica AMP Teclado 4-1-10 / Canción #1 &#8211; E Maj7 AMP Teclado 4-1-11 / Imagine AMP Teclado 4-2-7 / Extracto: Angel AMP Teclado 4-2-7 / Extracto: Something AMP Teclado 4-2-7 / Extracto: What’s going on AMP Teclado 4-2-10 / Canción &#8230;<p class="read-more"> <a class="" href="https://www.ampenlinea.com/courses/ama-teclado-n4/lessons/ama-teclado-n4-se-sistema-de-evaluacion-repaso/"> <span class="screen-reader-text">AMA Teclado N4 – SE – Sistema de Evaluación (REPASO)</span> Leer más &#187;</a></p>]]></description>
										<content:encoded><![CDATA[		<div data-elementor-type="wp-post" data-elementor-id="57405" class="elementor elementor-57405" data-elementor-post-type="sfwd-lessons">
				<div class="elementor-element elementor-element-6cabf62 e-flex e-con-boxed e-con e-parent" data-id="6cabf62" data-element_type="container">
					<div class="e-con-inner">
		<div class="elementor-element elementor-element-7d883e9 e-con-full e-grid e-con e-child" data-id="7d883e9" data-element_type="container">
				<div class="elementor-element elementor-element-9bcaed1 elementor-widget elementor-widget-global elementor-global-49842 elementor-widget-html" data-id="9bcaed1" data-element_type="widget" data-widget_type="html.default">
				<div class="elementor-widget-container">
			<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>Modal con Metrónomo</title>
  <style>
    /* Botón para abrir el modal */
    #openMetronomeBtn {
      padding: 10px 20px;
      font-size: 16px;
      cursor: pointer;
      background-color: #28a745;
      color: white;
      border: none;
      border-radius: 5px;
    }

    /* Estilos para el modal */
    .modal {
      display: none; /* Oculto por defecto */
      position: fixed;
      z-index: 1000;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.5); /* Fondo semi-transparente */
      justify-content: center;
      align-items: center;
    }

    /* Contenido del modal */
    .modal-content {
      background-color: #fff;
      margin: auto;
      padding: 20px;
      border: 1px solid #888;
      width: 400px;
      border-radius: 8px;
      position: relative;
    }

    /* Botón de cierre */
    .close {
      color: #aaa;
      position: absolute;
      top: 10px;
      right: 15px;
      font-size: 28px;
      font-weight: bold;
      cursor: pointer;
    }

    .close:hover,
    .close:focus {
      color: black;
    }
  </style>
</head>
<body>

  <!-- Botón para abrir el modal -->
  <button id="openMetronomeBtn">Metrónomo</button>

  <!-- Modal -->
  <div id="metronomeModal" class="modal">
    <div class="modal-content">
      <!-- Botón de cierre -->
      <span class="close">&times;</span>

      <!-- Iframe del metrónomo -->
      <iframe 
        src="https://guitarapp.com/metronome.html?embed=true&tempo=120&timeSignature=2&pattern=1&theme=light" 
        title="Online Metronome" 
        scrolling="no"
        style="width: 100%; height: 475px; border: none; border-radius: 4px;">
      </iframe>
    </div>
  </div>

  <script>
    // Obtener elementos
    const modal = document.getElementById("metronomeModal");
    const btn = document.getElementById("openMetronomeBtn");
    const closeBtn = document.querySelector(".close");

    // Mostrar el modal al hacer clic en el botón
    btn.addEventListener("click", () => {
      modal.style.display = "flex"; // Usar flex para centrar el contenido
    });

    // Cerrar el modal al hacer clic en el botón de cerrar (X)
    closeBtn.addEventListener("click", () => {
      modal.style.display = "none";
    });

    // Cerrar el modal al hacer clic fuera del contenido
    window.addEventListener("click", (event) => {
      if (event.target === modal) {
        modal.style.display = "none";
      }
    });
  </script>

</body>
</html>
		</div>
				</div>
				<div class="elementor-element elementor-element-9050b4e elementor-widget elementor-widget-html" data-id="9050b4e" data-element_type="widget" data-widget_type="html.default">
				<div class="elementor-widget-container">
			<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>Videos en Pop-Up</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      padding: 20px;
    }

    /* Lista desplegable */
    select {
      padding: 10px;
      font-size: 16px;
      border: 1px solid #ccc;
      border-radius: 5px;
      margin-bottom: 20px;
      width: 100%; /* Se ajusta al ancho del contenedor */
      max-width: 400px; /* Ancho máximo */
    }

    /* Modal */
    .modal {
      display: none; /* Oculto por defecto */
      position: fixed;
      z-index: 1000;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.6); /* Fondo semi-transparente */
      justify-content: center;
      align-items: center;
    }

    /* Contenido del modal */
    .modal-content {
      background-color: white;
      border-radius: 8px;
      padding: 20px;
      width: 80%;
      max-width: 800px;
      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
      position: relative;
    }

    iframe {
      width: 100%;
      height: 450px;
      border: none;
      border-radius: 5px;
    }

    /* Botón de cierre */
    .close {
      position: absolute;
      top: 10px;
      right: 15px;
      font-size: 30px;
      font-weight: bold;
      color: #aaa;
      cursor: pointer;
      transition: color 0.3s;
    }

    .close:hover {
      color: black;
    }
  </style>
</head>
<body>


  <!-- Lista desplegable -->
 <select id="videoSelect">
    <option value="" selected disabled>TPA</option>
    <option value="https://player.vimeo.com/video/1020233888?h=2a574b7b6e">
      AMP Teclado 4-1-6 / Mi dulce chica
    </option>
    <option value="https://player.vimeo.com/video/1020233952?h=18c2f4c989">
      AMP Teclado 4-1-10 / Canción #1 - E Maj7
    </option>
    <option value="https://player.vimeo.com/video/1020234021?h=9768a23758">
      AMP Teclado 4-1-11 / Imagine
    </option>
    <option value="https://player.vimeo.com/video/1020234083?h=01bffbed09">
      AMP Teclado 4-2-7 / Extracto: Angel
    </option>
    <option value="https://player.vimeo.com/video/1020234111?h=734bd2b770">
      AMP Teclado 4-2-7 / Extracto: Something
    </option>
    <option value="https://player.vimeo.com/video/1020234159?h=f5cf8fb6c2">
      AMP Teclado 4-2-7 / Extracto: What’s going on
    </option>
    <option value="https://player.vimeo.com/video/1020234212?h=bcaedb9db0">
      AMP Teclado 4-2-10 / Canción #2 - A Maj7
    </option>
    <option value="https://player.vimeo.com/video/1020234332?h=022ec33ac9">
      AMP Teclado 4-3-9-1 / Extracto: If you leave me now
    </option>
    <option value="https://player.vimeo.com/video/1020234278?h=6a602cea1a">
      AMP Teclado 4-3-9-2 / Extracto: Gymnopedies
    </option>
    <option value="https://player.vimeo.com/video/1020234375?h=464fa07eee">
      AMP Teclado 4-3-11 / Canción #3 - Bb Maj7
    </option>
    <option value="https://player.vimeo.com/video/1020234449?h=86a769c7eb">
      AMP Teclado 4-3-12 / Canción #4 - Brisa y mar
    </option>
    <option value="https://player.vimeo.com/video/1020234514?h=7d897af281">
      AMP Teclado 4-4-5 / Extracto: Valerie
    </option>
    <option value="https://player.vimeo.com/video/1032484167?h=108b4d1e1c">
      AMP Teclado 4-4-5 / Extracto: One kiss
    </option>
    <option value="https://player.vimeo.com/video/1020234562?h=b635b36653">
      AMP Teclado 4-4-9 / Canción #5 - Almas
    </option>
    <option value="https://player.vimeo.com/video/1020234619?h=e33bb529d0">
      AMP Teclado 4-5-7 / Canción #6 - Ocaso con luna
    </option>
    <option value="https://player.vimeo.com/video/1020234705?h=65dc5daa76">
      AMP Teclado 4-5-8 / Extracto: I Feel It Coming
    </option>
    <option value="https://player.vimeo.com/video/1020234746?h=7e35b32a21">
      AMP Teclado 4-5-8 / Extracto: If ain’t got you
    </option>
    <option value="https://player.vimeo.com/video/1020233808?h=ef20c9c963">
      AMP Teclado 4-6-2 / Concierto final - Someone
    </option>
</select>

  <!-- Modal -->
  <div id="videoModal" class="modal">
    <div class="modal-content">
      <span class="close">&times;</span>
      <iframe id="videoIframe" src="" allowfullscreen></iframe>
    </div>
  </div>

  <script>
    // Obtener elementos
    const videoSelect = document.getElementById("videoSelect");
    const videoModal = document.getElementById("videoModal");
    const videoIframe = document.getElementById("videoIframe");
    const closeModal = document.querySelector(".close");

    // Mostrar el modal con el video seleccionado
    videoSelect.addEventListener("change", () => {
      const selectedVideo = videoSelect.value;
      if (selectedVideo) {
        videoIframe.src = selectedVideo; // Cambiar el src del iframe
        videoModal.style.display = "flex"; // Mostrar el modal
      }
    });

    // Cerrar el modal al hacer clic en la "X"
    closeModal.addEventListener("click", () => {
      videoModal.style.display = "none"; // Ocultar el modal
      videoIframe.src = ""; // Detener el video
    });

    // Cerrar el modal al hacer clic fuera del contenido
    window.addEventListener("click", (event) => {
      if (event.target === videoModal) {
        videoModal.style.display = "none"; // Ocultar el modal
        videoIframe.src = ""; // Detener el video
      }
    });
  </script>

</body>
</html>

		</div>
				</div>
				<div class="elementor-element elementor-element-f510b7f elementor-widget__width-auto elementor-widget elementor-widget-global elementor-global-49845 elementor-widget-html" data-id="f510b7f" data-element_type="widget" data-widget_type="html.default">
				<div class="elementor-widget-container">
			<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>Prueba Audio JS</title>
  <style>
    /* Contenedor que muestra botones y velocidad en la misma línea */
    .controls-container {
      display: inline-flex;      /* o "flex" si prefieres ocupar todo el ancho */
      align-items: center;       /* centra verticalmente */
      gap: 15px;                 /* espacio entre los elementos */
      margin: 30px;
    }

    /* Ajuste de estilo para los botones */
    button {
      padding: 6px 12px;
      font-size: 14px;
      cursor: pointer;
    }
  </style>
</head>
<body>
  
  <audio id="myAudio" src="https://www.ampenlinea.com/wp-content/uploads/2025/01/GPP.mp3"></audio>
  
  <!-- Contenedor para alinear en una sola línea -->
  <div class="controls-container">
    <button id="decreaseSpeedBtn">-</button>
    <button id="playPauseBtn">GPP</button>
    <button id="increaseSpeedBtn">+</button>
    <div id="speedDisplay">1.0x</div> <!-- Velocidad en la misma línea -->
  </div>
  
  <script>
    const audio = document.getElementById('myAudio');
    const playPauseBtn = document.getElementById('playPauseBtn');
    const increaseSpeedBtn = document.getElementById('increaseSpeedBtn');
    const decreaseSpeedBtn = document.getElementById('decreaseSpeedBtn');
    const speedDisplay = document.getElementById('speedDisplay');

    let isPlaying = false;

    // Actualiza el texto que muestra la velocidad
    function updateSpeedDisplay() {
      speedDisplay.textContent = `${audio.playbackRate.toFixed(1)}x`;
    }

    // Al hacer clic en el botón Reproducir/Pausar
    playPauseBtn.onclick = () => {
      if (isPlaying) {
        audio.pause();
        isPlaying = false;
        playPauseBtn.textContent = "GPP"; // Texto cuando está en pausa
      } else {
        audio.play();
        isPlaying = true;
        playPauseBtn.textContent = "Pausar"; // Texto cuando está reproduciendo
      }
    };

    // Al hacer clic en el botón de +10% Velocidad
    increaseSpeedBtn.onclick = () => {
      if (audio.playbackRate < 3.0) {
        audio.playbackRate += 0.1;
        updateSpeedDisplay();
      }
    };

    // Al hacer clic en el botón de -10% Velocidad
    decreaseSpeedBtn.onclick = () => {
      if (audio.playbackRate > 0.5) {
        audio.playbackRate -= 0.1;
        updateSpeedDisplay();
      }
    };

    // Al cargar la página
    window.onload = () => {
      updateSpeedDisplay();
    };
  </script>
</body>
</html>
		</div>
				</div>
				</div>
				<div class="elementor-element elementor-element-97313be elementor-widget elementor-widget-html" data-id="97313be" data-element_type="widget" data-widget_type="html.default">
				<div class="elementor-widget-container">
			<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Modal con Pantalla Completa</title>
    <style>
        body {
            font-family: 'Arial', sans-serif;
            background-color: #f0f0f0;
            margin: 0;
            padding: 20px;
        }

        .container {
            max-width: 1000px;
            margin: 0 auto;
            padding: 20px;
            background-color: #fff;
            box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
            border-radius: 8px;
        }

        h1 {
            text-align: center;
            margin-bottom: 20px;
        }

        .pdf-container {
            position: relative;
            width: 100%;
            height: 800px; /* Ajusta la altura según tus necesidades */
            border: 1px solid #ccc;
            border-radius: 8px;
            overflow: hidden;
        }

        .pdf-container iframe {
            width: 100%;
            height: 100%;
            border: none;
        }

        .fullscreen-btn {
            position: absolute;
            top: 3px;
            right: 10px;
            padding: 8px 12px;
            background-color: #4CAF50;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 14px;
            transition: background-color 0.3s;
        }

        .fullscreen-btn:hover {
            background-color: #45a049;
        }

        @media (max-width: 768px) {
            .pdf-container {
                height: 500px; /* Altura reducida para tablets */
            }
        }

        @media (max-width: 480px) {
            .pdf-container {
                height: 300px; /* Altura reducida para móviles */
            }
        }
    </style>
</head>
<body>
    <div class="container">

        <div class="pdf-container" id="pdf-container">
            <iframe 
                src="https://www.ampenlinea.com/wp-content/uploads/2025/01/Teclado-4-SE.pdf"  
                allowfullscreen>
            </iframe>
            <button class="fullscreen-btn" id="fullscreen-btn">Pantalla Completa</button>
        </div>
    </div>

    <script>
        // Obtener referencias a los elementos
        const fullscreenBtn = document.getElementById('fullscreen-btn');
        const pdfContainer = document.getElementById('pdf-container');

        // Función para activar pantalla completa
        function toggleFullscreen() {
            if (
                document.fullscreenElement ||
                document.webkitFullscreenElement ||
                document.msFullscreenElement
            ) {
                // Salir de pantalla completa
                if (document.exitFullscreen) {
                    document.exitFullscreen();
                } else if (document.webkitExitFullscreen) { /* Safari */
                    document.webkitExitFullscreen();
                } else if (document.msExitFullscreen) { /* IE11 */
                    document.msExitFullscreen();
                }
            } else {
                // Entrar en pantalla completa
                if (pdfContainer.requestFullscreen) {
                    pdfContainer.requestFullscreen();
                } else if (pdfContainer.webkitRequestFullscreen) { /* Safari */
                    pdfContainer.webkitRequestFullscreen();
                } else if (pdfContainer.msRequestFullscreen) { /* IE11 */
                    pdfContainer.msRequestFullscreen();
                }
            }
        }

        // Evento de clic en el botón para alternar pantalla completa
        fullscreenBtn.addEventListener('click', toggleFullscreen);

        // Evento para actualizar el texto del botón según el estado de pantalla completa
        function updateFullscreenButton() {
            if (
                document.fullscreenElement === pdfContainer ||
                document.webkitFullscreenElement === pdfContainer ||
                document.msFullscreenElement === pdfContainer
            ) {
                fullscreenBtn.textContent = 'Salir de Pantalla Completa';
            } else {
                fullscreenBtn.textContent = 'Pantalla Completa';
            }
        }

        // Escuchar cambios en el estado de pantalla completa
        document.addEventListener('fullscreenchange', updateFullscreenButton);
        document.addEventListener('webkitfullscreenchange', updateFullscreenButton); // Safari
        document.addEventListener('MSFullscreenChange', updateFullscreenButton); // IE11
    </script>
</body>
</html>
		</div>
				</div>
				<div class="elementor-element elementor-element-141530e elementor-widget elementor-widget-template" data-id="141530e" data-element_type="widget" data-widget_type="template.default">
				<div class="elementor-widget-container">
					<div class="elementor-template">
					</div>
				</div>
				</div>
					</div>
				</div>
				</div>
		]]></content:encoded>
					
		
		
			</item>
		<item>
		<title>AMA TC 4-6-2 &#8211; Concierto final de teclado (REPASO 2)</title>
		<link>https://www.ampenlinea.com/courses/ama-teclado-n4/lessons/ama-tc-4-6-2-repaso-2/</link>
		
		<dc:creator><![CDATA[Henry Giron]]></dc:creator>
		<pubDate>Wed, 19 Feb 2025 20:16:37 +0000</pubDate>
				<category><![CDATA[AMA Teclado N4]]></category>
		<guid isPermaLink="false">https://www.ampenlinea.com/?post_type=sfwd-lessons&#038;p=57400</guid>

					<description><![CDATA[Análisis del concierto final Actividad Practicar el concierto final primero con acordes con ambas manos, luego incorpora la melodía con la mano izquierda en clave de fa, finalmente tócalo todo respetando los ritmos, melodías, acordes y símbolos del cifrado, usa la plataforma a 70bpm.]]></description>
										<content:encoded><![CDATA[		<div data-elementor-type="wp-post" data-elementor-id="57400" class="elementor elementor-57400" data-elementor-post-type="sfwd-lessons">
				<div class="elementor-element elementor-element-185512c e-flex e-con-boxed e-con e-parent" data-id="185512c" data-element_type="container">
					<div class="e-con-inner">
				<div class="elementor-element elementor-element-6a16f80 elementor-widget elementor-widget-shortcode" data-id="6a16f80" data-element_type="widget" data-widget_type="shortcode.default">
				<div class="elementor-widget-container">
					<div class="elementor-shortcode"> <!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Audio y Metrónomo</title>
  <style>
    body {
      font-family: sans-serif;
      margin: 0;
      background-color: #fafafa;
    }

    .toolbar {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 10px 15px;
      background-color: #fafafa;
      color: #333;
      border-bottom: 1px solid #ccc;
    }

    .toolbar .icons button {
      background: none;
      border: none;
      color: #333;
      font-size: 22px;
      cursor: pointer;
      margin-left: 15px;
    }

  .toolbar .icons img {
      height: 32px;
      width: 32px;
      cursor: pointer;
    }

    .modal {
      display: none;
      position: fixed;
      z-index: 1000;
      top: 0; left: 0;
      width: 100%; height: 100%;
      background-color: rgba(0, 0, 0, 0.6);
      justify-content: center;
      align-items: center;
    }

    .modal-content {
      background: #fff;
      padding: 20px;
      width: 90%;
      max-width: 480px;
      border-radius: 8px;
      position: relative;
    }

    .modal .close {
      position: absolute;
      top: 10px;
      right: 15px;
      font-size: 24px;
      cursor: pointer;
    }

    .modal iframe {
      width: 100%;
      height: 475px;
      border: none;
      border-radius: 4px;
    }

    .modal .audio-controls {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .modal .audio-controls audio {
      width: 100%;
    }
  </style>
</head>
<body>

  <div class="toolbar">
    <div class="logo">Herramientas AMP<img src="https://s.w.org/images/core/emoji/16.0.1/72x72/1f3b6.png" alt="🎶" class="wp-smiley" style="height: 1em; max-height: 1em;" /></div>
    <div class="icons">
      <img decoding="async" src="https://www.ampenlinea.com/wp-content/uploads/2025/06/brand-bandlab.svg" alt="Abrir Modales" onclick="abrirModal('audioModal')">
      <img decoding="async" src="https://www.ampenlinea.com/wp-content/uploads/2025/06/metronome.svg" alt="Abrir Metrónomo" onclick="abrirModal('metronomeModal')">
    
    </div>
  </div>

  <!-- MODAL AUDIO -->
  <div id="audioModal" class="modal">
    <div class="modal-content">
      <span class="close" onclick="cerrarModal('audioModal')">&times;</span>
      <h3>Selecciona un audio</h3>
      <div class="audio-controls">
        <select id="audioSelector" onchange="cambiarAudio(this.value)">
          <option value="https://www.ampenlinea.com/wp-content/uploads/2020/08/GPP-4213-C-Rock-Shuffle-80-bpm.mp3">GPP Rock Shuffle 80 bpm</option>
          <option value="https://www.ampenlinea.com/wp-content/uploads/2020/08/GPP-4213-B-Four-on-the-floor-80-bpm.mp3">GPP Four on the floor 80 bpm</option>
          <option value="https://www.ampenlinea.com/wp-content/uploads/2020/08/GPP-3411-Disco-80-bpm.mp3">GPP Disco 80 bpm</option>
          <option value="https://www.ampenlinea.com/wp-content/uploads/2020/08/GPP-3212-Hard-Rock-80-bpm.mp3">GPP Hard Rock 80 bpm</option>
          <option value="https://www.ampenlinea.com/wp-content/uploads/2020/08/GPP-219-8th-Note-Rock-80-bpm.mp3">GPP 8th Note Rock 80 bpm</option>
          <option value="https://www.ampenlinea.com/wp-content/uploads/2020/08/GPP-4213-A-16th-Note-Rock-85-bpm.mp3">GPP 16th Note Rock A 85 bpm</option>
          <option value="https://www.ampenlinea.com/wp-content/uploads/2020/08/GPP-4213-D-16th-Note-Rock-85-bpm.mp3">GPP 16th Note Rock B 85 bpm</option>
          <option value="https://www.ampenlinea.com/wp-content/uploads/2020/08/GPP-5512-Basic-RB-85-bpm.mp3">GPP Basic R&B 85 bpm</option>
          <option value="https://www.ampenlinea.com/wp-content/uploads/2020/08/GPP-415-Four-on-the-floor-85-bpm.mp3">GPP Four on the floor 85 bpm</option>
          <option value="https://www.ampenlinea.com/wp-content/uploads/2020/08/GPP-3112-8th-Note-Rock-90-bpm.mp3">GPP 8th Note Rock A 90 bpm</option>
          <option value="https://www.ampenlinea.com/wp-content/uploads/2020/08/GPP-338-8th-Note-Rock-90-bpm.mp3">GPP 8th Note Rock B 90 bpm</option>
          <option value="https://www.ampenlinea.com/wp-content/uploads/2020/08/GPP-3116-Disco-100-bpm.mp3">GPP Disco 100 bpm</option>
          <option value="https://www.ampenlinea.com/wp-content/uploads/2020/08/GPP-347-Bossa-Nova-100-bpm.mp3">GPP Bossa Nova 100 bpm</option>
          <option value="https://www.ampenlinea.com/wp-content/uploads/2020/08/GPP-329-Soca-100-bpm.mp3">GPP 329 Soca 100 bpm</option>
          <option value="https://www.ampenlinea.com/wp-content/uploads/2020/08/GPP-253-8th-Note-Rock-100-bpm.mp3">GPP 8th Note Rock 100 bpm</option>
          <option value="https://www.ampenlinea.com/wp-content/uploads/2020/08/GPP-235-8th-Note-Rock-100-bpm.mp3">GPP 8th Note Rock 100 bpm</option>
          <option value="https://www.ampenlinea.com/wp-content/uploads/2020/08/GPP-159-Hard-Rock-100-bpm.mp3">GPP Hard Rock 100 bpm</option>
          <option value="https://www.ampenlinea.com/wp-content/uploads/2020/08/GPP-156-16th-Note-Syncopated-Kick-100-bpm.mp3">GPP 16th Note Syncopated Kick 100 bpm</option>
          <option value="https://www.ampenlinea.com/wp-content/uploads/2020/08/GPP-147-Four-on-the-floor-100-bpm.mp3">GPP Four on the floor 100 bpm</option>
          <option value="https://www.ampenlinea.com/wp-content/uploads/2020/08/GPP-146-Half-time-Shuffle-100-bpm.mp3">GPP Half time Shuffle 100 bpm</option>

        </select>

        <audio id="audioPlayer" controls>
          <source src="https://www.ampenlinea.com/wp-content/uploads/2020/08/GPP-4213-C-Rock-Shuffle-80-bpm.mp3" type="audio/mp3">
        </audio>

        <label for="velocidadAudio">Velocidad: <span id="velocidadValor">1.00x</span></label>
        <input type="range" id="velocidadAudio" min="0.5" max="2" step="0.05" value="1" oninput="ajustarVelocidad(this.value)">
      </div>
    </div>
  </div>

  <!-- MODAL METRONOMO -->
  <div id="metronomeModal" class="modal">
    <div class="modal-content">
      <span class="close" onclick="cerrarModal('metronomeModal')">&times;</span>
      <iframe 
        src="https://guitarapp.com/metronome.html?embed=true&tempo=120&timeSignature=2&pattern=1&theme=light"
        title="Metrónomo Online">
      </iframe>
    </div>
  </div>

  <script>
    const audioPlayer = document.getElementById('audioPlayer');
    const velocidadValor = document.getElementById('velocidadValor');

    function cambiarAudio(src) {
      audioPlayer.src = src;
      audioPlayer.playbackRate = parseFloat(document.getElementById('velocidadAudio').value);
      audioPlayer.play();
    }

    function ajustarVelocidad(speed) {
      velocidadValor.textContent = parseFloat(speed).toFixed(2) + 'x';
      audioPlayer.playbackRate = parseFloat(speed);
    }

    function abrirModal(id) {
      document.getElementById(id).style.display = 'flex';
    }

    function cerrarModal(id) {
      document.getElementById(id).style.display = 'none';
    }

    window.addEventListener('click', (e) => {
      document.querySelectorAll('.modal').forEach(modal => {
        if (e.target === modal) modal.style.display = 'none';
      });
    });
  </script>

</body>
</html>
</div>
				</div>
				</div>
		<!-- dce invisible element f6a81d0 --><style>
	/* --- Ajustes para usar varios shortcodes en línea --- */
.amp2 {
  display: inline-block;  /* Hace que el widget sea en línea */
  vertical-align: middle; /* Alinea botones al centro */
  margin: 4px;            /* Espaciado opcional entre botones */
}

.amp2-open {
  display: inline-block;  /* Evita que se estire como bloque */
  white-space: nowrap;    /* Mantiene ícono y texto juntos */
}

/* ===== Modal compacto (ajusta --w/--h para tamaño) ===== */
.amp2{font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif}
.amp2-open{background:#6d5ef8;color:#fff;border:0;border-radius:10px;padding:8px 14px;font-weight:600;cursor:pointer}
.amp2-overlay{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:9998}
.amp2-modal{position:fixed;inset:0;display:grid;place-items:center;z-index:9999}
/* Forzar oculto inicial en algunos temas/constructores */
.amp2 [hidden]{display:none !important}
.amp2-card{width:min(640px,95vw);background:#101225;color:#f7f8ff;border-radius:14px;box-shadow:0 20px 60px rgba(0,0,0,.55);overflow:hidden}
.amp2-header{display:flex;justify-content:space-between;align-items:center;padding:10px 12px;border-bottom:1px solid rgba(255,255,255,.08)}
.amp2-close{background:transparent;border:0;color:#fff;font-size:18px;cursor:pointer}
.amp2-controls{display:flex;flex-wrap:wrap;gap:8px;padding:10px 12px;font-size:12px}
.amp2-controls select,.amp2-controls button{height:32px;border-radius:8px;border:1px solid rgba(255,255,255,.15);background:#171a2b;color:#fff;padding:0 10px;cursor:pointer}
.amp2-clear{background:transparent}

.amp2-kb{--w:36px; --h:136px; --bw:22px; --bh:84px; position:relative; padding:12px; background:#0b0d1b}
.amp2-whites{display:flex;position:relative;width:calc(var(--w)*14);height:var(--h);margin:0 auto;z-index:1}
.amp2-blacks{position:absolute;left:50%;top:12px;transform:translateX(-50%);width:calc(var(--w)*14);height:var(--h);pointer-events:none;z-index:2}

.key{position:relative;user-select:none;-webkit-user-select:none;touch-action:manipulation}
.key.white{width:var(--w);height:var(--h);background:linear-gradient(#fff,#ececec);border:1px solid #bfbfbf;border-bottom-left-radius:6px;border-bottom-right-radius:6px;box-sizing:border-box;cursor:pointer}
.key.black{position:absolute;width:var(--bw);height:var(--bh);background:linear-gradient(#222,#111);border:1px solid #000;border-bottom-left-radius:4px;border-bottom-right-radius:4px;box-shadow:0 2px 6px rgba(0,0,0,.6);cursor:pointer;pointer-events:auto}
.key.active{filter:brightness(1.25)}
.key .dot{position:absolute;left:50%;transform:translateX(-50%);bottom:20px;width:8px;height:8px;border-radius:50%;opacity:0}
.key.root .dot{background:#ffcc00;opacity:1}
.key.member .dot{background:#2c8cff;opacity:1}
.key.selected .dot{background:#00d084;opacity:1}
.key .label{position:absolute;left:50%;transform:translateX(-50%);bottom:4px;font:600 11px/1 system-ui,-apple-system,Segoe UI,Roboto,sans-serif;color:#222}
.key.black .label{color:#e8e8e8;bottom:6px;font-weight:500}
</style><style>
  #btnShowSheet {
    padding: 12px 20px;
    font-size: 18px;
    background-color: #1a1a1a;
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
  }

  .modal {
    display: none;
    position: fixed;
    z-index: 9999;
    inset: 0;
    background: rgba(0, 0, 0, 0.95);
  }

  .modal-fullscreen {
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0;
    overflow: hidden;
  }

  .close-btn {
    position: absolute;
    top: 20px;
    right: 30px;
    background: transparent;
    border: none;
    font-size: 36px;
    color: #fff;
    cursor: pointer;
    z-index: 10000;
  }

  .sheet-container {
    position: relative;
    max-width: 95vw;
    max-height: 90vh;
    width: auto;
    height: auto;
    overflow: hidden;
  }

  #sheetImage {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 8px;
  }

  #drawCanvas {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
    pointer-events: auto;
  }
</style><div class="elementor-element elementor-element-96f7c62 e-con-full e-flex e-con e-child" data-id="96f7c62" data-element_type="container">
				<div class="elementor-element elementor-element-7e65a3c elementor-widget__width-initial elementor-widget elementor-widget-html" data-id="7e65a3c" data-element_type="widget" data-widget_type="html.default">
				<div class="elementor-widget-container">
			
<!-- &#x1f7e8; SUBTÍTULO 1 + PÁRRAFO -->
<section class="bloque-leccion">
  <h2>Análisis del concierto final</h2>

  <p></p>
  
  
  
  <img decoding="async" src="https://www.ampenlinea.com/wp-content/uploads/2025/08/tc-4-6-2.png" alt="Forma basica" class="imagen-responsiva">
</section>

<!--&#x1f7e8; Actividad + PÁRRAFO -->
<section class="bloque-leccion">
  <h1>Actividad</h1>
  <p>Practicar el concierto final primero con acordes con ambas manos, luego incorpora la melodía con la mano izquierda en clave de fa, finalmente tócalo todo respetando los ritmos, melodías, acordes y símbolos del cifrado, usa la plataforma a 70bpm.</p>
  

</section>

<!-- &#x1f3a8; ESTILO PERSONALIZADO -->
<style>
  .header-leccion {
    background-color: #f2f2f2;
    padding: 10px;
    font-size: 16px;
    text-align: center;
    border-bottom: 2px solid #ccc;
    margin-bottom: 20px;
  }

  .titulo-leccion {
    font-size: 28px;
    font-weight: bold;
    text-align: center;
    color: #b30808;
    margin-bottom: 30px;
  }

  .bloque-leccion {
    margin: 30px 0;
  }

  .bloque-leccion h3 {
    font-size: 22px;
    color: #222;
    margin-bottom: 10px;
  }

  .bloque-leccion p {
    font-size: 18px;
    line-height: 1.6;
    color: #444;
  }

  .imagen-responsiva {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 15px auto;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
  }
  
.bloque-leccion {
  user-select: none;           /* Desactiva selección en navegadores modernos */
  -webkit-user-select: none;   /* Chrome/Safari */
  -moz-user-select: none;      /* Firefox */
  -ms-user-select: none;       /* Internet Explorer/Edge */
}


</style>

<script>
  // Bloquea clic derecho
  document.addEventListener('contextmenu', function (e) {
    e.preventDefault();
  });

  // Bloquea teclas como Ctrl+C, Ctrl+U, Ctrl+S, Ctrl+Shift+I (inspeccionar)
  document.addEventListener('keydown', function (e) {
    if ((e.ctrlKey && ['c', 'u', 's'].includes(e.key.toLowerCase())) ||
        (e.ctrlKey && e.shiftKey && e.key.toLowerCase() === 'i')) {
      e.preventDefault();
    }
  });
</script>

		</div>
				</div>
				</div>
		<div class="elementor-element elementor-element-112d63f e-con-full e-flex e-con e-child" data-id="112d63f" data-element_type="container">
				<div class="elementor-element elementor-element-e3e8691 elementor-widget elementor-widget-shortcode" data-id="e3e8691" data-element_type="widget" data-widget_type="shortcode.default">
				<div class="elementor-widget-container">
					<div class="elementor-shortcode"><p>Debes iniciar sesión para ver este contenido.</p></div>
				</div>
				</div>
				</div>
					</div>
				</div>
				</div>
		]]></content:encoded>
					
		
		
			</item>
		<item>
		<title>AMA TC 4-5-7 &#8211; Taller práctico #6 &#8211; &#8220;Ocaso con luna&#8221;</title>
		<link>https://www.ampenlinea.com/lessons/ama-tc-4-5-7-taller-practico-6-ocaso-con-luna/</link>
		
		<dc:creator><![CDATA[Henry Giron]]></dc:creator>
		<pubDate>Thu, 30 Jan 2025 19:33:53 +0000</pubDate>
				<category><![CDATA[AMA Teclado N4]]></category>
		<guid isPermaLink="false">https://www.ampenlinea.com/?post_type=sfwd-lessons&#038;p=55609</guid>

					<description><![CDATA[]]></description>
										<content:encoded><![CDATA[]]></content:encoded>
					
		
		
			</item>
		<item>
		<title>AMA TC 4-5-9 &#8211; Repaso de los acordes vistos en este nivel</title>
		<link>https://www.ampenlinea.com/courses/ama-teclado-n4/lessons/ama-tc-4-5-9/</link>
		
		<dc:creator><![CDATA[Henry Giron]]></dc:creator>
		<pubDate>Thu, 30 Jan 2025 19:33:43 +0000</pubDate>
				<category><![CDATA[AMA Teclado N4]]></category>
		<guid isPermaLink="false">https://www.ampenlinea.com/?post_type=sfwd-lessons&#038;p=55608</guid>

					<description><![CDATA[Resumen de los acordes vistos en este nivel Para los acordes menores de este nivel usa el sistema de transformación que viste en las lecciones anteriores. Actividad Tocar los acordes de esta lección uno por uno en figuras de redonda en 70bpm.]]></description>
										<content:encoded><![CDATA[		<div data-elementor-type="wp-post" data-elementor-id="55608" class="elementor elementor-55608" data-elementor-post-type="sfwd-lessons">
				<div class="elementor-element elementor-element-bd3e459 e-flex e-con-boxed e-con e-parent" data-id="bd3e459" data-element_type="container">
					<div class="e-con-inner">
				<div class="elementor-element elementor-element-d611ad6 elementor-widget elementor-widget-shortcode" data-id="d611ad6" data-element_type="widget" data-widget_type="shortcode.default">
				<div class="elementor-widget-container">
					<div class="elementor-shortcode"> <!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Audio y Metrónomo</title>
  <style>
    body {
      font-family: sans-serif;
      margin: 0;
      background-color: #fafafa;
    }

    .toolbar {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 10px 15px;
      background-color: #fafafa;
      color: #333;
      border-bottom: 1px solid #ccc;
    }

    .toolbar .icons button {
      background: none;
      border: none;
      color: #333;
      font-size: 22px;
      cursor: pointer;
      margin-left: 15px;
    }

  .toolbar .icons img {
      height: 32px;
      width: 32px;
      cursor: pointer;
    }

    .modal {
      display: none;
      position: fixed;
      z-index: 1000;
      top: 0; left: 0;
      width: 100%; height: 100%;
      background-color: rgba(0, 0, 0, 0.6);
      justify-content: center;
      align-items: center;
    }

    .modal-content {
      background: #fff;
      padding: 20px;
      width: 90%;
      max-width: 480px;
      border-radius: 8px;
      position: relative;
    }

    .modal .close {
      position: absolute;
      top: 10px;
      right: 15px;
      font-size: 24px;
      cursor: pointer;
    }

    .modal iframe {
      width: 100%;
      height: 475px;
      border: none;
      border-radius: 4px;
    }

    .modal .audio-controls {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .modal .audio-controls audio {
      width: 100%;
    }
  </style>
</head>
<body>

  <div class="toolbar">
    <div class="logo">Herramientas AMP<img src="https://s.w.org/images/core/emoji/16.0.1/72x72/1f3b6.png" alt="🎶" class="wp-smiley" style="height: 1em; max-height: 1em;" /></div>
    <div class="icons">
      <img decoding="async" src="https://www.ampenlinea.com/wp-content/uploads/2025/06/brand-bandlab.svg" alt="Abrir Modales" onclick="abrirModal('audioModal')">
      <img decoding="async" src="https://www.ampenlinea.com/wp-content/uploads/2025/06/metronome.svg" alt="Abrir Metrónomo" onclick="abrirModal('metronomeModal')">
    
    </div>
  </div>

  <!-- MODAL AUDIO -->
  <div id="audioModal" class="modal">
    <div class="modal-content">
      <span class="close" onclick="cerrarModal('audioModal')">&times;</span>
      <h3>Selecciona un audio</h3>
      <div class="audio-controls">
        <select id="audioSelector" onchange="cambiarAudio(this.value)">
          <option value="https://www.ampenlinea.com/wp-content/uploads/2020/08/GPP-4213-C-Rock-Shuffle-80-bpm.mp3">GPP Rock Shuffle 80 bpm</option>
          <option value="https://www.ampenlinea.com/wp-content/uploads/2020/08/GPP-4213-B-Four-on-the-floor-80-bpm.mp3">GPP Four on the floor 80 bpm</option>
          <option value="https://www.ampenlinea.com/wp-content/uploads/2020/08/GPP-3411-Disco-80-bpm.mp3">GPP Disco 80 bpm</option>
          <option value="https://www.ampenlinea.com/wp-content/uploads/2020/08/GPP-3212-Hard-Rock-80-bpm.mp3">GPP Hard Rock 80 bpm</option>
          <option value="https://www.ampenlinea.com/wp-content/uploads/2020/08/GPP-219-8th-Note-Rock-80-bpm.mp3">GPP 8th Note Rock 80 bpm</option>
          <option value="https://www.ampenlinea.com/wp-content/uploads/2020/08/GPP-4213-A-16th-Note-Rock-85-bpm.mp3">GPP 16th Note Rock A 85 bpm</option>
          <option value="https://www.ampenlinea.com/wp-content/uploads/2020/08/GPP-4213-D-16th-Note-Rock-85-bpm.mp3">GPP 16th Note Rock B 85 bpm</option>
          <option value="https://www.ampenlinea.com/wp-content/uploads/2020/08/GPP-5512-Basic-RB-85-bpm.mp3">GPP Basic R&B 85 bpm</option>
          <option value="https://www.ampenlinea.com/wp-content/uploads/2020/08/GPP-415-Four-on-the-floor-85-bpm.mp3">GPP Four on the floor 85 bpm</option>
          <option value="https://www.ampenlinea.com/wp-content/uploads/2020/08/GPP-3112-8th-Note-Rock-90-bpm.mp3">GPP 8th Note Rock A 90 bpm</option>
          <option value="https://www.ampenlinea.com/wp-content/uploads/2020/08/GPP-338-8th-Note-Rock-90-bpm.mp3">GPP 8th Note Rock B 90 bpm</option>
          <option value="https://www.ampenlinea.com/wp-content/uploads/2020/08/GPP-3116-Disco-100-bpm.mp3">GPP Disco 100 bpm</option>
          <option value="https://www.ampenlinea.com/wp-content/uploads/2020/08/GPP-347-Bossa-Nova-100-bpm.mp3">GPP Bossa Nova 100 bpm</option>
          <option value="https://www.ampenlinea.com/wp-content/uploads/2020/08/GPP-329-Soca-100-bpm.mp3">GPP 329 Soca 100 bpm</option>
          <option value="https://www.ampenlinea.com/wp-content/uploads/2020/08/GPP-253-8th-Note-Rock-100-bpm.mp3">GPP 8th Note Rock 100 bpm</option>
          <option value="https://www.ampenlinea.com/wp-content/uploads/2020/08/GPP-235-8th-Note-Rock-100-bpm.mp3">GPP 8th Note Rock 100 bpm</option>
          <option value="https://www.ampenlinea.com/wp-content/uploads/2020/08/GPP-159-Hard-Rock-100-bpm.mp3">GPP Hard Rock 100 bpm</option>
          <option value="https://www.ampenlinea.com/wp-content/uploads/2020/08/GPP-156-16th-Note-Syncopated-Kick-100-bpm.mp3">GPP 16th Note Syncopated Kick 100 bpm</option>
          <option value="https://www.ampenlinea.com/wp-content/uploads/2020/08/GPP-147-Four-on-the-floor-100-bpm.mp3">GPP Four on the floor 100 bpm</option>
          <option value="https://www.ampenlinea.com/wp-content/uploads/2020/08/GPP-146-Half-time-Shuffle-100-bpm.mp3">GPP Half time Shuffle 100 bpm</option>

        </select>

        <audio id="audioPlayer" controls>
          <source src="https://www.ampenlinea.com/wp-content/uploads/2020/08/GPP-4213-C-Rock-Shuffle-80-bpm.mp3" type="audio/mp3">
        </audio>

        <label for="velocidadAudio">Velocidad: <span id="velocidadValor">1.00x</span></label>
        <input type="range" id="velocidadAudio" min="0.5" max="2" step="0.05" value="1" oninput="ajustarVelocidad(this.value)">
      </div>
    </div>
  </div>

  <!-- MODAL METRONOMO -->
  <div id="metronomeModal" class="modal">
    <div class="modal-content">
      <span class="close" onclick="cerrarModal('metronomeModal')">&times;</span>
      <iframe 
        src="https://guitarapp.com/metronome.html?embed=true&tempo=120&timeSignature=2&pattern=1&theme=light"
        title="Metrónomo Online">
      </iframe>
    </div>
  </div>

  <script>
    const audioPlayer = document.getElementById('audioPlayer');
    const velocidadValor = document.getElementById('velocidadValor');

    function cambiarAudio(src) {
      audioPlayer.src = src;
      audioPlayer.playbackRate = parseFloat(document.getElementById('velocidadAudio').value);
      audioPlayer.play();
    }

    function ajustarVelocidad(speed) {
      velocidadValor.textContent = parseFloat(speed).toFixed(2) + 'x';
      audioPlayer.playbackRate = parseFloat(speed);
    }

    function abrirModal(id) {
      document.getElementById(id).style.display = 'flex';
    }

    function cerrarModal(id) {
      document.getElementById(id).style.display = 'none';
    }

    window.addEventListener('click', (e) => {
      document.querySelectorAll('.modal').forEach(modal => {
        if (e.target === modal) modal.style.display = 'none';
      });
    });
  </script>

</body>
</html>
</div>
				</div>
				</div>
		<!-- dce invisible element 7692ca3 --><style>
	/* --- Ajustes para usar varios shortcodes en línea --- */
.amp2 {
  display: inline-block;  /* Hace que el widget sea en línea */
  vertical-align: middle; /* Alinea botones al centro */
  margin: 4px;            /* Espaciado opcional entre botones */
}

.amp2-open {
  display: inline-block;  /* Evita que se estire como bloque */
  white-space: nowrap;    /* Mantiene ícono y texto juntos */
}

/* ===== Modal compacto (ajusta --w/--h para tamaño) ===== */
.amp2{font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif}
.amp2-open{background:#6d5ef8;color:#fff;border:0;border-radius:10px;padding:8px 14px;font-weight:600;cursor:pointer}
.amp2-overlay{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:9998}
.amp2-modal{position:fixed;inset:0;display:grid;place-items:center;z-index:9999}
/* Forzar oculto inicial en algunos temas/constructores */
.amp2 [hidden]{display:none !important}
.amp2-card{width:min(640px,95vw);background:#101225;color:#f7f8ff;border-radius:14px;box-shadow:0 20px 60px rgba(0,0,0,.55);overflow:hidden}
.amp2-header{display:flex;justify-content:space-between;align-items:center;padding:10px 12px;border-bottom:1px solid rgba(255,255,255,.08)}
.amp2-close{background:transparent;border:0;color:#fff;font-size:18px;cursor:pointer}
.amp2-controls{display:flex;flex-wrap:wrap;gap:8px;padding:10px 12px;font-size:12px}
.amp2-controls select,.amp2-controls button{height:32px;border-radius:8px;border:1px solid rgba(255,255,255,.15);background:#171a2b;color:#fff;padding:0 10px;cursor:pointer}
.amp2-clear{background:transparent}

.amp2-kb{--w:36px; --h:136px; --bw:22px; --bh:84px; position:relative; padding:12px; background:#0b0d1b}
.amp2-whites{display:flex;position:relative;width:calc(var(--w)*14);height:var(--h);margin:0 auto;z-index:1}
.amp2-blacks{position:absolute;left:50%;top:12px;transform:translateX(-50%);width:calc(var(--w)*14);height:var(--h);pointer-events:none;z-index:2}

.key{position:relative;user-select:none;-webkit-user-select:none;touch-action:manipulation}
.key.white{width:var(--w);height:var(--h);background:linear-gradient(#fff,#ececec);border:1px solid #bfbfbf;border-bottom-left-radius:6px;border-bottom-right-radius:6px;box-sizing:border-box;cursor:pointer}
.key.black{position:absolute;width:var(--bw);height:var(--bh);background:linear-gradient(#222,#111);border:1px solid #000;border-bottom-left-radius:4px;border-bottom-right-radius:4px;box-shadow:0 2px 6px rgba(0,0,0,.6);cursor:pointer;pointer-events:auto}
.key.active{filter:brightness(1.25)}
.key .dot{position:absolute;left:50%;transform:translateX(-50%);bottom:20px;width:8px;height:8px;border-radius:50%;opacity:0}
.key.root .dot{background:#ffcc00;opacity:1}
.key.member .dot{background:#2c8cff;opacity:1}
.key.selected .dot{background:#00d084;opacity:1}
.key .label{position:absolute;left:50%;transform:translateX(-50%);bottom:4px;font:600 11px/1 system-ui,-apple-system,Segoe UI,Roboto,sans-serif;color:#222}
.key.black .label{color:#e8e8e8;bottom:6px;font-weight:500}
</style><style>
  #btnShowSheet {
    padding: 12px 20px;
    font-size: 18px;
    background-color: #1a1a1a;
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
  }

  .modal {
    display: none;
    position: fixed;
    z-index: 9999;
    inset: 0;
    background: rgba(0, 0, 0, 0.95);
  }

  .modal-fullscreen {
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0;
    overflow: hidden;
  }

  .close-btn {
    position: absolute;
    top: 20px;
    right: 30px;
    background: transparent;
    border: none;
    font-size: 36px;
    color: #fff;
    cursor: pointer;
    z-index: 10000;
  }

  .sheet-container {
    position: relative;
    max-width: 95vw;
    max-height: 90vh;
    width: auto;
    height: auto;
    overflow: hidden;
  }

  #sheetImage {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 8px;
  }

  #drawCanvas {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
    pointer-events: auto;
  }
</style><div class="elementor-element elementor-element-5fb05bd e-con-full e-flex e-con e-child" data-id="5fb05bd" data-element_type="container">
				<div class="elementor-element elementor-element-3474612 elementor-widget__width-initial elementor-widget elementor-widget-html" data-id="3474612" data-element_type="widget" data-widget_type="html.default">
				<div class="elementor-widget-container">
			
<!-- &#x1f7e8; SUBTÍTULO 1 + PÁRRAFO -->
<section class="bloque-leccion">
  <h2>Resumen de los acordes vistos en este nivel</h2>

  <p>Para los acordes menores de este nivel usa el sistema de transformación que viste en las lecciones anteriores.</p>
  
  
  
  <img decoding="async" src="https://www.ampenlinea.com/wp-content/uploads/2025/08/tc-4-5-9.png" alt="Forma basica" class="imagen-responsiva">
</section>

<!--&#x1f7e8; Actividad + PÁRRAFO -->
<section class="bloque-leccion">
  <h1>Actividad</h1>
  <p>Tocar los acordes de esta lección uno por uno en figuras de redonda en 70bpm.</p>
  

</section>

<!-- &#x1f3a8; ESTILO PERSONALIZADO -->
<style>
  .header-leccion {
    background-color: #f2f2f2;
    padding: 10px;
    font-size: 16px;
    text-align: center;
    border-bottom: 2px solid #ccc;
    margin-bottom: 20px;
  }

  .titulo-leccion {
    font-size: 28px;
    font-weight: bold;
    text-align: center;
    color: #b30808;
    margin-bottom: 30px;
  }

  .bloque-leccion {
    margin: 30px 0;
  }

  .bloque-leccion h3 {
    font-size: 22px;
    color: #222;
    margin-bottom: 10px;
  }

  .bloque-leccion p {
    font-size: 18px;
    line-height: 1.6;
    color: #444;
  }

  .imagen-responsiva {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 15px auto;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
  }
  
.bloque-leccion {
  user-select: none;           /* Desactiva selección en navegadores modernos */
  -webkit-user-select: none;   /* Chrome/Safari */
  -moz-user-select: none;      /* Firefox */
  -ms-user-select: none;       /* Internet Explorer/Edge */
}


</style>

<script>
  // Bloquea clic derecho
  document.addEventListener('contextmenu', function (e) {
    e.preventDefault();
  });

  // Bloquea teclas como Ctrl+C, Ctrl+U, Ctrl+S, Ctrl+Shift+I (inspeccionar)
  document.addEventListener('keydown', function (e) {
    if ((e.ctrlKey && ['c', 'u', 's'].includes(e.key.toLowerCase())) ||
        (e.ctrlKey && e.shiftKey && e.key.toLowerCase() === 'i')) {
      e.preventDefault();
    }
  });
</script>

		</div>
				</div>
				</div>
		<div class="elementor-element elementor-element-479aa85 e-con-full e-flex e-con e-child" data-id="479aa85" data-element_type="container">
				<div class="elementor-element elementor-element-4237b86 elementor-widget elementor-widget-shortcode" data-id="4237b86" data-element_type="widget" data-widget_type="shortcode.default">
				<div class="elementor-widget-container">
					<div class="elementor-shortcode"><p>Debes iniciar sesión para ver este contenido.</p></div>
				</div>
				</div>
				</div>
					</div>
				</div>
				</div>
		]]></content:encoded>
					
		
		
			</item>
		<item>
		<title>AMA TC 4-5-8 &#8211; Acordes en las canciones #4/ extracto de canciones</title>
		<link>https://www.ampenlinea.com/lessons/ama-tc-4-5-8-acordes-en-las-canciones-4-extracto-de-canciones-2/</link>
		
		<dc:creator><![CDATA[Henry Giron]]></dc:creator>
		<pubDate>Thu, 30 Jan 2025 19:33:32 +0000</pubDate>
				<category><![CDATA[AMA Teclado N4]]></category>
		<guid isPermaLink="false">https://www.ampenlinea.com/?post_type=sfwd-lessons&#038;p=55601</guid>

					<description><![CDATA[Modal con Metrónomo Metrónomo &#215; Videos en Pop-Up TPA AMP Teclado 4-1-6 / Mi dulce chica AMP Teclado 4-1-10 / Canción #1 &#8211; E Maj7 AMP Teclado 4-1-11 / Imagine AMP Teclado 4-2-7 / Extracto: Angel AMP Teclado 4-2-7 / Extracto: Something AMP Teclado 4-2-7 / Extracto: What’s going on AMP Teclado 4-2-10 / Canción &#8230;<p class="read-more"> <a class="" href="https://www.ampenlinea.com/lessons/ama-tc-4-5-8-acordes-en-las-canciones-4-extracto-de-canciones-2/"> <span class="screen-reader-text">AMA TC 4-5-8 &#8211; Acordes en las canciones #4/ extracto de canciones</span> Leer más &#187;</a></p>]]></description>
										<content:encoded><![CDATA[		<div data-elementor-type="wp-post" data-elementor-id="55601" class="elementor elementor-55601" data-elementor-post-type="sfwd-lessons">
				<div class="elementor-element elementor-element-34e2c21 e-flex e-con-boxed e-con e-parent" data-id="34e2c21" data-element_type="container">
					<div class="e-con-inner">
		<div class="elementor-element elementor-element-41571ec e-con-full e-grid e-con e-child" data-id="41571ec" data-element_type="container">
				<div class="elementor-element elementor-element-3cf57e9 elementor-widget elementor-widget-global elementor-global-49842 elementor-widget-html" data-id="3cf57e9" data-element_type="widget" data-widget_type="html.default">
				<div class="elementor-widget-container">
			<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>Modal con Metrónomo</title>
  <style>
    /* Botón para abrir el modal */
    #openMetronomeBtn {
      padding: 10px 20px;
      font-size: 16px;
      cursor: pointer;
      background-color: #28a745;
      color: white;
      border: none;
      border-radius: 5px;
    }

    /* Estilos para el modal */
    .modal {
      display: none; /* Oculto por defecto */
      position: fixed;
      z-index: 1000;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.5); /* Fondo semi-transparente */
      justify-content: center;
      align-items: center;
    }

    /* Contenido del modal */
    .modal-content {
      background-color: #fff;
      margin: auto;
      padding: 20px;
      border: 1px solid #888;
      width: 400px;
      border-radius: 8px;
      position: relative;
    }

    /* Botón de cierre */
    .close {
      color: #aaa;
      position: absolute;
      top: 10px;
      right: 15px;
      font-size: 28px;
      font-weight: bold;
      cursor: pointer;
    }

    .close:hover,
    .close:focus {
      color: black;
    }
  </style>
</head>
<body>

  <!-- Botón para abrir el modal -->
  <button id="openMetronomeBtn">Metrónomo</button>

  <!-- Modal -->
  <div id="metronomeModal" class="modal">
    <div class="modal-content">
      <!-- Botón de cierre -->
      <span class="close">&times;</span>

      <!-- Iframe del metrónomo -->
      <iframe 
        src="https://guitarapp.com/metronome.html?embed=true&tempo=120&timeSignature=2&pattern=1&theme=light" 
        title="Online Metronome" 
        scrolling="no"
        style="width: 100%; height: 475px; border: none; border-radius: 4px;">
      </iframe>
    </div>
  </div>

  <script>
    // Obtener elementos
    const modal = document.getElementById("metronomeModal");
    const btn = document.getElementById("openMetronomeBtn");
    const closeBtn = document.querySelector(".close");

    // Mostrar el modal al hacer clic en el botón
    btn.addEventListener("click", () => {
      modal.style.display = "flex"; // Usar flex para centrar el contenido
    });

    // Cerrar el modal al hacer clic en el botón de cerrar (X)
    closeBtn.addEventListener("click", () => {
      modal.style.display = "none";
    });

    // Cerrar el modal al hacer clic fuera del contenido
    window.addEventListener("click", (event) => {
      if (event.target === modal) {
        modal.style.display = "none";
      }
    });
  </script>

</body>
</html>
		</div>
				</div>
				<div class="elementor-element elementor-element-ceb05d6 elementor-widget elementor-widget-html" data-id="ceb05d6" data-element_type="widget" data-widget_type="html.default">
				<div class="elementor-widget-container">
			<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>Videos en Pop-Up</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      padding: 20px;
    }

    /* Lista desplegable */
    select {
      padding: 10px;
      font-size: 16px;
      border: 1px solid #ccc;
      border-radius: 5px;
      margin-bottom: 20px;
      width: 100%; /* Se ajusta al ancho del contenedor */
      max-width: 400px; /* Ancho máximo */
    }

    /* Modal */
    .modal {
      display: none; /* Oculto por defecto */
      position: fixed;
      z-index: 1000;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.6); /* Fondo semi-transparente */
      justify-content: center;
      align-items: center;
    }

    /* Contenido del modal */
    .modal-content {
      background-color: white;
      border-radius: 8px;
      padding: 20px;
      width: 80%;
      max-width: 800px;
      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
      position: relative;
    }

    iframe {
      width: 100%;
      height: 450px;
      border: none;
      border-radius: 5px;
    }

    /* Botón de cierre */
    .close {
      position: absolute;
      top: 10px;
      right: 15px;
      font-size: 30px;
      font-weight: bold;
      color: #aaa;
      cursor: pointer;
      transition: color 0.3s;
    }

    .close:hover {
      color: black;
    }
  </style>
</head>
<body>


  <!-- Lista desplegable -->
  <select id="videoSelect">
    <option value="" selected disabled>TPA</option>
    <option value="https://player.vimeo.com/video/1020233888?h=2a574b7b6e">
      AMP Teclado 4-1-6 / Mi dulce chica
    </option>
    <option value="https://player.vimeo.com/video/1020233952?h=18c2f4c989">
      AMP Teclado 4-1-10 / Canción #1 - E Maj7
    </option>
    <option value="https://player.vimeo.com/video/1020234021?h=9768a23758">
      AMP Teclado 4-1-11 / Imagine
    </option>
    <option value="https://player.vimeo.com/video/1020234083?h=01bffbed09">
      AMP Teclado 4-2-7 / Extracto: Angel
    </option>
    <option value="https://player.vimeo.com/video/1020234111?h=734bd2b770">
      AMP Teclado 4-2-7 / Extracto: Something
    </option>
    <option value="https://player.vimeo.com/video/1020234159?h=f5cf8fb6c2">
      AMP Teclado 4-2-7 / Extracto: What’s going on
    </option>
    <option value="https://player.vimeo.com/video/1020234212?h=bcaedb9db0">
      AMP Teclado 4-2-10 / Canción #2 - A Maj7
    </option>
    <option value="https://player.vimeo.com/video/1020234332?h=022ec33ac9">
      AMP Teclado 4-3-9-1 / Extracto: If you leave me now
    </option>
    <option value="https://player.vimeo.com/video/1020234278?h=6a602cea1a">
      AMP Teclado 4-3-9-2 / Extracto: Gymnopedies
    </option>
    <option value="https://player.vimeo.com/video/1020234375?h=464fa07eee">
      AMP Teclado 4-3-11 / Canción #3 - Bb Maj7
    </option>
    <option value="https://player.vimeo.com/video/1020234449?h=86a769c7eb">
      AMP Teclado 4-3-12 / Canción #4 - Brisa y mar
    </option>
    <option value="https://player.vimeo.com/video/1020234514?h=7d897af281">
      AMP Teclado 4-4-5 / Extracto: Valerie
    </option>
    <option value="https://player.vimeo.com/video/1032484167?h=108b4d1e1c">
      AMP Teclado 4-4-5 / Extracto: One kiss
    </option>
    <option value="https://player.vimeo.com/video/1020234562?h=b635b36653">
      AMP Teclado 4-4-9 / Canción #5 - Almas
    </option>
    <option value="https://player.vimeo.com/video/1020234619?h=e33bb529d0">
      AMP Teclado 4-5-7 / Canción #6 - Ocaso con luna
    </option>
    <option value="https://player.vimeo.com/video/1020234705?h=65dc5daa76">
      AMP Teclado 4-5-8 / Extracto: I Feel It Coming
    </option>
    <option value="https://player.vimeo.com/video/1020234746?h=7e35b32a21">
      AMP Teclado 4-5-8 / Extracto: If ain’t got you
    </option>
    <option value="https://player.vimeo.com/video/1020233808?h=ef20c9c963">
      AMP Teclado 4-6-2 / Concierto final - Someone
    </option>
  </select>

  <!-- Modal -->
  <div id="videoModal" class="modal">
    <div class="modal-content">
      <span class="close">&times;</span>
      <iframe id="videoIframe" src="" allowfullscreen></iframe>
    </div>
  </div>

  <script>
    // Obtener elementos
    const videoSelect = document.getElementById("videoSelect");
    const videoModal = document.getElementById("videoModal");
    const videoIframe = document.getElementById("videoIframe");
    const closeModal = document.querySelector(".close");

    // Mostrar el modal con el video seleccionado
    videoSelect.addEventListener("change", () => {
      const selectedVideo = videoSelect.value;
      if (selectedVideo) {
        videoIframe.src = selectedVideo; // Cambiar el src del iframe
        videoModal.style.display = "flex"; // Mostrar el modal
      }
    });

    // Cerrar el modal al hacer clic en la "X"
    closeModal.addEventListener("click", () => {
      videoModal.style.display = "none"; // Ocultar el modal
      videoIframe.src = ""; // Detener el video
    });

    // Cerrar el modal al hacer clic fuera del contenido
    window.addEventListener("click", (event) => {
      if (event.target === videoModal) {
        videoModal.style.display = "none"; // Ocultar el modal
        videoIframe.src = ""; // Detener el video
      }
    });
  </script>

</body>
</html>

		</div>
				</div>
				<div class="elementor-element elementor-element-54dc334 elementor-widget__width-auto elementor-widget elementor-widget-global elementor-global-49845 elementor-widget-html" data-id="54dc334" data-element_type="widget" data-widget_type="html.default">
				<div class="elementor-widget-container">
			<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>Prueba Audio JS</title>
  <style>
    /* Contenedor que muestra botones y velocidad en la misma línea */
    .controls-container {
      display: inline-flex;      /* o "flex" si prefieres ocupar todo el ancho */
      align-items: center;       /* centra verticalmente */
      gap: 15px;                 /* espacio entre los elementos */
      margin: 30px;
    }

    /* Ajuste de estilo para los botones */
    button {
      padding: 6px 12px;
      font-size: 14px;
      cursor: pointer;
    }
  </style>
</head>
<body>
  
  <audio id="myAudio" src="https://www.ampenlinea.com/wp-content/uploads/2025/01/GPP.mp3"></audio>
  
  <!-- Contenedor para alinear en una sola línea -->
  <div class="controls-container">
    <button id="decreaseSpeedBtn">-</button>
    <button id="playPauseBtn">GPP</button>
    <button id="increaseSpeedBtn">+</button>
    <div id="speedDisplay">1.0x</div> <!-- Velocidad en la misma línea -->
  </div>
  
  <script>
    const audio = document.getElementById('myAudio');
    const playPauseBtn = document.getElementById('playPauseBtn');
    const increaseSpeedBtn = document.getElementById('increaseSpeedBtn');
    const decreaseSpeedBtn = document.getElementById('decreaseSpeedBtn');
    const speedDisplay = document.getElementById('speedDisplay');

    let isPlaying = false;

    // Actualiza el texto que muestra la velocidad
    function updateSpeedDisplay() {
      speedDisplay.textContent = `${audio.playbackRate.toFixed(1)}x`;
    }

    // Al hacer clic en el botón Reproducir/Pausar
    playPauseBtn.onclick = () => {
      if (isPlaying) {
        audio.pause();
        isPlaying = false;
        playPauseBtn.textContent = "GPP"; // Texto cuando está en pausa
      } else {
        audio.play();
        isPlaying = true;
        playPauseBtn.textContent = "Pausar"; // Texto cuando está reproduciendo
      }
    };

    // Al hacer clic en el botón de +10% Velocidad
    increaseSpeedBtn.onclick = () => {
      if (audio.playbackRate < 3.0) {
        audio.playbackRate += 0.1;
        updateSpeedDisplay();
      }
    };

    // Al hacer clic en el botón de -10% Velocidad
    decreaseSpeedBtn.onclick = () => {
      if (audio.playbackRate > 0.5) {
        audio.playbackRate -= 0.1;
        updateSpeedDisplay();
      }
    };

    // Al cargar la página
    window.onload = () => {
      updateSpeedDisplay();
    };
  </script>
</body>
</html>
		</div>
				</div>
				</div>
				<div class="elementor-element elementor-element-081c0d2 elementor-widget elementor-widget-html" data-id="081c0d2" data-element_type="widget" data-widget_type="html.default">
				<div class="elementor-widget-container">
			<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Modal con Pantalla Completa</title>
    <style>
        body {
            font-family: 'Arial', sans-serif;
            background-color: #f0f0f0;
            margin: 0;
            padding: 20px;
        }

        .container {
            max-width: 1000px;
            margin: 0 auto;
            padding: 20px;
            background-color: #fff;
            box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
            border-radius: 8px;
        }

        h1 {
            text-align: center;
            margin-bottom: 20px;
        }

        .pdf-container {
            position: relative;
            width: 100%;
            height: 800px; /* Ajusta la altura según tus necesidades */
            border: 1px solid #ccc;
            border-radius: 8px;
            overflow: hidden;
        }

        .pdf-container iframe {
            width: 100%;
            height: 100%;
            border: none;
        }

        .fullscreen-btn {
            position: absolute;
            top: 3px;
            right: 10px;
            padding: 8px 12px;
            background-color: #4CAF50;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 14px;
            transition: background-color 0.3s;
        }

        .fullscreen-btn:hover {
            background-color: #45a049;
        }

        @media (max-width: 768px) {
            .pdf-container {
                height: 500px; /* Altura reducida para tablets */
            }
        }

        @media (max-width: 480px) {
            .pdf-container {
                height: 300px; /* Altura reducida para móviles */
            }
        }
    </style>
</head>
<body>
    <div class="container">

        <div class="pdf-container" id="pdf-container">
            <iframe 
                src="https://www.ampenlinea.com/wp-content/uploads/2025/01/Teclado-4-5-8.pdf"  
                allowfullscreen>
            </iframe>
            <button class="fullscreen-btn" id="fullscreen-btn">Pantalla Completa</button>
        </div>
    </div>

    <script>
        // Obtener referencias a los elementos
        const fullscreenBtn = document.getElementById('fullscreen-btn');
        const pdfContainer = document.getElementById('pdf-container');

        // Función para activar pantalla completa
        function toggleFullscreen() {
            if (
                document.fullscreenElement ||
                document.webkitFullscreenElement ||
                document.msFullscreenElement
            ) {
                // Salir de pantalla completa
                if (document.exitFullscreen) {
                    document.exitFullscreen();
                } else if (document.webkitExitFullscreen) { /* Safari */
                    document.webkitExitFullscreen();
                } else if (document.msExitFullscreen) { /* IE11 */
                    document.msExitFullscreen();
                }
            } else {
                // Entrar en pantalla completa
                if (pdfContainer.requestFullscreen) {
                    pdfContainer.requestFullscreen();
                } else if (pdfContainer.webkitRequestFullscreen) { /* Safari */
                    pdfContainer.webkitRequestFullscreen();
                } else if (pdfContainer.msRequestFullscreen) { /* IE11 */
                    pdfContainer.msRequestFullscreen();
                }
            }
        }

        // Evento de clic en el botón para alternar pantalla completa
        fullscreenBtn.addEventListener('click', toggleFullscreen);

        // Evento para actualizar el texto del botón según el estado de pantalla completa
        function updateFullscreenButton() {
            if (
                document.fullscreenElement === pdfContainer ||
                document.webkitFullscreenElement === pdfContainer ||
                document.msFullscreenElement === pdfContainer
            ) {
                fullscreenBtn.textContent = 'Salir de Pantalla Completa';
            } else {
                fullscreenBtn.textContent = 'Pantalla Completa';
            }
        }

        // Escuchar cambios en el estado de pantalla completa
        document.addEventListener('fullscreenchange', updateFullscreenButton);
        document.addEventListener('webkitfullscreenchange', updateFullscreenButton); // Safari
        document.addEventListener('MSFullscreenChange', updateFullscreenButton); // IE11
    </script>
</body>
</html>
		</div>
				</div>
				<div class="elementor-element elementor-element-32f294d elementor-widget elementor-widget-template" data-id="32f294d" data-element_type="widget" data-widget_type="template.default">
				<div class="elementor-widget-container">
					<div class="elementor-template">
					</div>
				</div>
				</div>
					</div>
				</div>
				</div>
		]]></content:encoded>
					
		
		
			</item>
		<item>
		<title>AMA TC 4-4-9 &#8211; Taller práctico #5 &#8211; &#8220;Almas&#8221;</title>
		<link>https://www.ampenlinea.com/lessons/ama-tc-4-4-9-taller-practico-5-almas/</link>
		
		<dc:creator><![CDATA[Henry Giron]]></dc:creator>
		<pubDate>Thu, 30 Jan 2025 19:33:24 +0000</pubDate>
				<category><![CDATA[AMA Teclado N4]]></category>
		<guid isPermaLink="false">https://www.ampenlinea.com/?post_type=sfwd-lessons&#038;p=55599</guid>

					<description><![CDATA[Modal con Metrónomo Metrónomo &#215; Videos en Pop-Up TPA AMP Teclado 4-4-9 / Canción #5 &#8211; Almas &#215; Prueba Audio JS &#8211; GPP + 1.0x Modal con Pantalla Completa Pantalla Completa]]></description>
										<content:encoded><![CDATA[		<div data-elementor-type="wp-post" data-elementor-id="55599" class="elementor elementor-55599" data-elementor-post-type="sfwd-lessons">
				<div class="elementor-element elementor-element-0ebe588 e-flex e-con-boxed e-con e-parent" data-id="0ebe588" data-element_type="container">
					<div class="e-con-inner">
		<div class="elementor-element elementor-element-17b7da4 e-con-full e-grid e-con e-child" data-id="17b7da4" data-element_type="container">
				<div class="elementor-element elementor-element-a8c4516 elementor-widget elementor-widget-global elementor-global-49842 elementor-widget-html" data-id="a8c4516" data-element_type="widget" data-widget_type="html.default">
				<div class="elementor-widget-container">
			<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>Modal con Metrónomo</title>
  <style>
    /* Botón para abrir el modal */
    #openMetronomeBtn {
      padding: 10px 20px;
      font-size: 16px;
      cursor: pointer;
      background-color: #28a745;
      color: white;
      border: none;
      border-radius: 5px;
    }

    /* Estilos para el modal */
    .modal {
      display: none; /* Oculto por defecto */
      position: fixed;
      z-index: 1000;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.5); /* Fondo semi-transparente */
      justify-content: center;
      align-items: center;
    }

    /* Contenido del modal */
    .modal-content {
      background-color: #fff;
      margin: auto;
      padding: 20px;
      border: 1px solid #888;
      width: 400px;
      border-radius: 8px;
      position: relative;
    }

    /* Botón de cierre */
    .close {
      color: #aaa;
      position: absolute;
      top: 10px;
      right: 15px;
      font-size: 28px;
      font-weight: bold;
      cursor: pointer;
    }

    .close:hover,
    .close:focus {
      color: black;
    }
  </style>
</head>
<body>

  <!-- Botón para abrir el modal -->
  <button id="openMetronomeBtn">Metrónomo</button>

  <!-- Modal -->
  <div id="metronomeModal" class="modal">
    <div class="modal-content">
      <!-- Botón de cierre -->
      <span class="close">&times;</span>

      <!-- Iframe del metrónomo -->
      <iframe 
        src="https://guitarapp.com/metronome.html?embed=true&tempo=120&timeSignature=2&pattern=1&theme=light" 
        title="Online Metronome" 
        scrolling="no"
        style="width: 100%; height: 475px; border: none; border-radius: 4px;">
      </iframe>
    </div>
  </div>

  <script>
    // Obtener elementos
    const modal = document.getElementById("metronomeModal");
    const btn = document.getElementById("openMetronomeBtn");
    const closeBtn = document.querySelector(".close");

    // Mostrar el modal al hacer clic en el botón
    btn.addEventListener("click", () => {
      modal.style.display = "flex"; // Usar flex para centrar el contenido
    });

    // Cerrar el modal al hacer clic en el botón de cerrar (X)
    closeBtn.addEventListener("click", () => {
      modal.style.display = "none";
    });

    // Cerrar el modal al hacer clic fuera del contenido
    window.addEventListener("click", (event) => {
      if (event.target === modal) {
        modal.style.display = "none";
      }
    });
  </script>

</body>
</html>
		</div>
				</div>
				<div class="elementor-element elementor-element-5fa173c elementor-widget elementor-widget-html" data-id="5fa173c" data-element_type="widget" data-widget_type="html.default">
				<div class="elementor-widget-container">
			<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>Videos en Pop-Up</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      padding: 20px;
    }

    /* Lista desplegable */
    select {
      padding: 10px;
      font-size: 16px;
      border: 1px solid #ccc;
      border-radius: 5px;
      margin-bottom: 20px;
      width: 100%; /* Se ajusta al ancho del contenedor */
      max-width: 400px; /* Ancho máximo */
    }

    /* Modal */
    .modal {
      display: none; /* Oculto por defecto */
      position: fixed;
      z-index: 1000;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.6); /* Fondo semi-transparente */
      justify-content: center;
      align-items: center;
    }

    /* Contenido del modal */
    .modal-content {
      background-color: white;
      border-radius: 8px;
      padding: 20px;
      width: 80%;
      max-width: 800px;
      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
      position: relative;
    }

    iframe {
      width: 100%;
      height: 450px;
      border: none;
      border-radius: 5px;
    }

    /* Botón de cierre */
    .close {
      position: absolute;
      top: 10px;
      right: 15px;
      font-size: 30px;
      font-weight: bold;
      color: #aaa;
      cursor: pointer;
      transition: color 0.3s;
    }

    .close:hover {
      color: black;
    }
  </style>
</head>
<body>


  <!-- Lista desplegable -->
  <select id="videoSelect">
    <option value="" selected disabled>TPA</option>
 
    <option value="https://player.vimeo.com/video/1020234562?h=b635b36653">
      AMP Teclado 4-4-9 / Canción #5 - Almas
    </option>
   
  </select>

  <!-- Modal -->
  <div id="videoModal" class="modal">
    <div class="modal-content">
      <span class="close">&times;</span>
      <iframe id="videoIframe" src="" allowfullscreen></iframe>
    </div>
  </div>

  <script>
    // Obtener elementos
    const videoSelect = document.getElementById("videoSelect");
    const videoModal = document.getElementById("videoModal");
    const videoIframe = document.getElementById("videoIframe");
    const closeModal = document.querySelector(".close");

    // Mostrar el modal con el video seleccionado
    videoSelect.addEventListener("change", () => {
      const selectedVideo = videoSelect.value;
      if (selectedVideo) {
        videoIframe.src = selectedVideo; // Cambiar el src del iframe
        videoModal.style.display = "flex"; // Mostrar el modal
      }
    });

    // Cerrar el modal al hacer clic en la "X"
    closeModal.addEventListener("click", () => {
      videoModal.style.display = "none"; // Ocultar el modal
      videoIframe.src = ""; // Detener el video
    });

    // Cerrar el modal al hacer clic fuera del contenido
    window.addEventListener("click", (event) => {
      if (event.target === videoModal) {
        videoModal.style.display = "none"; // Ocultar el modal
        videoIframe.src = ""; // Detener el video
      }
    });
  </script>

</body>
</html>

		</div>
				</div>
				<div class="elementor-element elementor-element-8cbfcef elementor-widget__width-auto elementor-widget elementor-widget-global elementor-global-49845 elementor-widget-html" data-id="8cbfcef" data-element_type="widget" data-widget_type="html.default">
				<div class="elementor-widget-container">
			<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>Prueba Audio JS</title>
  <style>
    /* Contenedor que muestra botones y velocidad en la misma línea */
    .controls-container {
      display: inline-flex;      /* o "flex" si prefieres ocupar todo el ancho */
      align-items: center;       /* centra verticalmente */
      gap: 15px;                 /* espacio entre los elementos */
      margin: 30px;
    }

    /* Ajuste de estilo para los botones */
    button {
      padding: 6px 12px;
      font-size: 14px;
      cursor: pointer;
    }
  </style>
</head>
<body>
  
  <audio id="myAudio" src="https://www.ampenlinea.com/wp-content/uploads/2025/01/GPP.mp3"></audio>
  
  <!-- Contenedor para alinear en una sola línea -->
  <div class="controls-container">
    <button id="decreaseSpeedBtn">-</button>
    <button id="playPauseBtn">GPP</button>
    <button id="increaseSpeedBtn">+</button>
    <div id="speedDisplay">1.0x</div> <!-- Velocidad en la misma línea -->
  </div>
  
  <script>
    const audio = document.getElementById('myAudio');
    const playPauseBtn = document.getElementById('playPauseBtn');
    const increaseSpeedBtn = document.getElementById('increaseSpeedBtn');
    const decreaseSpeedBtn = document.getElementById('decreaseSpeedBtn');
    const speedDisplay = document.getElementById('speedDisplay');

    let isPlaying = false;

    // Actualiza el texto que muestra la velocidad
    function updateSpeedDisplay() {
      speedDisplay.textContent = `${audio.playbackRate.toFixed(1)}x`;
    }

    // Al hacer clic en el botón Reproducir/Pausar
    playPauseBtn.onclick = () => {
      if (isPlaying) {
        audio.pause();
        isPlaying = false;
        playPauseBtn.textContent = "GPP"; // Texto cuando está en pausa
      } else {
        audio.play();
        isPlaying = true;
        playPauseBtn.textContent = "Pausar"; // Texto cuando está reproduciendo
      }
    };

    // Al hacer clic en el botón de +10% Velocidad
    increaseSpeedBtn.onclick = () => {
      if (audio.playbackRate < 3.0) {
        audio.playbackRate += 0.1;
        updateSpeedDisplay();
      }
    };

    // Al hacer clic en el botón de -10% Velocidad
    decreaseSpeedBtn.onclick = () => {
      if (audio.playbackRate > 0.5) {
        audio.playbackRate -= 0.1;
        updateSpeedDisplay();
      }
    };

    // Al cargar la página
    window.onload = () => {
      updateSpeedDisplay();
    };
  </script>
</body>
</html>
		</div>
				</div>
				</div>
				<div class="elementor-element elementor-element-79b4bb5 elementor-widget elementor-widget-html" data-id="79b4bb5" data-element_type="widget" data-widget_type="html.default">
				<div class="elementor-widget-container">
			<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Modal con Pantalla Completa</title>
    <style>
        body {
            font-family: 'Arial', sans-serif;
            background-color: #f0f0f0;
            margin: 0;
            padding: 20px;
        }

        .container {
            max-width: 1000px;
            margin: 0 auto;
            padding: 20px;
            background-color: #fff;
            box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
            border-radius: 8px;
        }

        h1 {
            text-align: center;
            margin-bottom: 20px;
        }

        .pdf-container {
            position: relative;
            width: 100%;
            height: 800px; /* Ajusta la altura según tus necesidades */
            border: 1px solid #ccc;
            border-radius: 8px;
            overflow: hidden;
        }

        .pdf-container iframe {
            width: 100%;
            height: 100%;
            border: none;
        }

        .fullscreen-btn {
            position: absolute;
            top: 3px;
            right: 10px;
            padding: 8px 12px;
            background-color: #4CAF50;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 14px;
            transition: background-color 0.3s;
        }

        .fullscreen-btn:hover {
            background-color: #45a049;
        }

        @media (max-width: 768px) {
            .pdf-container {
                height: 500px; /* Altura reducida para tablets */
            }
        }

        @media (max-width: 480px) {
            .pdf-container {
                height: 300px; /* Altura reducida para móviles */
            }
        }
    </style>
</head>
<body>
    <div class="container">

        <div class="pdf-container" id="pdf-container">
            <iframe 
                src="https://www.ampenlinea.com/wp-content/uploads/2025/01/Teclado-4-4-9.pdf"  
                allowfullscreen>
            </iframe>
            <button class="fullscreen-btn" id="fullscreen-btn">Pantalla Completa</button>
        </div>
    </div>

    <script>
        // Obtener referencias a los elementos
        const fullscreenBtn = document.getElementById('fullscreen-btn');
        const pdfContainer = document.getElementById('pdf-container');

        // Función para activar pantalla completa
        function toggleFullscreen() {
            if (
                document.fullscreenElement ||
                document.webkitFullscreenElement ||
                document.msFullscreenElement
            ) {
                // Salir de pantalla completa
                if (document.exitFullscreen) {
                    document.exitFullscreen();
                } else if (document.webkitExitFullscreen) { /* Safari */
                    document.webkitExitFullscreen();
                } else if (document.msExitFullscreen) { /* IE11 */
                    document.msExitFullscreen();
                }
            } else {
                // Entrar en pantalla completa
                if (pdfContainer.requestFullscreen) {
                    pdfContainer.requestFullscreen();
                } else if (pdfContainer.webkitRequestFullscreen) { /* Safari */
                    pdfContainer.webkitRequestFullscreen();
                } else if (pdfContainer.msRequestFullscreen) { /* IE11 */
                    pdfContainer.msRequestFullscreen();
                }
            }
        }

        // Evento de clic en el botón para alternar pantalla completa
        fullscreenBtn.addEventListener('click', toggleFullscreen);

        // Evento para actualizar el texto del botón según el estado de pantalla completa
        function updateFullscreenButton() {
            if (
                document.fullscreenElement === pdfContainer ||
                document.webkitFullscreenElement === pdfContainer ||
                document.msFullscreenElement === pdfContainer
            ) {
                fullscreenBtn.textContent = 'Salir de Pantalla Completa';
            } else {
                fullscreenBtn.textContent = 'Pantalla Completa';
            }
        }

        // Escuchar cambios en el estado de pantalla completa
        document.addEventListener('fullscreenchange', updateFullscreenButton);
        document.addEventListener('webkitfullscreenchange', updateFullscreenButton); // Safari
        document.addEventListener('MSFullscreenChange', updateFullscreenButton); // IE11
    </script>
</body>
</html>
		</div>
				</div>
				<div class="elementor-element elementor-element-e254ae2 elementor-widget elementor-widget-template" data-id="e254ae2" data-element_type="widget" data-widget_type="template.default">
				<div class="elementor-widget-container">
					<div class="elementor-template">
					</div>
				</div>
				</div>
					</div>
				</div>
				</div>
		]]></content:encoded>
					
		
		
			</item>
		<item>
		<title>AMA TC 4-4-5 &#8211; Acordes en las canciones #3 (REPASO)</title>
		<link>https://www.ampenlinea.com/lessons/ama-tc-4-4-5-acordes-en-las-canciones-3-repaso/</link>
		
		<dc:creator><![CDATA[Henry Giron]]></dc:creator>
		<pubDate>Thu, 30 Jan 2025 19:33:15 +0000</pubDate>
				<category><![CDATA[AMA Teclado N4]]></category>
		<guid isPermaLink="false">https://www.ampenlinea.com/?post_type=sfwd-lessons&#038;p=55600</guid>

					<description><![CDATA[Modal con Metrónomo Metrónomo &#215; Videos en Pop-Up TPA AMP Teclado 4-1-6 / Mi dulce chica AMP Teclado 4-1-10 / Canción #1 &#8211; E Maj7 AMP Teclado 4-1-11 / Imagine AMP Teclado 4-2-7 / Extracto: Angel AMP Teclado 4-2-7 / Extracto: Something AMP Teclado 4-2-7 / Extracto: What’s going on AMP Teclado 4-2-10 / Canción &#8230;<p class="read-more"> <a class="" href="https://www.ampenlinea.com/lessons/ama-tc-4-4-5-acordes-en-las-canciones-3-repaso/"> <span class="screen-reader-text">AMA TC 4-4-5 &#8211; Acordes en las canciones #3 (REPASO)</span> Leer más &#187;</a></p>]]></description>
										<content:encoded><![CDATA[		<div data-elementor-type="wp-post" data-elementor-id="55600" class="elementor elementor-55600" data-elementor-post-type="sfwd-lessons">
				<div class="elementor-element elementor-element-2792a4e e-flex e-con-boxed e-con e-parent" data-id="2792a4e" data-element_type="container">
					<div class="e-con-inner">
		<div class="elementor-element elementor-element-af63484 e-con-full e-grid e-con e-child" data-id="af63484" data-element_type="container">
				<div class="elementor-element elementor-element-4a16678 elementor-widget elementor-widget-global elementor-global-49842 elementor-widget-html" data-id="4a16678" data-element_type="widget" data-widget_type="html.default">
				<div class="elementor-widget-container">
			<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>Modal con Metrónomo</title>
  <style>
    /* Botón para abrir el modal */
    #openMetronomeBtn {
      padding: 10px 20px;
      font-size: 16px;
      cursor: pointer;
      background-color: #28a745;
      color: white;
      border: none;
      border-radius: 5px;
    }

    /* Estilos para el modal */
    .modal {
      display: none; /* Oculto por defecto */
      position: fixed;
      z-index: 1000;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.5); /* Fondo semi-transparente */
      justify-content: center;
      align-items: center;
    }

    /* Contenido del modal */
    .modal-content {
      background-color: #fff;
      margin: auto;
      padding: 20px;
      border: 1px solid #888;
      width: 400px;
      border-radius: 8px;
      position: relative;
    }

    /* Botón de cierre */
    .close {
      color: #aaa;
      position: absolute;
      top: 10px;
      right: 15px;
      font-size: 28px;
      font-weight: bold;
      cursor: pointer;
    }

    .close:hover,
    .close:focus {
      color: black;
    }
  </style>
</head>
<body>

  <!-- Botón para abrir el modal -->
  <button id="openMetronomeBtn">Metrónomo</button>

  <!-- Modal -->
  <div id="metronomeModal" class="modal">
    <div class="modal-content">
      <!-- Botón de cierre -->
      <span class="close">&times;</span>

      <!-- Iframe del metrónomo -->
      <iframe 
        src="https://guitarapp.com/metronome.html?embed=true&tempo=120&timeSignature=2&pattern=1&theme=light" 
        title="Online Metronome" 
        scrolling="no"
        style="width: 100%; height: 475px; border: none; border-radius: 4px;">
      </iframe>
    </div>
  </div>

  <script>
    // Obtener elementos
    const modal = document.getElementById("metronomeModal");
    const btn = document.getElementById("openMetronomeBtn");
    const closeBtn = document.querySelector(".close");

    // Mostrar el modal al hacer clic en el botón
    btn.addEventListener("click", () => {
      modal.style.display = "flex"; // Usar flex para centrar el contenido
    });

    // Cerrar el modal al hacer clic en el botón de cerrar (X)
    closeBtn.addEventListener("click", () => {
      modal.style.display = "none";
    });

    // Cerrar el modal al hacer clic fuera del contenido
    window.addEventListener("click", (event) => {
      if (event.target === modal) {
        modal.style.display = "none";
      }
    });
  </script>

</body>
</html>
		</div>
				</div>
				<div class="elementor-element elementor-element-86c6cec elementor-widget elementor-widget-html" data-id="86c6cec" data-element_type="widget" data-widget_type="html.default">
				<div class="elementor-widget-container">
			<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>Videos en Pop-Up</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      padding: 20px;
    }

    /* Lista desplegable */
    select {
      padding: 10px;
      font-size: 16px;
      border: 1px solid #ccc;
      border-radius: 5px;
      margin-bottom: 20px;
      width: 100%; /* Se ajusta al ancho del contenedor */
      max-width: 400px; /* Ancho máximo */
    }

    /* Modal */
    .modal {
      display: none; /* Oculto por defecto */
      position: fixed;
      z-index: 1000;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.6); /* Fondo semi-transparente */
      justify-content: center;
      align-items: center;
    }

    /* Contenido del modal */
    .modal-content {
      background-color: white;
      border-radius: 8px;
      padding: 20px;
      width: 80%;
      max-width: 800px;
      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
      position: relative;
    }

    iframe {
      width: 100%;
      height: 450px;
      border: none;
      border-radius: 5px;
    }

    /* Botón de cierre */
    .close {
      position: absolute;
      top: 10px;
      right: 15px;
      font-size: 30px;
      font-weight: bold;
      color: #aaa;
      cursor: pointer;
      transition: color 0.3s;
    }

    .close:hover {
      color: black;
    }
  </style>
</head>
<body>


  <!-- Lista desplegable -->
  <select id="videoSelect">
    <option value="" selected disabled>TPA</option>
    <option value="https://player.vimeo.com/video/1020233888?h=2a574b7b6e">
      AMP Teclado 4-1-6 / Mi dulce chica
    </option>
    <option value="https://player.vimeo.com/video/1020233952?h=18c2f4c989">
      AMP Teclado 4-1-10 / Canción #1 - E Maj7
    </option>
    <option value="https://player.vimeo.com/video/1020234021?h=9768a23758">
      AMP Teclado 4-1-11 / Imagine
    </option>
    <option value="https://player.vimeo.com/video/1020234083?h=01bffbed09">
      AMP Teclado 4-2-7 / Extracto: Angel
    </option>
    <option value="https://player.vimeo.com/video/1020234111?h=734bd2b770">
      AMP Teclado 4-2-7 / Extracto: Something
    </option>
    <option value="https://player.vimeo.com/video/1020234159?h=f5cf8fb6c2">
      AMP Teclado 4-2-7 / Extracto: What’s going on
    </option>
    <option value="https://player.vimeo.com/video/1020234212?h=bcaedb9db0">
      AMP Teclado 4-2-10 / Canción #2 - A Maj7
    </option>
    <option value="https://player.vimeo.com/video/1020234332?h=022ec33ac9">
      AMP Teclado 4-3-9-1 / Extracto: If you leave me now
    </option>
    <option value="https://player.vimeo.com/video/1020234278?h=6a602cea1a">
      AMP Teclado 4-3-9-2 / Extracto: Gymnopedies
    </option>
    <option value="https://player.vimeo.com/video/1020234375?h=464fa07eee">
      AMP Teclado 4-3-11 / Canción #3 - Bb Maj7
    </option>
    <option value="https://player.vimeo.com/video/1020234449?h=86a769c7eb">
      AMP Teclado 4-3-12 / Canción #4 - Brisa y mar
    </option>
    <option value="https://player.vimeo.com/video/1020234514?h=7d897af281">
      AMP Teclado 4-4-5 / Extracto: Valerie
    </option>
    <option value="https://player.vimeo.com/video/1032484167?h=108b4d1e1c">
      AMP Teclado 4-4-5 / Extracto: One kiss
    </option>
    <option value="https://player.vimeo.com/video/1020234562?h=b635b36653">
      AMP Teclado 4-4-9 / Canción #5 - Almas
    </option>
    <option value="https://player.vimeo.com/video/1020234619?h=e33bb529d0">
      AMP Teclado 4-5-7 / Canción #6 - Ocaso con luna
    </option>
    <option value="https://player.vimeo.com/video/1020234705?h=65dc5daa76">
      AMP Teclado 4-5-8 / Extracto: I Feel It Coming
    </option>
    <option value="https://player.vimeo.com/video/1020234746?h=7e35b32a21">
      AMP Teclado 4-5-8 / Extracto: If ain’t got you
    </option>
    <option value="https://player.vimeo.com/video/1020233808?h=ef20c9c963">
      AMP Teclado 4-6-2 / Concierto final - Someone
    </option>
  </select>

  <!-- Modal -->
  <div id="videoModal" class="modal">
    <div class="modal-content">
      <span class="close">&times;</span>
      <iframe id="videoIframe" src="" allowfullscreen></iframe>
    </div>
  </div>

  <script>
    // Obtener elementos
    const videoSelect = document.getElementById("videoSelect");
    const videoModal = document.getElementById("videoModal");
    const videoIframe = document.getElementById("videoIframe");
    const closeModal = document.querySelector(".close");

    // Mostrar el modal con el video seleccionado
    videoSelect.addEventListener("change", () => {
      const selectedVideo = videoSelect.value;
      if (selectedVideo) {
        videoIframe.src = selectedVideo; // Cambiar el src del iframe
        videoModal.style.display = "flex"; // Mostrar el modal
      }
    });

    // Cerrar el modal al hacer clic en la "X"
    closeModal.addEventListener("click", () => {
      videoModal.style.display = "none"; // Ocultar el modal
      videoIframe.src = ""; // Detener el video
    });

    // Cerrar el modal al hacer clic fuera del contenido
    window.addEventListener("click", (event) => {
      if (event.target === videoModal) {
        videoModal.style.display = "none"; // Ocultar el modal
        videoIframe.src = ""; // Detener el video
      }
    });
  </script>

</body>
</html>

		</div>
				</div>
				<div class="elementor-element elementor-element-a726c8d elementor-widget__width-auto elementor-widget elementor-widget-global elementor-global-49845 elementor-widget-html" data-id="a726c8d" data-element_type="widget" data-widget_type="html.default">
				<div class="elementor-widget-container">
			<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>Prueba Audio JS</title>
  <style>
    /* Contenedor que muestra botones y velocidad en la misma línea */
    .controls-container {
      display: inline-flex;      /* o "flex" si prefieres ocupar todo el ancho */
      align-items: center;       /* centra verticalmente */
      gap: 15px;                 /* espacio entre los elementos */
      margin: 30px;
    }

    /* Ajuste de estilo para los botones */
    button {
      padding: 6px 12px;
      font-size: 14px;
      cursor: pointer;
    }
  </style>
</head>
<body>
  
  <audio id="myAudio" src="https://www.ampenlinea.com/wp-content/uploads/2025/01/GPP.mp3"></audio>
  
  <!-- Contenedor para alinear en una sola línea -->
  <div class="controls-container">
    <button id="decreaseSpeedBtn">-</button>
    <button id="playPauseBtn">GPP</button>
    <button id="increaseSpeedBtn">+</button>
    <div id="speedDisplay">1.0x</div> <!-- Velocidad en la misma línea -->
  </div>
  
  <script>
    const audio = document.getElementById('myAudio');
    const playPauseBtn = document.getElementById('playPauseBtn');
    const increaseSpeedBtn = document.getElementById('increaseSpeedBtn');
    const decreaseSpeedBtn = document.getElementById('decreaseSpeedBtn');
    const speedDisplay = document.getElementById('speedDisplay');

    let isPlaying = false;

    // Actualiza el texto que muestra la velocidad
    function updateSpeedDisplay() {
      speedDisplay.textContent = `${audio.playbackRate.toFixed(1)}x`;
    }

    // Al hacer clic en el botón Reproducir/Pausar
    playPauseBtn.onclick = () => {
      if (isPlaying) {
        audio.pause();
        isPlaying = false;
        playPauseBtn.textContent = "GPP"; // Texto cuando está en pausa
      } else {
        audio.play();
        isPlaying = true;
        playPauseBtn.textContent = "Pausar"; // Texto cuando está reproduciendo
      }
    };

    // Al hacer clic en el botón de +10% Velocidad
    increaseSpeedBtn.onclick = () => {
      if (audio.playbackRate < 3.0) {
        audio.playbackRate += 0.1;
        updateSpeedDisplay();
      }
    };

    // Al hacer clic en el botón de -10% Velocidad
    decreaseSpeedBtn.onclick = () => {
      if (audio.playbackRate > 0.5) {
        audio.playbackRate -= 0.1;
        updateSpeedDisplay();
      }
    };

    // Al cargar la página
    window.onload = () => {
      updateSpeedDisplay();
    };
  </script>
</body>
</html>
		</div>
				</div>
				</div>
				<div class="elementor-element elementor-element-dd8de9f elementor-widget elementor-widget-html" data-id="dd8de9f" data-element_type="widget" data-widget_type="html.default">
				<div class="elementor-widget-container">
			<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Modal con Pantalla Completa</title>
    <style>
        body {
            font-family: 'Arial', sans-serif;
            background-color: #f0f0f0;
            margin: 0;
            padding: 20px;
        }

        .container {
            max-width: 1000px;
            margin: 0 auto;
            padding: 20px;
            background-color: #fff;
            box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
            border-radius: 8px;
        }

        h1 {
            text-align: center;
            margin-bottom: 20px;
        }

        .pdf-container {
            position: relative;
            width: 100%;
            height: 800px; /* Ajusta la altura según tus necesidades */
            border: 1px solid #ccc;
            border-radius: 8px;
            overflow: hidden;
        }

        .pdf-container iframe {
            width: 100%;
            height: 100%;
            border: none;
        }

        .fullscreen-btn {
            position: absolute;
            top: 3px;
            right: 10px;
            padding: 8px 12px;
            background-color: #4CAF50;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 14px;
            transition: background-color 0.3s;
        }

        .fullscreen-btn:hover {
            background-color: #45a049;
        }

        @media (max-width: 768px) {
            .pdf-container {
                height: 500px; /* Altura reducida para tablets */
            }
        }

        @media (max-width: 480px) {
            .pdf-container {
                height: 300px; /* Altura reducida para móviles */
            }
        }
    </style>
</head>
<body>
    <div class="container">

        <div class="pdf-container" id="pdf-container">
            <iframe 
                src="https://www.ampenlinea.com/wp-content/uploads/2025/01/Teclado-4-4-5.pdf"  
                allowfullscreen>
            </iframe>
            <button class="fullscreen-btn" id="fullscreen-btn">Pantalla Completa</button>
        </div>
    </div>

    <script>
        // Obtener referencias a los elementos
        const fullscreenBtn = document.getElementById('fullscreen-btn');
        const pdfContainer = document.getElementById('pdf-container');

        // Función para activar pantalla completa
        function toggleFullscreen() {
            if (
                document.fullscreenElement ||
                document.webkitFullscreenElement ||
                document.msFullscreenElement
            ) {
                // Salir de pantalla completa
                if (document.exitFullscreen) {
                    document.exitFullscreen();
                } else if (document.webkitExitFullscreen) { /* Safari */
                    document.webkitExitFullscreen();
                } else if (document.msExitFullscreen) { /* IE11 */
                    document.msExitFullscreen();
                }
            } else {
                // Entrar en pantalla completa
                if (pdfContainer.requestFullscreen) {
                    pdfContainer.requestFullscreen();
                } else if (pdfContainer.webkitRequestFullscreen) { /* Safari */
                    pdfContainer.webkitRequestFullscreen();
                } else if (pdfContainer.msRequestFullscreen) { /* IE11 */
                    pdfContainer.msRequestFullscreen();
                }
            }
        }

        // Evento de clic en el botón para alternar pantalla completa
        fullscreenBtn.addEventListener('click', toggleFullscreen);

        // Evento para actualizar el texto del botón según el estado de pantalla completa
        function updateFullscreenButton() {
            if (
                document.fullscreenElement === pdfContainer ||
                document.webkitFullscreenElement === pdfContainer ||
                document.msFullscreenElement === pdfContainer
            ) {
                fullscreenBtn.textContent = 'Salir de Pantalla Completa';
            } else {
                fullscreenBtn.textContent = 'Pantalla Completa';
            }
        }

        // Escuchar cambios en el estado de pantalla completa
        document.addEventListener('fullscreenchange', updateFullscreenButton);
        document.addEventListener('webkitfullscreenchange', updateFullscreenButton); // Safari
        document.addEventListener('MSFullscreenChange', updateFullscreenButton); // IE11
    </script>
</body>
</html>
		</div>
				</div>
				<div class="elementor-element elementor-element-0e1e0ae elementor-widget elementor-widget-template" data-id="0e1e0ae" data-element_type="widget" data-widget_type="template.default">
				<div class="elementor-widget-container">
					<div class="elementor-template">
					</div>
				</div>
				</div>
					</div>
				</div>
				</div>
		]]></content:encoded>
					
		
		
			</item>
	</channel>
</rss>
