<?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>JamCenter Bateria &#8211; AMP en Línea</title>
	<atom:link href="https://www.ampenlinea.com/lesson-category/jamcenter-bateria/feed/" rel="self" type="application/rss+xml" />
	<link>https://www.ampenlinea.com</link>
	<description></description>
	<lastBuildDate>Mon, 17 Nov 2025 03:28:20 +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>JamCenter Bateria &#8211; AMP en Línea</title>
	<link>https://www.ampenlinea.com</link>
	<width>32</width>
	<height>32</height>
</image> 
	<item>
		<title>AMA JamCenter BT &#8211; De Música Ligera &#8211; Soda Stereo</title>
		<link>https://www.ampenlinea.com/courses/ama-canciones-de-bateria/lessons/ama-jamcenter-bt-de-musica-ligera-soda-stereo/</link>
		
		<dc:creator><![CDATA[Henry Giron]]></dc:creator>
		<pubDate>Wed, 26 Feb 2025 20:52:53 +0000</pubDate>
				<category><![CDATA[AMA Bateria N5]]></category>
		<guid isPermaLink="false">https://www.ampenlinea.com/?post_type=sfwd-lessons&#038;p=59307</guid>

					<description><![CDATA[Modal con Metrónomo Metrónomo &#215; Videos en Pop-Up TPA JamCenter &#8211; De música ligera &#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="59307" class="elementor elementor-59307" data-elementor-post-type="sfwd-lessons">
				<div class="elementor-element elementor-element-9091680 e-flex e-con-boxed e-con e-parent" data-id="9091680" data-element_type="container">
					<div class="e-con-inner">
		<div class="elementor-element elementor-element-abbcbbc e-con-full e-grid e-con e-child" data-id="abbcbbc" data-element_type="container">
				<div class="elementor-element elementor-element-033b707 elementor-widget elementor-widget-global elementor-global-49842 elementor-widget-html" data-id="033b707" 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-554591f elementor-widget elementor-widget-html" data-id="554591f" 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/1020765515?h=5cbd08619e">
        JamCenter - De música ligera
        </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-2fdb60f elementor-widget__width-auto elementor-widget elementor-widget-global elementor-global-49845 elementor-widget-html" data-id="2fdb60f" 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-f282171 elementor-widget elementor-widget-html" data-id="f282171" 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/02/Bateria-3-5-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-f976364 elementor-widget elementor-widget-template" data-id="f976364" 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 JamCenter Bateria &#8211; &#8220;Zombie&#8221;</title>
		<link>https://www.ampenlinea.com/lessons/ama-jamcenter-bateria-zombie/</link>
		
		<dc:creator><![CDATA[Henry Giron]]></dc:creator>
		<pubDate>Wed, 26 Feb 2025 20:41:55 +0000</pubDate>
				<category><![CDATA[AMA Bateria N5]]></category>
		<guid isPermaLink="false">https://www.ampenlinea.com/?post_type=sfwd-lessons&#038;p=59305</guid>

					<description><![CDATA[Modal con Metrónomo Metrónomo &#215; Videos en Pop-Up TPA JamCenter &#8211; Zombie &#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="59305" class="elementor elementor-59305" data-elementor-post-type="sfwd-lessons">
				<div class="elementor-element elementor-element-ca99ece e-flex e-con-boxed e-con e-parent" data-id="ca99ece" data-element_type="container">
					<div class="e-con-inner">
		<div class="elementor-element elementor-element-89222ee e-con-full e-grid e-con e-child" data-id="89222ee" data-element_type="container">
				<div class="elementor-element elementor-element-8cf75b9 elementor-widget elementor-widget-global elementor-global-49842 elementor-widget-html" data-id="8cf75b9" 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-4dc0f09 elementor-widget elementor-widget-html" data-id="4dc0f09" 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/998862771?h=0e2e08a43d">
        JamCenter - Zombie</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-6f2d4b5 elementor-widget__width-auto elementor-widget elementor-widget-global elementor-global-49845 elementor-widget-html" data-id="6f2d4b5" 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-1d4e6c7 elementor-widget elementor-widget-html" data-id="1d4e6c7" 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/02/Bateria-3-3-7.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-08a950f elementor-widget elementor-widget-template" data-id="08a950f" 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 JamCenter Bateria &#8211; &#8220;Knocking on heaven&#8217;s door&#8221;</title>
		<link>https://www.ampenlinea.com/lessons/ama-jamcenter-bateria-knocking-on-heavens-door/</link>
		
		<dc:creator><![CDATA[Henry Giron]]></dc:creator>
		<pubDate>Wed, 26 Feb 2025 20:41:13 +0000</pubDate>
				<category><![CDATA[AMA Bateria N5]]></category>
		<guid isPermaLink="false">https://www.ampenlinea.com/?post_type=sfwd-lessons&#038;p=59304</guid>

					<description><![CDATA[Modal con Metrónomo Metrónomo &#215; Videos en Pop-Up TPA JamCenter &#8211; Knocking on heaven&#8217;s door &#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="59304" class="elementor elementor-59304" data-elementor-post-type="sfwd-lessons">
				<div class="elementor-element elementor-element-bfcf3b1 e-flex e-con-boxed e-con e-parent" data-id="bfcf3b1" data-element_type="container">
					<div class="e-con-inner">
		<div class="elementor-element elementor-element-1043973 e-con-full e-grid e-con e-child" data-id="1043973" data-element_type="container">
				<div class="elementor-element elementor-element-c45708d elementor-widget elementor-widget-global elementor-global-49842 elementor-widget-html" data-id="c45708d" 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-f6705a4 elementor-widget elementor-widget-html" data-id="f6705a4" 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/1020759144?h=ea276773c4">
        JamCenter - Knocking on heaven's door
        </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-b4bb730 elementor-widget__width-auto elementor-widget elementor-widget-global elementor-global-49845 elementor-widget-html" data-id="b4bb730" 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-cd9bf11 elementor-widget elementor-widget-html" data-id="cd9bf11" 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/04/AMP-JamCenter-Bateria-Knocking-on-heavens-door.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-f35ced1 elementor-widget elementor-widget-template" data-id="f35ced1" 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>
