{"id":2822,"date":"2025-07-18T05:58:07","date_gmt":"2025-07-18T05:58:07","guid":{"rendered":"https:\/\/produccionmusic.com\/blog\/?p=2822"},"modified":"2026-08-31T07:09:00","modified_gmt":"2026-08-31T07:09:00","slug":"asistente_de_acordes_y_escalas_para_piano","status":"publish","type":"post","link":"https:\/\/produccionmusic.com\/blog\/asistente_de_acordes_y_escalas_para_piano\/","title":{"rendered":"Asistente de Acordes y Escalas para Piano"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"2822\" class=\"elementor elementor-2822\">\n\t\t\t\t<div class=\"elementor-element elementor-element-46de2bc e-flex e-con-boxed e-con e-parent\" data-id=\"46de2bc\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-e350eb6 elementor-widget elementor-widget-html\" data-id=\"e350eb6\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<style>\n  #acordes-app, #acordes-app * {\n    box-sizing: border-box !important;\n    margin: 0 !important;\n    padding: 0 !important;\n    border: none !important;\n    font-family: 'Space Grotesk', sans-serif !important;\n    line-height: normal !important;\n  }\n\n  #acordes-app {\n    background: #000 !important;\n    color: #fff !important;\n    display: flex !important;\n    flex-direction: column !important;\n    align-items: center !important;\n    justify-content: flex-start !important;\n    padding: 30px 20px !important;\n    border-radius: 16px !important;\n    margin: 20px auto !important;\n    max-width: 100% !important;\n    width: 100% !important;\n  }\n\n  #acordes-app .logo-container {\n    text-align: center !important;\n    margin-bottom: 20px !important;\n    display: block !important;\n    background: #000 !important;\n  }\n\n  #acordes-app .logo-container img {\n    max-width: 200px !important;\n    height: auto !important;\n    display: inline-block !important;\n  }\n\n  #acordes-app .app-title {\n    font-family: 'Outfit', sans-serif !important;\n    color: #FF6600 !important;\n    margin-bottom: 30px !important;\n    text-align: center !important;\n    font-size: 32px !important;\n    font-weight: 800 !important;\n    text-shadow: 0 0 30px rgba(255,102,0,0.4) !important;\n    letter-spacing: -1px !important;\n    text-transform: uppercase !important;\n    display: block !important;\n    width: 100% !important;\n  }\n\n  #acordes-app .main-container {\n    width: 100% !important;\n    max-width: 900px !important;\n    display: flex !important;\n    flex-direction: column !important;\n    align-items: center !important;\n    gap: 30px !important;\n  }\n\n  #acordes-app .controls {\n    display: flex !important;\n    gap: 20px !important;\n    align-items: stretch !important;\n    flex-wrap: wrap !important;\n    justify-content: center !important;\n    width: 100% !important;\n  }\n\n  #acordes-app .control-group {\n    display: flex !important;\n    flex-direction: column !important;\n    align-items: center !important;\n    background: linear-gradient(180deg, rgba(255,102,0,0.10), rgba(255,102,0,0.03)) !important;\n    border: 1px solid rgba(255,102,0,0.35) !important;\n    border-radius: 14px !important;\n    padding: 16px 20px !important;\n    box-shadow: 0 0 0 1px rgba(255,102,0,0.15), 0 16px 44px rgba(255,102,0,0.15) !important;\n    min-width: 180px !important;\n  }\n\n  #acordes-app .control-group .control-label {\n    font-family: 'Outfit', sans-serif !important;\n    font-size: 12px !important;\n    margin-bottom: 10px !important;\n    color: #FF6600 !important;\n    font-weight: 700 !important;\n    text-transform: uppercase !important;\n    letter-spacing: 2px !important;\n    display: block !important;\n  }\n\n  #acordes-app .control-group select {\n    font-family: 'Space Grotesk', sans-serif !important;\n    padding: 10px 16px !important;\n    font-size: 14px !important;\n    border-radius: 8px !important;\n    border: 2px solid #FF6600 !important;\n    background: #0a0a0a !important;\n    color: #fff !important;\n    cursor: pointer !important;\n    min-width: 160px !important;\n    width: auto !important;\n    height: auto !important;\n    font-weight: 500 !important;\n    box-shadow: 0 4px 20px rgba(255,102,0,0.2) !important;\n    -webkit-appearance: menulist !important;\n    appearance: menulist !important;\n  }\n\n  #acordes-app .control-group select option {\n    background: #111 !important;\n    color: #fff !important;\n    padding: 10px !important;\n  }\n\n  #acordes-app .nav-arrows {\n    display: flex !important;\n    gap: 12px !important;\n    margin-top: 14px !important;\n    justify-content: center !important;\n    align-items: center !important;\n  }\n\n  #acordes-app .nav-arrow {\n    width: 38px !important;\n    height: 38px !important;\n    border: 1px solid rgba(255,102,0,0.5) !important;\n    border-radius: 12px !important;\n    background: linear-gradient(145deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02)) !important;\n    cursor: pointer !important;\n    display: flex !important;\n    align-items: center !important;\n    justify-content: center !important;\n    padding: 0 !important;\n    box-shadow: 0 2px 8px rgba(0,0,0,0.3) !important;\n  }\n\n  #acordes-app .nav-arrow:hover {\n    background: linear-gradient(145deg, rgba(255,102,0,0.15), rgba(255,102,0,0.05)) !important;\n    box-shadow: 0 8px 25px rgba(255,102,0,0.35) !important;\n  }\n\n  #acordes-app .nav-arrow svg {\n    width: 20px !important;\n    height: 20px !important;\n    display: block !important;\n  }\n\n  #acordes-app .nav-arrow svg path {\n    fill: none !important;\n    stroke: #FF6600 !important;\n    stroke-width: 2.5 !important;\n    stroke-linecap: round !important;\n    stroke-linejoin: round !important;\n  }\n\n  #acordes-app .piano-wrapper {\n    background: linear-gradient(180deg, rgba(255,102,0,0.08), rgba(255,102,0,0.02)) !important;\n    border: 1px solid rgba(255,102,0,0.3) !important;\n    border-radius: 20px !important;\n    padding: 30px 20px !important;\n    box-shadow: 0 0 50px rgba(255,102,0,0.15), inset 0 0 30px rgba(0,0,0,0.3) !important;\n    width: 100% !important;\n    max-width: 650px !important;\n    display: block !important;\n  }\n\n  #acordes-app .piano-container {\n    display: flex !important;\n    justify-content: center !important;\n    overflow: hidden !important;\n    width: 100% !important;\n  }\n\n  #acordes-app .piano {\n    position: relative !important;\n    display: flex !important;\n    height: 180px !important;\n    transform-origin: center center !important;\n  }\n\n  #acordes-app .key {\n    position: relative !important;\n    cursor: pointer !important;\n    display: flex !important;\n    flex-direction: column !important;\n    justify-content: flex-end !important;\n    align-items: center !important;\n    padding: 0 0 10px 0 !important;\n    margin: 0 !important;\n    border-radius: 0 !important;\n    transition: none !important;\n  }\n\n  #acordes-app .key.white-key {\n    width: 40px !important;\n    height: 180px !important;\n    background: linear-gradient(180deg, #fff 0%, #f0f0f0 85%, #ddd 100%) !important;\n    border: 1px solid #bbb !important;\n    border-radius: 0 0 6px 6px !important;\n    z-index: 1 !important;\n    box-shadow: 0 4px 8px rgba(0,0,0,0.3), inset 0 -4px 6px rgba(0,0,0,0.1) !important;\n    flex-shrink: 0 !important;\n  }\n\n  #acordes-app .key.black-key {\n    width: 28px !important;\n    height: 110px !important;\n    background: linear-gradient(180deg, #444 0%, #222 50%, #111 100%) !important;\n    border-radius: 0 0 4px 4px !important;\n    margin-left: -14px !important;\n    margin-right: -14px !important;\n    z-index: 2 !important;\n    box-shadow: 0 4px 8px rgba(0,0,0,0.5), inset 0 -2px 4px rgba(255,255,255,0.05) !important;\n    flex-shrink: 0 !important;\n  }\n\n  #acordes-app .key.white-key:active,\n  #acordes-app .key.white-key.active {\n    background: linear-gradient(180deg, #eee 0%, #ddd 100%) !important;\n    box-shadow: 0 2px 4px rgba(0,0,0,0.2) !important;\n  }\n\n  #acordes-app .key.black-key:active,\n  #acordes-app .key.black-key.active {\n    background: linear-gradient(180deg, #333 0%, #111 100%) !important;\n    box-shadow: 0 2px 4px rgba(0,0,0,0.4) !important;\n  }\n\n  \/* Highlight uniforme para teclas blancas - naranja m\u00e1s oscuro *\/\n  #acordes-app .key.white-key.highlight {\n    background: #CC5500 !important;\n    box-shadow: 0 0 20px #993300, 0 0 40px rgba(153,51,0,0.5) !important;\n  }\n\n  \/* Highlight uniforme para teclas negras - naranja m\u00e1s oscuro *\/\n  #acordes-app .key.black-key.highlight {\n    background: #B34700 !important;\n    box-shadow: 0 0 20px #993300, 0 0 40px rgba(153,51,0,0.5) !important;\n  }\n\n  #acordes-app .key-label-white {\n    font-size: 9px !important;\n    color: #666 !important;\n    font-weight: 600 !important;\n    text-align: center !important;\n    display: block !important;\n    margin: 0 !important;\n    padding: 0 !important;\n  }\n\n  #acordes-app .key-label-black {\n    font-size: 7px !important;\n    color: #999 !important;\n    font-weight: 600 !important;\n    text-align: center !important;\n    padding-bottom: 5px !important;\n    display: block !important;\n    margin: 0 !important;\n  }\n\n  #acordes-app .info-card {\n    background: linear-gradient(180deg, rgba(255,102,0,0.06), rgba(255,102,0,0.02)) !important;\n    border: 1px solid rgba(255,102,0,0.25) !important;\n    border-radius: 14px !important;\n    padding: 20px 24px !important;\n    max-width: 600px !important;\n    text-align: center !important;\n    display: block !important;\n  }\n\n  #acordes-app .info-card .info-title {\n    font-family: 'Outfit', sans-serif !important;\n    color: #FF6600 !important;\n    margin-bottom: 12px !important;\n    font-size: 18px !important;\n    font-weight: 700 !important;\n    text-transform: uppercase !important;\n    letter-spacing: 1px !important;\n    display: block !important;\n  }\n\n  #acordes-app .info-card p {\n    color: #8f9aa8 !important;\n    font-size: 14px !important;\n    line-height: 1.6 !important;\n    margin: 0 !important;\n    font-weight: 400 !important;\n  }\n\n  @media (max-width: 600px) {\n    #acordes-app .controls { \n      flex-direction: column !important; \n      align-items: center !important; \n    }\n    #acordes-app .control-group { \n      width: 100% !important; \n      max-width: 280px !important; \n    }\n    #acordes-app .piano-wrapper { \n      padding: 20px 10px !important; \n    }\n    #acordes-app .app-title {\n      font-size: 24px !important;\n    }\n  }\n<\/style>\n\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Outfit:wght@300;400;500;600;700;800;900&family=Space+Grotesk:wght@400;500;600;700&display=swap\" rel=\"stylesheet\">\n\n<div id=\"acordes-app\">\n  <div class=\"logo-container\">\n    <img decoding=\"async\" src=\"https:\/\/produccionmusic.com\/assets\/img\/logo-dark@2x.png\" alt=\"Produccion Music Logo\" onerror=\"this.style.display='none'\">\n  <\/div>\n\n  <div class=\"app-title\">Asistente de Acordes y Escalas<\/div>\n\n  <div class=\"main-container\">\n    <div class=\"controls\">\n      <div class=\"control-group\">\n        <span class=\"control-label\">Tonalidad<\/span>\n        <select id=\"pm-tonalidad\">\n          <option value=\"\">Selecciona...<\/option>\n          <option value=\"C\">Do (C)<\/option>\n          <option value=\"C#\">Do# (C#)<\/option>\n          <option value=\"D\">Re (D)<\/option>\n          <option value=\"D#\">Re# (D#)<\/option>\n          <option value=\"E\">Mi (E)<\/option>\n          <option value=\"F\">Fa (F)<\/option>\n          <option value=\"F#\">Fa# (F#)<\/option>\n          <option value=\"G\">Sol (G)<\/option>\n          <option value=\"G#\">Sol# (G#)<\/option>\n          <option value=\"A\">La (A)<\/option>\n          <option value=\"A#\">La# (A#)<\/option>\n          <option value=\"B\">Si (B)<\/option>\n        <\/select>\n        <div class=\"nav-arrows\">\n          <button class=\"nav-arrow prev\" data-target=\"pm-tonalidad\" data-direction=\"prev\" type=\"button\">\n            <svg viewBox=\"0 0 24 24\"><path d=\"M15 18l-6-6 6-6\"\/><\/svg>\n          <\/button>\n          <button class=\"nav-arrow next\" data-target=\"pm-tonalidad\" data-direction=\"next\" type=\"button\">\n            <svg viewBox=\"0 0 24 24\"><path d=\"M9 6l6 6-6 6\"\/><\/svg>\n          <\/button>\n        <\/div>\n      <\/div>\n\n      <div class=\"control-group\">\n        <span class=\"control-label\">Acorde<\/span>\n        <select id=\"pm-acorde\">\n          <option value=\"\">Selecciona...<\/option>\n          <option value=\"major\">Mayor<\/option>\n          <option value=\"minor\">Menor<\/option>\n          <option value=\"maj7\">Mayor 7<\/option>\n          <option value=\"min7\">Menor 7<\/option>\n          <option value=\"dom7\">Dominante 7<\/option>\n          <option value=\"dim\">Disminuido<\/option>\n          <option value=\"dim7\">Disminuido 7<\/option>\n          <option value=\"half-dim7\">Semidisminuido<\/option>\n          <option value=\"aug\">Aumentado<\/option>\n          <option value=\"aug7\">Aumentado 7<\/option>\n          <option value=\"sus2\">Suspendido 2<\/option>\n          <option value=\"sus4\">Suspendido 4<\/option>\n        <\/select>\n        <div class=\"nav-arrows\">\n          <button class=\"nav-arrow prev\" data-target=\"pm-acorde\" data-direction=\"prev\" type=\"button\">\n            <svg viewBox=\"0 0 24 24\"><path d=\"M15 18l-6-6 6-6\"\/><\/svg>\n          <\/button>\n          <button class=\"nav-arrow next\" data-target=\"pm-acorde\" data-direction=\"next\" type=\"button\">\n            <svg viewBox=\"0 0 24 24\"><path d=\"M9 6l6 6-6 6\"\/><\/svg>\n          <\/button>\n        <\/div>\n      <\/div>\n\n      <div class=\"control-group\">\n        <span class=\"control-label\">Escala<\/span>\n        <select id=\"pm-escala\">\n          <option value=\"\">Selecciona...<\/option>\n          <option value=\"major-scale\">Mayor<\/option>\n          <option value=\"minor-scale\">Menor Natural<\/option>\n          <option value=\"harmonic-minor-scale\">Menor Arm\u00f3nica<\/option>\n          <option value=\"melodic-minor-scale\">Menor Mel\u00f3dica<\/option>\n          <option value=\"pentatonic-major-scale\">Pentat\u00f3nica Mayor<\/option>\n          <option value=\"pentatonic-minor-scale\">Pentat\u00f3nica Menor<\/option>\n          <option value=\"blues-scale\">Blues<\/option>\n          <option value=\"chromatic-scale\">Crom\u00e1tica<\/option>\n          <option value=\"whole-tone-scale\">Tonos Enteros<\/option>\n          <option value=\"diminished-scale\">Disminuida<\/option>\n          <option value=\"augmented-scale\">Aumentada<\/option>\n          <option value=\"dorian-scale\">D\u00f3rica<\/option>\n          <option value=\"phrygian-scale\">Frigia<\/option>\n          <option value=\"lydian-scale\">Lidia<\/option>\n          <option value=\"mixolydian-scale\">Mixolidia<\/option>\n          <option value=\"locrian-scale\">Locria<\/option>\n        <\/select>\n        <div class=\"nav-arrows\">\n          <button class=\"nav-arrow prev\" data-target=\"pm-escala\" data-direction=\"prev\" type=\"button\">\n            <svg viewBox=\"0 0 24 24\"><path d=\"M15 18l-6-6 6-6\"\/><\/svg>\n          <\/button>\n          <button class=\"nav-arrow next\" data-target=\"pm-escala\" data-direction=\"next\" type=\"button\">\n            <svg viewBox=\"0 0 24 24\"><path d=\"M9 6l6 6-6 6\"\/><\/svg>\n          <\/button>\n        <\/div>\n      <\/div>\n    <\/div>\n\n    <div class=\"piano-wrapper\">\n      <div class=\"piano-container\">\n        <div class=\"piano\">\n          <div class=\"key white-key\" data-note=\"C3\"><span class=\"key-label-white\">C3<\/span><\/div>\n          <div class=\"key black-key\" data-note=\"C#3\"><span class=\"key-label-black\">C#3<\/span><\/div>\n          <div class=\"key white-key\" data-note=\"D3\"><span class=\"key-label-white\">D3<\/span><\/div>\n          <div class=\"key black-key\" data-note=\"D#3\"><span class=\"key-label-black\">D#3<\/span><\/div>\n          <div class=\"key white-key\" data-note=\"E3\"><span class=\"key-label-white\">E3<\/span><\/div>\n          <div class=\"key white-key\" data-note=\"F3\"><span class=\"key-label-white\">F3<\/span><\/div>\n          <div class=\"key black-key\" data-note=\"F#3\"><span class=\"key-label-black\">F#3<\/span><\/div>\n          <div class=\"key white-key\" data-note=\"G3\"><span class=\"key-label-white\">G3<\/span><\/div>\n          <div class=\"key black-key\" data-note=\"G#3\"><span class=\"key-label-black\">G#3<\/span><\/div>\n          <div class=\"key white-key\" data-note=\"A3\"><span class=\"key-label-white\">A3<\/span><\/div>\n          <div class=\"key black-key\" data-note=\"A#3\"><span class=\"key-label-black\">A#3<\/span><\/div>\n          <div class=\"key white-key\" data-note=\"B3\"><span class=\"key-label-white\">B3<\/span><\/div>\n          <div class=\"key white-key\" data-note=\"C4\"><span class=\"key-label-white\">C4<\/span><\/div>\n          <div class=\"key black-key\" data-note=\"C#4\"><span class=\"key-label-black\">C#4<\/span><\/div>\n          <div class=\"key white-key\" data-note=\"D4\"><span class=\"key-label-white\">D4<\/span><\/div>\n          <div class=\"key black-key\" data-note=\"D#4\"><span class=\"key-label-black\">D#4<\/span><\/div>\n          <div class=\"key white-key\" data-note=\"E4\"><span class=\"key-label-white\">E4<\/span><\/div>\n          <div class=\"key white-key\" data-note=\"F4\"><span class=\"key-label-white\">F4<\/span><\/div>\n          <div class=\"key black-key\" data-note=\"F#4\"><span class=\"key-label-black\">F#4<\/span><\/div>\n          <div class=\"key white-key\" data-note=\"G4\"><span class=\"key-label-white\">G4<\/span><\/div>\n          <div class=\"key black-key\" data-note=\"G#4\"><span class=\"key-label-black\">G#4<\/span><\/div>\n          <div class=\"key white-key\" data-note=\"A4\"><span class=\"key-label-white\">A4<\/span><\/div>\n          <div class=\"key black-key\" data-note=\"A#4\"><span class=\"key-label-black\">A#4<\/span><\/div>\n          <div class=\"key white-key\" data-note=\"B4\"><span class=\"key-label-white\">B4<\/span><\/div>\n        <\/div>\n      <\/div>\n    <\/div>\n\n    <div class=\"info-card\">\n      <span class=\"info-title\">C\u00f3mo usar<\/span>\n      <p>Selecciona una tonalidad y luego elige un acorde o una escala. Usa las flechas \u2039 \u203a para navegar. Tambi\u00e9n puedes hacer clic en cualquier tecla del piano.<\/p>\n    <\/div>\n  <\/div>\n<\/div>\n\n<script>\n(function() {\n  function initAcordesApp() {\n    if (typeof Tone === 'undefined') {\n      console.log('Esperando a que Tone.js cargue...');\n      setTimeout(initAcordesApp, 500);\n      return;\n    }\n\n    var app = document.getElementById('acordes-app');\n    if (!app) return;\n\n    var pianoContainer = app.querySelector('.piano-container');\n    var pianoElement = app.querySelector('.piano');\n\n    var piano = new Tone.Sampler({\n      urls: { C4: \"C4.mp3\" },\n      baseUrl: \"https:\/\/tonejs.github.io\/audio\/salamander\/\",\n      onload: function() { console.log(\"Piano cargado correctamente\"); }\n    }).toDestination();\n\n    document.addEventListener('click', function() {\n      if (Tone.context.state !== 'running') Tone.start();\n    }, { once: true });\n\n    function updatePianoScale() {\n      var containerWidth = pianoContainer.clientWidth;\n      var pianoWidth = 560;\n      if (pianoWidth > containerWidth) {\n        pianoElement.style.transform = 'scale(' + (containerWidth \/ pianoWidth * 0.95) + ')';\n      } else {\n        pianoElement.style.transform = 'scale(1)';\n      }\n    }\n    updatePianoScale();\n    window.addEventListener('resize', updatePianoScale);\n\n    var notes = {\n      'C': ['C3','C#3','D3','D#3','E3','F3','F#3','G3','G#3','A3','A#3','B3'],\n      'C#': ['C#3','D3','D#3','E3','F3','F#3','G3','G#3','A3','A#3','B3','C4'],\n      'D': ['D3','D#3','E3','F3','F#3','G3','G#3','A3','A#3','B3','C4','C#4'],\n      'D#': ['D#3','E3','F3','F#3','G3','G#3','A3','A#3','B3','C4','C#4','D4'],\n      'E': ['E3','F3','F#3','G3','G#3','A3','A#3','B3','C4','C#4','D4','D#4'],\n      'F': ['F3','F#3','G3','G#3','A3','A#3','B3','C4','C#4','D4','D#4','E4'],\n      'F#': ['F#3','G3','G#3','A3','A#3','B3','C4','C#4','D4','D#4','E4','F4'],\n      'G': ['G3','G#3','A3','A#3','B3','C4','C#4','D4','D#4','E4','F4','F#4'],\n      'G#': ['G#3','A3','A#3','B3','C4','C#4','D4','D#4','E4','F4','F#4','G4'],\n      'A': ['A3','A#3','B3','C4','C#4','D4','D#4','E4','F4','F#4','G4','G#4'],\n      'A#': ['A#3','B3','C4','C#4','D4','D#4','E4','F4','F#4','G4','G#4','A4'],\n      'B': ['B3','C4','C#4','D4','D#4','E4','F4','F#4','G4','G#4','A4','A#4']\n    };\n\n    var scales = {\n      'major-scale': [0,2,4,5,7,9,11],\n      'minor-scale': [0,2,3,5,7,8,10],\n      'harmonic-minor-scale': [0,2,3,5,7,8,11],\n      'melodic-minor-scale': [0,2,3,5,7,9,11],\n      'chromatic-scale': [0,1,2,3,4,5,6,7,8,9,10,11],\n      'pentatonic-major-scale': [0,2,4,7,9],\n      'pentatonic-minor-scale': [0,3,5,7,10],\n      'blues-scale': [0,3,5,6,7,10],\n      'whole-tone-scale': [0,2,4,6,8,10],\n      'diminished-scale': [0,1,3,4,6,7,9,10],\n      'augmented-scale': [0,3,4,7,8,11],\n      'lydian-scale': [0,2,4,6,7,9,11],\n      'mixolydian-scale': [0,2,4,5,7,9,10],\n      'dorian-scale': [0,2,3,5,7,9,10],\n      'phrygian-scale': [0,1,3,5,7,8,10],\n      'locrian-scale': [0,1,3,5,6,8,10]\n    };\n\n    var chords = {\n      'major': [0,4,7],\n      'minor': [0,3,7],\n      'maj7': [0,4,7,11],\n      'min7': [0,3,7,10],\n      'dom7': [0,4,7,10],\n      'dim': [0,3,6],\n      'dim7': [0,3,6,9],\n      'half-dim7': [0,3,6,10],\n      'aug': [0,4,8],\n      'aug7': [0,4,8,10],\n      'sus2': [0,2,7],\n      'sus4': [0,5,7]\n    };\n\n    var scaleTimeouts = [];\n\n    function stopAllSounds() {\n      piano.releaseAll();\n      scaleTimeouts.forEach(function(t) { clearTimeout(t); });\n      scaleTimeouts = [];\n      app.querySelectorAll('.key').forEach(function(k) { k.classList.remove('active'); });\n    }\n\n    function playNote(note) {\n      if (Tone.context.state !== 'running') Tone.start();\n      stopAllSounds();\n      piano.triggerAttackRelease(note, 0.8);\n      var key = app.querySelector('[data-note=\"' + note + '\"]');\n      if (key) {\n        key.classList.add('active');\n        setTimeout(function() { key.classList.remove('active'); }, 200);\n      }\n    }\n\n    function playChord(arr) {\n      if (Tone.context.state !== 'running') Tone.start();\n      stopAllSounds();\n      piano.triggerAttackRelease(arr, 1.2);\n      arr.forEach(function(n) {\n        var k = app.querySelector('[data-note=\"' + n + '\"]');\n        if (k) {\n          k.classList.add('active');\n          setTimeout(function() { k.classList.remove('active'); }, 200);\n        }\n      });\n    }\n\n    function playScale(arr) {\n      if (Tone.context.state !== 'running') Tone.start();\n      stopAllSounds();\n      arr.forEach(function(n, i) {\n        var t = setTimeout(function() {\n          piano.triggerAttackRelease(n, 0.5);\n          var k = app.querySelector('[data-note=\"' + n + '\"]');\n          if (k) {\n            k.classList.add('active');\n            setTimeout(function() { k.classList.remove('active'); }, 150);\n          }\n        }, i * 280);\n        scaleTimeouts.push(t);\n      });\n    }\n\n    function highlightKeys(keys) {\n      app.querySelectorAll('.key').forEach(function(k) { k.classList.remove('highlight'); });\n      keys.forEach(function(n) {\n        var k = app.querySelector('[data-note=\"' + n + '\"]');\n        if (k) k.classList.add('highlight');\n      });\n    }\n\n    var tonalidad = '', acorde = '', escala = '';\n    var tonSel = app.querySelector('#pm-tonalidad');\n    var acSel = app.querySelector('#pm-acorde');\n    var escSel = app.querySelector('#pm-escala');\n\n    function updateHighlights() {\n      highlightKeys([]);\n      if (tonalidad && escala) {\n        highlightKeys(scales[escala].map(function(i) { return notes[tonalidad][i]; }));\n      } else if (tonalidad && acorde) {\n        highlightKeys(chords[acorde].map(function(i) { return notes[tonalidad][i]; }));\n      }\n    }\n\n    function navSelect(id, dir) {\n      var sel = app.querySelector('#' + id);\n      var idx = sel.selectedIndex;\n      if (dir === 'next') {\n        idx = idx < sel.options.length - 1 ? (idx === 0 ? 1 : idx + 1) : 1;\n      } else {\n        idx = idx <= 1 ? sel.options.length - 1 : idx - 1;\n      }\n      sel.selectedIndex = idx;\n      sel.dispatchEvent(new Event('change'));\n    }\n\n    app.querySelectorAll('.nav-arrow').forEach(function(a) {\n      a.addEventListener('click', function(e) {\n        e.preventDefault();\n        navSelect(a.dataset.target, a.dataset.direction);\n      });\n    });\n\n    tonSel.addEventListener('change', function(e) {\n      tonalidad = e.target.value;\n      updateHighlights();\n      if (tonalidad && acorde) {\n        playChord(chords[acorde].map(function(i) { return notes[tonalidad][i]; }));\n      } else if (tonalidad && escala) {\n        playScale(scales[escala].map(function(i) { return notes[tonalidad][i]; }));\n      }\n    });\n\n    acSel.addEventListener('change', function(e) {\n      acorde = e.target.value;\n      escala = '';\n      escSel.value = '';\n      if (acorde && tonalidad) {\n        playChord(chords[acorde].map(function(i) { return notes[tonalidad][i]; }));\n      }\n      updateHighlights();\n    });\n\n    escSel.addEventListener('change', function(e) {\n      escala = e.target.value;\n      acorde = '';\n      acSel.value = '';\n      if (escala && tonalidad) {\n        playScale(scales[escala].map(function(i) { return notes[tonalidad][i]; }));\n      }\n      updateHighlights();\n    });\n\n    app.querySelectorAll('.key').forEach(function(key) {\n      key.addEventListener('click', function() {\n        var note = key.dataset.note;\n        var root = note.replace(\/\\d\/g, '');\n        tonSel.value = root;\n        tonalidad = root;\n        updateHighlights();\n        \n        \/\/ Si hay acorde o escala seleccionada, reproducir directamente sin tono suelto\n        if (acorde) {\n          playChord(chords[acorde].map(function(i) { return notes[tonalidad][i]; }));\n        } else if (escala) {\n          playScale(scales[escala].map(function(i) { return notes[tonalidad][i]; }));\n        } else {\n          \/\/ Solo si no hay nada seleccionado, reproducir el tono suelto\n          playNote(note);\n        }\n      });\n    });\n\n    console.log('Asistente de Acordes inicializado correctamente');\n  }\n\n  if (document.readyState === 'loading') {\n    document.addEventListener('DOMContentLoaded', initAcordesApp);\n  } else {\n    initAcordesApp();\n  }\n})();\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-36c3ead8 e-flex e-con-boxed e-con e-parent\" data-id=\"36c3ead8\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-c2f1ebd elementor-widget elementor-widget-text-editor\" data-id=\"c2f1ebd\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>\u00a0<\/p><pre>\u00a0<\/pre><h1><span style=\"font-family: arial, helvetica, sans-serif;\">Asistente de Acordes y Escalas para Piano: Desc\u00fabrelo Ahora<\/span><\/h1><p><span style=\"font-family: arial, helvetica, sans-serif;\">\u00bfEres m\u00fasico, productor musical o simplemente est\u00e1s aprendiendo piano y te cuesta visualizar acordes y escalas? \u00a1Tenemos algo para ti! Hemos desarrollado un Asistente de Acordes y Escalas de Piano gratuito, pensado para facilitar tu proceso creativo y de aprendizaje musical.<\/span><\/p><p><span style=\"font-family: arial, helvetica, sans-serif;\">Este asistente est\u00e1 disponible online y es tan intuitivo que en segundos tendr\u00e1s en pantalla todas las notas que componen cualquier acorde o escala, en cualquier tonalidad.<\/span><\/p><h3><span style=\"font-family: arial, helvetica, sans-serif;\"><strong>\u00bfQu\u00e9 es el Asistente de Acordes y Escalas?<\/strong><\/span><br \/><span style=\"font-family: arial, helvetica, sans-serif;\">Es una herramienta interactiva para m\u00fasicos, pianistas y productores musicales, que te permite visualizar al instante qu\u00e9 notas forman un acorde o una escala en un tono determinado.<\/span><br \/><span style=\"font-family: arial, helvetica, sans-serif;\">Ideal para:<\/span><\/h3><ul><li><p><span style=\"font-family: arial, helvetica, sans-serif;\">Componer nuevas canciones<\/span><\/p><\/li><li><p><span style=\"font-family: arial, helvetica, sans-serif;\">Analizar progresiones arm\u00f3nicas<\/span><\/p><\/li><li><p><span style=\"font-family: arial, helvetica, sans-serif;\">Estudiar teor\u00eda musical<\/span><\/p><\/li><li><p><span style=\"font-family: arial, helvetica, sans-serif;\">Crear arreglos para tus producciones<\/span><\/p><\/li><\/ul><p><span style=\"font-family: arial, helvetica, sans-serif;\">Y lo mejor de todo: \u00a1es totalmente gratis!<\/span><\/p><h3><span style=\"font-family: arial, helvetica, sans-serif;\"><strong>\u00bfC\u00f3mo funciona?<\/strong><\/span><br \/><span style=\"font-family: arial, helvetica, sans-serif;\">Su funcionamiento es muy sencillo y directo. Desde un men\u00fa principal puedes seguir estos pasos:<\/span><\/h3><ol start=\"1\"><li><p><span style=\"font-family: arial, helvetica, sans-serif;\">Elige una tonalidad<\/span><br \/><span style=\"font-family: arial, helvetica, sans-serif;\">Selecciona el tono musical en el que deseas trabajar (por ejemplo, C, G#, Fm, etc.).<br \/>\u00bfNo sabes en qu\u00e9 tonalidad est\u00e1 tu canci\u00f3n? Det\u00e9ctala en segundos con nuestro <br \/><a href=\"https:\/\/produccionmusic.com\/blog\/analizar-bpm-tonalidad-online\/\"><span style=\"color: #ff6600;\"><strong>Analizador de BPM y tonalidad<\/strong><\/span><\/a> y luego usa este asistente para ver todos los acordes y escalas de ese tono.<br \/><br \/><\/span><\/p><\/li><li><p><span style=\"font-family: arial, helvetica, sans-serif;\">Visualiza acordes<\/span><br \/><span style=\"font-family: arial, helvetica, sans-serif;\">Desde el men\u00fa de acordes, elige el tipo de acorde (mayor, menor, s\u00e9ptima, disminuido, etc.) y el piano virtual te mostrar\u00e1 autom\u00e1ticamente las notas que lo componen seg\u00fan la tonalidad elegida.<\/span><\/p><\/li><li><p><span style=\"font-family: arial, helvetica, sans-serif;\">Explora escalas<\/span><br \/><span style=\"font-family: arial, helvetica, sans-serif;\">Desde el men\u00fa de escalas, selecciona entre diferentes modos y tipos de escala (mayor, menor, pentat\u00f3nica, d\u00f3rica, etc.). Al instante, ver\u00e1s en el piano qu\u00e9 notas forman esa escala en la tonalidad seleccionada.<\/span><\/p><\/li><\/ol><h3><span style=\"font-family: arial, helvetica, sans-serif;\"><strong>\u00bfPara qui\u00e9n es esta herramienta?<\/strong><\/span><\/h3><ul><li><p><span style=\"font-family: arial, helvetica, sans-serif;\">Productores musicales que buscan componer sin perder tiempo con teor\u00eda<\/span><\/p><\/li><li><p><span style=\"font-family: arial, helvetica, sans-serif;\">Compositores en busca de inspiraci\u00f3n arm\u00f3nica<\/span><\/p><\/li><li><p><span style=\"font-family: arial, helvetica, sans-serif;\">Estudiantes de m\u00fasica que quieren practicar visualizando escalas y acordes<br \/><\/span><\/p><\/li><li><span style=\"font-family: arial, helvetica, sans-serif;\"><span style=\"font-family: arial, helvetica, sans-serif;\">Pianistas y teclistas principiantes y avanzados<\/span><\/span><\/li><\/ul><h3><span style=\"font-family: arial, helvetica, sans-serif;\"><strong>Beneficios del Asistente de Acordes y Escalas<\/strong><\/span><\/h3><ul><li><p><span style=\"font-family: arial, helvetica, sans-serif;\">Ahorra tiempo en tus sesiones de composici\u00f3n<\/span><\/p><\/li><li><p><span style=\"font-family: arial, helvetica, sans-serif;\">Mejora tu comprensi\u00f3n de teor\u00eda musical<\/span><\/p><\/li><li><p><span style=\"font-family: arial, helvetica, sans-serif;\">Ideal para practicar o experimentar con nuevas tonalidades<\/span><\/p><\/li><li><p><span style=\"font-family: arial, helvetica, sans-serif;\">No necesitas instalar nada: funciona directamente desde el navegador<\/span><\/p><\/li><li><p><span style=\"font-family: arial, helvetica, sans-serif;\">Completamente gratis<\/span><\/p><\/li><\/ul><h3><span style=\"font-family: arial, helvetica, sans-serif;\"><strong>\u00bfPor qu\u00e9 esta herramienta es tan \u00fatil para m\u00fasicos y productores?<\/strong><\/span><br \/><span style=\"font-family: arial, helvetica, sans-serif;\">Hoy en d\u00eda, el tiempo es oro. Muchas veces te inspiras en un momento pero necesitas una forma r\u00e1pida de encontrar la escala adecuada o visualizar un acorde. Nuestro asistente est\u00e1 dise\u00f1ado precisamente para eso.<\/span><\/h3><p><span style=\"font-family: arial, helvetica, sans-serif;\">Adem\u00e1s, conocer bien las relaciones entre tonalidades, escalas y acordes te permitir\u00e1 componer m\u00fasica m\u00e1s rica, coherente y expresiva. Este asistente no solo te da la informaci\u00f3n, sino que tambi\u00e9n refuerza tu aprendizaje musical de forma visual e interactiva.<\/span><\/p><p><span style=\"font-family: arial, helvetica, sans-serif;\">En nuestros <a href=\"https:\/\/produccionmusic.com\/#cursos\"><span style=\"color: #ff6600;\"><strong>Curso de Producci\u00f3n Musical<\/strong><\/span><\/a> tambi\u00e9n abarcamos la parte de composici\u00f3n y armon\u00eda musical para que aprendas a desenvolverte con: acordes, escalas, tonalidad y <a href=\"https:\/\/es.wikipedia.org\/wiki\/Teor%C3%ADa_musical\"><span style=\"color: #ff6600;\">teor\u00eda musical<\/span><\/a>.<\/span><\/p><p><span style=\"font-family: arial, helvetica, sans-serif; font-size: 16px;\">Si estas interesado en aprender a grabar voces, producir musica, mezclar y masterizar tus canciones en ProduccionMuisc te ofrecemos cursos en clases personalizadas que se adaptan a tu nivel de conocimientos y objetivos que quieras alcanzar.<\/span><\/p><p><span style=\"font-family: arial, helvetica, sans-serif;\">Luis Sancho.-\u00a0Compositor, Productor, Ingeniero de Mezcla \u2013 Masterizaci\u00f3n y Dj. <\/span><br \/><span style=\"font-family: arial, helvetica, sans-serif; font-size: 16px;\">Especialista en software DAW y Dj.<\/span><\/p><p><span style=\"font-family: arial, helvetica, sans-serif; font-size: 16px;\">Profesor en\u00a0escuela profesional\u00a0<strong><span style=\"color: #ff6600;\"><a style=\"color: #ff6600;\" href=\"https:\/\/produccionmusic.com\/\">ProduccionMusic.com <\/a><\/span><\/strong><\/span><\/p><p><span style=\"font-family: arial, helvetica, sans-serif;\"><a href=\"https:\/\/produccionmusic.com\/\"><img fetchpriority=\"high\" decoding=\"async\" src=\"https:\/\/produccionmusic.com\/blog\/wp-content\/uploads\/2024\/01\/logog.jpg\" sizes=\"(max-width: 420px) 100vw, 420px\" srcset=\"https:\/\/produccionmusic.com\/blog\/wp-content\/uploads\/2024\/01\/logog.jpg 420w, https:\/\/produccionmusic.com\/blog\/wp-content\/uploads\/2024\/01\/logog-280x113.jpg 280w\" alt=\"Curso producci\u00f3n musical Dj en clases particulares\" width=\"420\" height=\"170\" \/><\/a><\/span><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Asistente de Acordes y Escalas Tonalidad Selecciona&#8230;Do (C)Do# (C#)Re (D)Re# (D#)Mi (E)Fa (F)Fa# (F#)Sol (G)Sol# (G#)La (A)La# (A#)Si (B) Acorde Selecciona&#8230;MayorMenorMayor 7Menor 7Dominante 7DisminuidoDisminuido 7SemidisminuidoAumentadoAumentado 7Suspendido 2Suspendido 4 Escala Selecciona&#8230;MayorMenor NaturalMenor Arm\u00f3nicaMenor Mel\u00f3dicaPentat\u00f3nica MayorPentat\u00f3nica MenorBluesCrom\u00e1ticaTonos EnterosDisminuidaAumentadaD\u00f3ricaFrigiaLidiaMixolidiaLocria C3 C#3 D3 D#3 E3 F3 F#3 G3 G#3 A3 A#3 B3 C4 C#4 &#8230;<\/p>\n<a href=\"https:\/\/produccionmusic.com\/blog\/asistente_de_acordes_y_escalas_para_piano\/\" title=\"Permalink to: Asistente de Acordes y Escalas para Piano\" class=\"btn btn-extra-small btn-dark-border btn-transparent\">Leer m\u00e1s... <\/a>","protected":false},"author":2,"featured_media":2943,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7],"tags":[],"class_list":["post-2822","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-audio"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/produccionmusic.com\/blog\/wp-json\/wp\/v2\/posts\/2822","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/produccionmusic.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/produccionmusic.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/produccionmusic.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/produccionmusic.com\/blog\/wp-json\/wp\/v2\/comments?post=2822"}],"version-history":[{"count":23,"href":"https:\/\/produccionmusic.com\/blog\/wp-json\/wp\/v2\/posts\/2822\/revisions"}],"predecessor-version":[{"id":3136,"href":"https:\/\/produccionmusic.com\/blog\/wp-json\/wp\/v2\/posts\/2822\/revisions\/3136"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/produccionmusic.com\/blog\/wp-json\/wp\/v2\/media\/2943"}],"wp:attachment":[{"href":"https:\/\/produccionmusic.com\/blog\/wp-json\/wp\/v2\/media?parent=2822"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/produccionmusic.com\/blog\/wp-json\/wp\/v2\/categories?post=2822"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/produccionmusic.com\/blog\/wp-json\/wp\/v2\/tags?post=2822"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}