{"id":3044,"date":"2026-07-02T20:37:00","date_gmt":"2026-07-02T20:37:00","guid":{"rendered":"https:\/\/produccionmusic.com\/blog\/?p=3044"},"modified":"2026-08-31T06:59:37","modified_gmt":"2026-08-31T06:59:37","slug":"circulo-de-quintas-y-rueda-camelot","status":"publish","type":"post","link":"https:\/\/produccionmusic.com\/blog\/circulo-de-quintas-y-rueda-camelot\/","title":{"rendered":"C\u00edrculo de Quintas y Rueda Camelot Interactivo: la Herramienta con Sonido para M\u00fasicos, Productores y DJs"},"content":{"rendered":"<p><a href=\"https:\/\/produccionmusic.com\/blog\/analizar-bpm-tonalidad-online\/\"><div id=\"cq-app\">\r\n<style>\r\n#cq-app{\r\n    --bg-black: #08090b;\r\n    --orange: #FF6A00;\r\n    --orange-vivid: #FF7A00;\r\n    --orange-mid: #FF9A4D;\r\n    --muted: #aab3bf;\r\n    --glass-edge: rgba(255,255,255,0.10);\r\n  }\r\n#cq-app *{box-sizing:border-box;margin:0;padding:0}\r\n#cq-app, #cq-app{\r\n    height:100%;\r\n    background:#08090b;\r\n    color:#fff;\r\n    font-family:\"Inter\",system-ui,-apple-system,\"Segoe UI\",Roboto,Arial;\r\n  }\r\n#cq-app{\r\n    min-height:100vh;\r\n    display:flex;\r\n    align-items:center;\r\n    justify-content:center;\r\n    padding:22px;\r\n  }\r\n#cq-app .wrap{ \r\n    width:940px; \r\n    max-width:96vw; \r\n    display:flex; \r\n    gap:18px; \r\n    align-items:center; \r\n    justify-content:center; \r\n  }\r\n#cq-app .pane-left{ width:720px; height:720px; position:relative; display:flex; align-items:center; justify-content:center; }\r\n#cq-app svg{ width:100%; height:100%; display:block; overflow:visible; }\r\n#cq-app .slice{\r\n    transition: fill 240ms ease, opacity 240ms ease, filter 240ms ease, transform 240ms ease;\r\n    cursor:pointer;\r\n    stroke: rgba(255,255,255,0.04);\r\n    stroke-width: 0.8;\r\n    stroke-linejoin: round;\r\n  }\r\n#cq-app .slice.dimmed{ opacity:0.14; filter:none; }\r\n#cq-app .slice.base{ fill: url(#gradBase); opacity:1; }\r\n#cq-app .slice.rel{ fill: url(#gradBase); }\r\n#cq-app .slice.selected{\r\n    fill: url(#gradBase);\r\n    stroke: rgba(255,138,0,0.55);\r\n    stroke-width: 1.4;\r\n    filter: drop-shadow(0 0 30px rgba(255,106,0,0.55));\r\n    animation: pulse 1600ms infinite ease-in-out;\r\n    transform-origin: center;\r\n  }\r\n\r\n\r\n  @keyframes pulse {\r\n    0% { filter: drop-shadow(0 0 24px rgba(255,106,0,0.45)); transform: scale(1); }\r\n    50% { filter: drop-shadow(0 0 42px rgba(255,106,0,0.68)); transform: scale(1.006); }\r\n    100% { filter: drop-shadow(0 0 24px rgba(255,106,0,0.45)); transform: scale(1); }\r\n  }#cq-app .divider{ stroke: transparent; stroke-width:0; }\r\n#cq-app .label-major{ font-weight:700; text-anchor:middle; dominant-baseline:middle; pointer-events:none; fill:#EAEEF2; letter-spacing:0.3px; }\r\n#cq-app .label-major.dimmed{ opacity:0.28; fill:#6f7a86; }\r\n#cq-app .label-minor{ font-weight:600; text-anchor:middle; dominant-baseline:middle; pointer-events:none; fill:var(--muted); }\r\n#cq-app .label-minor.dimmed{ opacity:0.28; }\r\n#cq-app .orange-ring{\r\n    fill: none;\r\n    stroke: var(--orange-vivid);\r\n    stroke-width: 6.5;\r\n    filter: drop-shadow(0 0 14px rgba(255,122,0,0.55));\r\n  }\r\n#cq-app .center-card{ \r\n    position:absolute; \r\n    width:34%; \r\n    height:34%; \r\n    top:33%; \r\n    left:33%; \r\n    z-index:60; \r\n    display:flex; \r\n    align-items:center; \r\n    justify-content:center; \r\n    pointer-events:none; \r\n  }\r\n#cq-app .center-inner{\r\n    width:100%; \r\n    height:100%; \r\n    border-radius:50%; \r\n    display:flex; \r\n    flex-direction:column; \r\n    align-items:center; \r\n    justify-content:center;\r\n    background: linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.02));\r\n    border: 1px solid rgba(255,255,255,0.04);\r\n    color:#c7ced7;\r\n    text-align:center;\r\n    pointer-events:auto;\r\n    padding:8px;\r\n  }\r\n#cq-app .center-inner .center-label{ \r\n    margin-bottom:2px; \r\n    color:#fff; \r\n    font-size: clamp(0.9rem, 3.8vw, 1.5rem); \r\n    font-weight:700; \r\n    line-height:1.1;\r\n    word-wrap: break-word;\r\n    max-width: 96%;\r\n  }\r\n#cq-app .center-inner .sub{ \r\n    color:var(--muted); \r\n    font-weight:600; \r\n    margin-bottom:6px; \r\n    font-size: clamp(0.65rem, 2.8vw, 1rem);\r\n    line-height:1.2;\r\n    word-wrap: break-word;\r\n    max-width: 96%;\r\n  }\r\n#cq-app .center-inner .notes{ \r\n    color:#fff; \r\n    font-weight:800; \r\n    letter-spacing:1.2px; \r\n    margin-bottom:12px; \r\n    font-size: clamp(0.95rem, 4vw, 1.6rem);\r\n    line-height:1.1;\r\n    word-wrap: break-word;\r\n    max-width: 96%;\r\n  }\r\n#cq-app .mute-btn{\r\n    width:48px; \r\n    height:48px; \r\n    border-radius:50%;\r\n    display:flex;\r\n    align-items:center;\r\n    justify-content:center;\r\n    background: radial-gradient(circle, var(--orange) 0%, #e65c00 100%);\r\n    border: 2.5px solid var(--orange);\r\n    cursor:pointer;\r\n    box-shadow: 0 10px 36px rgba(255,102,0,0.4), 0 0 20px rgba(255,102,0,0.2);\r\n    transition: transform 180ms cubic-bezier(.2,.9,.2,1), box-shadow 180ms;\r\n    outline:none;\r\n    position:relative;\r\n    overflow:visible;\r\n    font-size: 18px;\r\n    font-weight: 900;\r\n    color: #000;\r\n    letter-spacing: 0.5px;\r\n    text-shadow: none;\r\n  }\r\n#cq-app .mute-btn:active{ transform: scale(0.96); }\r\n#cq-app .mute-btn .mute-label{\r\n    font-size: 24px;\r\n    font-weight: 900;\r\n    color: #000;\r\n    line-height: 1;\r\n    letter-spacing: 0.5px;\r\n  }\r\n#cq-app .flip-n{\r\n    display: inline-block;\r\n    transform: scaleX(-1);\r\n  }\r\n#cq-app .mute-slash{\r\n    position:absolute;\r\n    top:50%;\r\n    left:50%;\r\n    width:60px;\r\n    height:5px;\r\n    background:#ff0033;\r\n    transform:translate(-50%,-50%) rotate(-45deg);\r\n    opacity:0;\r\n    transition:opacity 220ms ease;\r\n    border-radius:4px;\r\n    z-index: 10;\r\n  }\r\n#cq-app .mute-btn.muted .mute-slash{ opacity:1; }\r\n#cq-app .play-pulse{\r\n    position:absolute; \r\n    width:104px; \r\n    height:104px; \r\n    border-radius:50%; \r\n    pointer-events:none;\r\n    box-shadow: 0 0 22px rgba(255,102,0,0.18);\r\n    opacity:0; \r\n    transform:scale(0.92);\r\n    transition: opacity 220ms ease, transform 320ms ease;\r\n    z-index:55;\r\n  }\r\n#cq-app .pane-right{ \r\n    width:260px; \r\n    display:flex;\r\n    align-items:center;\r\n  }\r\n#cq-app .card{ \r\n    width: 100%;\r\n    background: linear-gradient(180deg, rgba(255,102,0,0.10), rgba(255,102,0,0.03));\r\n    border: 1px solid rgba(255,102,0,0.35);\r\n    border-radius: 14px;\r\n    padding: 16px;\r\n    box-shadow: 0 0 0 1px rgba(255,102,0,0.15), 0 16px 44px rgba(255,102,0,0.25);\r\n    color: var(--muted);\r\n    font-size: 0.95rem;\r\n    line-height: 1.45;\r\n  }\r\n#cq-app .card .card-title{ \r\n    color: var(--orange); \r\n    margin-bottom: 10px; \r\n    font-weight: 800; \r\n  }\r\n#cq-app .card strong{ color: var(--orange-mid); }\r\n#cq-app .card ul{ padding-left: 20px; margin-top: 8px; }\r\n#cq-app .card li{ margin-bottom: 6px; }\r\n#cq-app \/* MEN\u00da SELECTOR PRODUCTOR \/ DJ *\/\r\n  .selector{\r\n    width: 100%;\r\n    background: linear-gradient(180deg, rgba(255,102,0,0.12), rgba(255,102,0,0.04));\r\n    border: 1px solid rgba(255,102,0,0.35);\r\n    border-radius: 14px;\r\n    padding: 14px 16px;\r\n    margin-bottom: 16px;\r\n    box-shadow: 0 0 0 1px rgba(255,102,0,0.15), 0 16px 44px rgba(255,102,0,0.22);\r\n  }\r\n#cq-app .selector .sel-title{\r\n    color: var(--orange);\r\n    font-weight: 800;\r\n    font-size: 0.95rem;\r\n    margin-bottom: 10px;\r\n    letter-spacing: 0.2px;\r\n  }\r\n#cq-app .selector .opt{\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 10px;\r\n    padding: 9px 10px;\r\n    border-radius: 10px;\r\n    cursor: pointer;\r\n    color: var(--muted);\r\n    font-size: 0.85rem;\r\n    font-weight: 600;\r\n    line-height: 1.25;\r\n    transition: background 180ms ease, color 180ms ease, border-color 180ms ease;\r\n    border: 1px solid transparent;\r\n  }\r\n#cq-app .selector .opt + .opt{ margin-top: 6px; }\r\n#cq-app .selector .opt:hover{ background: rgba(255,102,0,0.08); color: #fff; }\r\n#cq-app .selector .opt .dot{\r\n    width: 16px;\r\n    height: 16px;\r\n    border-radius: 50%;\r\n    border: 2px solid var(--orange);\r\n    flex: 0 0 auto;\r\n    position: relative;\r\n    transition: background 180ms ease;\r\n  }\r\n#cq-app .selector .opt.active{\r\n    background: rgba(255,102,0,0.14);\r\n    border-color: rgba(255,102,0,0.5);\r\n    color: #fff;\r\n  }\r\n#cq-app .selector .opt.active .dot{\r\n    background: var(--orange);\r\n    box-shadow: 0 0 10px rgba(255,102,0,0.6);\r\n  }\r\n\r\n\r\n  @media (max-width:1100px){#cq-app .wrap{flex-direction:column;align-items:center}\r\n#cq-app .pane-right{width:92%}\r\n#cq-app .pane-left{width:92%;height:540px}\r\n#cq-app .center-card{width:40%;height:40%;top:30%;left:30%}\r\n\r\n  }\r\n  @media (max-width:540px){#cq-app .pane-left{height:420px}\r\n#cq-app .center-card{width:48%;height:48%;top:26%;left:26%}\r\n\r\n  }\r\n\r\n#cq-app{ display:block !important; background:#08090b; color:#fff; padding:30px 20px 20px; border-radius:16px; overflow:hidden; max-width:720px; margin:0 auto 8px; text-align:center; }\r\n#cq-app .cq-logo{ display:block; width:100%; text-align:center; margin:0 auto 24px; }\r\n#cq-app .cq-logo img{ max-width:340px; width:78%; height:auto; display:inline-block; }\r\n#cq-app .wrap{ display:flex !important; flex-direction:column !important; align-items:center; width:100%; margin:0 auto; gap:16px; text-align:left; }\r\n#cq-app .pane-left{ width:100%; max-width:520px; height:auto; aspect-ratio:1\/1; margin:0 auto; }\r\n#cq-app .pane-right{ width:100%; max-width:520px; margin:0 auto; }\r\n@media (max-width:560px){ #cq-app{ padding:20px 12px 12px; } #cq-app .cq-logo img{ width:82%; } }\r\n\r\n#cq-app .selector .opt{ list-style:none !important; }\r\n#cq-app .selector .opt::before,\r\n#cq-app .selector .opt::after,\r\n#cq-app .selector .opt .dot::before,\r\n#cq-app .selector .opt .dot::after{ content:none !important; display:none !important; background:none !important; }\r\n#cq-app .selector .opt .dot{\r\n  box-sizing:border-box !important; width:18px !important; height:18px !important; min-width:18px !important; min-height:18px !important;\r\n  border-radius:50% !important; border:2px solid var(--orange) !important; background:transparent !important;\r\n  padding:0 !important; margin:0 !important; box-shadow:none !important;\r\n}\r\n#cq-app .selector .opt.active .dot{ background:var(--orange) !important; box-shadow:0 0 10px rgba(255,106,0,0.6) !important; }\r\n\r\n\/* Legibilidad cajas de texto *\/\r\n#cq-app .selector{ padding:18px 20px; border-radius:16px; }\r\n#cq-app .selector .sel-title{ font-size:1.1rem; margin-bottom:14px; letter-spacing:0.2px; }\r\n#cq-app .selector .opt{\r\n  font-size:1.02rem !important; line-height:1.45 !important; font-weight:600;\r\n  padding:13px 14px !important; gap:13px !important; border-radius:12px; color:#c5ccd6;\r\n}\r\n#cq-app .selector .opt + .opt{ margin-top:8px; }\r\n#cq-app .selector .opt.active, #cq-app .selector .opt:hover{ color:#fff; }\r\n\r\n#cq-app .card{ font-size:1.08rem; line-height:1.7; padding:22px 24px; border-radius:16px; color:#ccd3dd; }\r\n#cq-app .card .card-title{ font-size:1.28rem; margin-bottom:14px; letter-spacing:0.2px; }\r\n#cq-app .card p{ margin:0 0 14px; }\r\n#cq-app .card p:last-child{ margin-bottom:0; }\r\n#cq-app .card ul{ padding-left:22px; margin-top:12px; }\r\n#cq-app .card li{ margin-bottom:11px; line-height:1.6; }\r\n#cq-app .card li:last-child{ margin-bottom:0; }\r\n\/* ===== ESCALADO PROPORCIONAL DEL CENTRO (arregla movil) =====\r\n   Antes los textos usaban vw (ancho de pantalla) y el boton px fijos,\r\n   asi que no escalaban con la rueda. Ahora todo va en cqw = % del\r\n   ancho del contenedor de la rueda, por lo que la proporcion se\r\n   mantiene identica en movil, tablet y escritorio. *\/\r\n#cq-app .pane-left{ container-type: inline-size; }\r\n\r\n#cq-app .center-card{ width:38%; height:38%; top:31%; left:31%; }\r\n#cq-app .center-inner{ padding:4%; }\r\n\r\n#cq-app .center-inner .center-label{\r\n  font-size: clamp(10px, 4.2cqw, 23px);\r\n  margin-bottom: 0.1em;\r\n  letter-spacing: 0;\r\n  line-height: 1.1;\r\n}\r\n#cq-app .center-inner .sub{\r\n  font-size: clamp(8.5px, 2.9cqw, 15px);\r\n  margin-bottom: 0.2em;\r\n  line-height: 1.15;\r\n}\r\n#cq-app .center-inner .notes{\r\n  font-size: clamp(10px, 4.3cqw, 24px);\r\n  letter-spacing: 0.05em;\r\n  margin-bottom: 0.25em;\r\n  line-height: 1.1;\r\n}\r\n\/* La fila del boton traia margen y separacion fijos en linea: los escalamos *\/\r\n#cq-app .center-inner > div > div:last-child{\r\n  margin-top: 0.15em !important;\r\n  gap: 0 !important;\r\n}\r\n\r\n#cq-app .mute-btn{\r\n  width: clamp(26px, 9.2cqw, 48px);\r\n  height: clamp(26px, 9.2cqw, 48px);\r\n  min-width: 0;\r\n  border-width: clamp(1.5px, 0.5cqw, 2.5px);\r\n  flex: 0 0 auto;\r\n}\r\n#cq-app .mute-btn .mute-label{\r\n  font-size: clamp(12px, 4.6cqw, 24px);\r\n  line-height: 1;\r\n}\r\n#cq-app .mute-slash{\r\n  width: clamp(36px, 11.5cqw, 60px);\r\n  height: clamp(3px, 0.95cqw, 5px);\r\n}\r\n#cq-app .play-pulse{\r\n  width: clamp(64px, 20cqw, 104px);\r\n  height: clamp(64px, 20cqw, 104px);\r\n}\r\n\r\n\/* Movil: mas aire lateral para que la rueda no toque los bordes *\/\r\n@media (max-width:560px){\r\n  #cq-app .pane-left{ max-width: 100%; }\r\n  #cq-app .center-inner .sub{ margin-bottom: 0.25em; }\r\n}\r\n<\/style>\r\n<div class=\"cq-logo\"><img decoding=\"async\" src=\"https:\/\/produccionmusic.com\/assets\/img\/logo-dark@2x.png\" alt=\"Produccion Music\" loading=\"lazy\"><\/div>\r\n<div class=\"wrap\">\r\n    <div class=\"pane-left\">\r\n      <svg id=\"wheel\" viewBox=\"0 0 720 720\" role=\"img\" aria-label=\"C&#237;rculo de quintas - quesitos interactivos\">\r\n        <defs>\r\n          <radialGradient id=\"bgGrad\" cx=\"50%\" cy=\"50%\">\r\n            <stop offset=\"0%\" stop-color=\"#000\"\/>\r\n            <stop offset=\"100%\" stop-color=\"#000\"\/>\r\n          <\/radialGradient>\r\n\r\n          <linearGradient id=\"gradBase\" x1=\"0\" x2=\"1\">\r\n            <stop offset=\"0%\" stop-color=\"#22262b\" \/>\r\n            <stop offset=\"100%\" stop-color=\"#1a1e22\" \/>\r\n          <\/linearGradient>\r\n        <\/defs>\r\n\r\n        <rect x=\"0\" y=\"0\" width=\"720\" height=\"720\" fill=\"url(#bgGrad)\"><\/rect>\r\n\r\n        <circle id=\"orange-ring\" class=\"orange-ring\" cx=\"360\" cy=\"360\" r=\"348\"><\/circle>\r\n\r\n        <g id=\"outer-group\"><\/g>\r\n        <g id=\"inner-group\"><\/g>\r\n        <g id=\"divider-group\"><\/g>\r\n        <g id=\"labels-group\"><\/g>\r\n      <\/svg>\r\n\r\n      <div class=\"center-card\" aria-hidden=\"false\">\r\n        <div class=\"center-inner\" id=\"centerInner\">\r\n          <div style=\"position:relative; width:100%; display:flex; flex-direction:column; align-items:center;\">\r\n            <div id=\"centerLabel\" class=\"center-label\">C Major<\/div>\r\n            <div class=\"sub\" id=\"centerSub\">Relative: A minor<\/div>\r\n            <div class=\"notes\" id=\"centerNotes\">C &#183; E &#183; G<\/div>\r\n\r\n            <div style=\"display:flex; gap:16px; align-items:center; margin-top:6px;\">\r\n              <div class=\"play-pulse\" id=\"playPulse\"><\/div>\r\n              <button id=\"muteBtn\" class=\"mute-btn\" title=\"Mute\/Unmute\" aria-label=\"Mute\/Unmute\">\r\n                <span class=\"mute-label\">O<span class=\"flip-n\">N<\/span><\/span>\r\n                <div class=\"mute-slash\"><\/div>\r\n              <\/button>\r\n            <\/div>\r\n          <\/div>\r\n        <\/div>\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <aside class=\"pane-right\">\r\n      <div class=\"selector\">\r\n        <div class=\"sel-title\">Selecciona Productor o Dj<\/div>\r\n        <div class=\"opt\" id=\"optCamelot\" data-mode=\"camelot\">\r\n          <span class=\"dot\"><\/span>\r\n          <span>Rueda Camelot para Dj<\/span>\r\n        <\/div>\r\n        <div class=\"opt active\" id=\"optMusician\" data-mode=\"musician\">\r\n          <span class=\"dot\"><\/span>\r\n          <span>C&#237;rculo de Quintas para M&#250;sico - Productor<\/span>\r\n        <\/div>\r\n      <\/div>\r\n      <div class=\"card\">\r\n        <div class=\"card-title\">C&#243;mo usar<\/div>\r\n        <p>Haz clic en un <strong>tono musical<\/strong> (mayor o menor). El segmento seleccionado brilla en naranja y los relativos en naranja suave.<\/p>\r\n        <ul>\r\n          <li>El bot&#243;n naranja central <strong>O<span class=\"flip-n\">N<\/span><\/strong> silencia o activa el sonido de los acordes.<\/li>\r\n          <li>Solo una selecci&#243;n activa a la vez; al seleccionar otra, la previa se desactiva.<\/li>\r\n        <\/ul>\r\n      <\/div>\r\n    <\/aside>\r\n  <\/div>\r\n<\/div>\r\n<script src=\"https:\/\/cdn.jsdelivr.net\/npm\/tone@14.8.49\/build\/Tone.min.js\"><\/script>\r\n<script>\r\nconst circleData = [\r\n  { major:\"C\",  minor:\"Am\", armature:\"0\", chords:{I:\"C\", IV:\"F\", V:\"G\"}, rootNote:\"C3\", rootNoteMinor:\"A3\", camMajor:\"8B\",  camMinor:\"8A\"  },\r\n  { major:\"G\",  minor:\"Em\", armature:\"1\u266f\", chords:{I:\"G\", IV:\"C\", V:\"D\"}, rootNote:\"G3\", rootNoteMinor:\"E3\", camMajor:\"9B\",  camMinor:\"9A\"  },\r\n  { major:\"D\",  minor:\"Bm\", armature:\"2\u266f\", chords:{I:\"D\", IV:\"G\", V:\"A\"}, rootNote:\"D3\", rootNoteMinor:\"B3\", camMajor:\"10B\", camMinor:\"10A\" },\r\n  { major:\"A\",  minor:\"F#m\",armature:\"3\u266f\", chords:{I:\"A\", IV:\"D\", V:\"E\"}, rootNote:\"A3\", rootNoteMinor:\"F#3\", camMajor:\"11B\", camMinor:\"11A\" },\r\n  { major:\"E\",  minor:\"C#m\",armature:\"4\u266f\", chords:{I:\"E\", IV:\"A\", V:\"B\"}, rootNote:\"E3\", rootNoteMinor:\"C#3\", camMajor:\"12B\", camMinor:\"12A\" },\r\n  { major:\"B\",  minor:\"G#m\",armature:\"5\u266f\", chords:{I:\"B\", IV:\"E\", V:\"F#\"},rootNote:\"B3\", rootNoteMinor:\"G#3\", camMajor:\"1B\",  camMinor:\"1A\"  },\r\n  { major:\"F#\", minor:\"D#m\",armature:\"6\u266f\", chords:{I:\"F#\",IV:\"B\", V:\"Db\"},rootNote:\"F#3\", rootNoteMinor:\"D#3\", camMajor:\"2B\",  camMinor:\"2A\"  },\r\n  { major:\"Db\", minor:\"Bbm\",armature:\"5\u266d\", chords:{I:\"Db\",IV:\"F#\",V:\"Ab\"},rootNote:\"Db3\", rootNoteMinor:\"Bb3\", camMajor:\"3B\",  camMinor:\"3A\"  },\r\n  { major:\"Ab\", minor:\"Fm\", armature:\"4\u266d\", chords:{I:\"Ab\",IV:\"Db\",V:\"Eb\"},rootNote:\"Ab3\", rootNoteMinor:\"F3\", camMajor:\"4B\",  camMinor:\"4A\"  },\r\n  { major:\"Eb\", minor:\"Cm\", armature:\"3\u266d\", chords:{I:\"Eb\",IV:\"Ab\",V:\"Bb\"},rootNote:\"Eb3\", rootNoteMinor:\"C3\", camMajor:\"5B\",  camMinor:\"5A\"  },\r\n  { major:\"Bb\", minor:\"Gm\", armature:\"2\u266d\", chords:{I:\"Bb\",IV:\"Eb\",V:\"F\"},rootNote:\"Bb3\", rootNoteMinor:\"G3\", camMajor:\"6B\",  camMinor:\"6A\"  },\r\n  { major:\"F\",  minor:\"Dm\", armature:\"1\u266d\", chords:{I:\"F\", IV:\"Bb\",V:\"C\"},rootNote:\"F3\", rootNoteMinor:\"D3\", camMajor:\"7B\",  camMinor:\"7A\"  }\r\n];\r\n\r\n\/\/ Modo de visualizaci\u00f3n: 'musician' (notaci\u00f3n musical) o 'camelot' (rueda DJ)\r\nlet viewMode = 'musician';\r\n\r\nconst colorMap = {\r\n  \"C\":\"#FF7AB7\",\"G\":\"#C13EFF\",\"D\":\"#6E84FF\",\"A\":\"#00C8FF\",\"E\":\"#00F1B8\",\"B\":\"#5BFF74\",\r\n  \"F#\":\"#DDF94B\",\"Db\":\"#FFE16C\",\"Ab\":\"#FFB36B\",\"Eb\":\"#FF7B5A\",\"Bb\":\"#FF5D9C\",\"F\":\"#FF66D9\"\r\n};\r\n\r\nfunction displayName(name) {\r\n  const map = {\r\n    \"F#\": \"F#\/Gb\", \"C#\": \"C#\/Db\", \"G#\": \"G#\/Ab\", \"D#\": \"D#\/Eb\", \"A#\": \"A#\/Bb\",\r\n    \"F#m\": \"F#m\/Gbm\", \"C#m\": \"C#m\/Dbm\", \"G#m\": \"G#m\/Abm\", \"D#m\": \"D#m\/Ebm\", \"A#m\": \"A#m\/Bbm\"\r\n  };\r\n  return map[name] || name;\r\n}\r\n\r\n\/\/ Devuelve la etiqueta de un quesito seg\u00fan el modo activo (musical o Camelot)\r\nfunction labelFor(idx, type){\r\n  const d = circleData[idx];\r\n  if(viewMode === 'camelot'){\r\n    return type === 'minor' ? d.camMinor : d.camMajor;\r\n  }\r\n  return displayName(type === 'minor' ? d.minor : d.major);\r\n}\r\n\r\nconst svg = document.getElementById('wheel');\r\nconst outerG = document.getElementById('outer-group');\r\nconst innerG = document.getElementById('inner-group');\r\nconst dividerG = document.getElementById('divider-group');\r\nconst labelsG = document.getElementById('labels-group');\r\n\r\nconst centerLabel = document.getElementById('centerLabel');\r\nconst centerSub = document.getElementById('centerSub');\r\nconst centerNotes = document.getElementById('centerNotes');\r\nconst muteBtn = document.getElementById('muteBtn');\r\nconst playPulse = document.getElementById('playPulse');\r\n\r\nlet active = { idx: 0, type: 'major' };\r\nlet isMuted = false;\r\n\r\n\/\/ --- AUDIO: Sampler con varios samples + reverb para un sonido m\u00e1s amigable ---\r\nconst reverb = new Tone.Reverb({ decay: 2.4, wet: 0.3 }).toDestination();\r\n\r\nconst piano = new Tone.Sampler({\r\n  urls: {\r\n    \"A2\" : \"A2.mp3\",\r\n    \"C3\" : \"C3.mp3\",\r\n    \"Eb3\": \"Ds3.mp3\",\r\n    \"F#3\": \"Fs3.mp3\",\r\n    \"A3\" : \"A3.mp3\",\r\n    \"C4\" : \"C4.mp3\",\r\n    \"Eb4\": \"Ds4.mp3\",\r\n    \"F#4\": \"Fs4.mp3\",\r\n    \"A4\" : \"A4.mp3\"\r\n  },\r\n  baseUrl: \"https:\/\/tonejs.github.io\/audio\/salamander\/\",\r\n  release: 1.2,\r\n  onload: () => console.log(\"Piano cargado \u2713\")\r\n}).connect(reverb);\r\n\r\ndocument.addEventListener('click', async () => {\r\n  if (Tone.context.state !== 'running') {\r\n    await Tone.start();\r\n    console.log('Audio context activo \u2713');\r\n  }\r\n}, { once: true });\r\n\r\nasync function playPianoChord() {\r\n  if (isMuted || !active) return;\r\n\r\n  if (Tone.context.state !== 'running') {\r\n    await Tone.start();\r\n  }\r\n\r\n  const data = circleData[active.idx];\r\n  const isMinor = active.type === 'minor';\r\n  const root = isMinor ? data.rootNoteMinor : data.rootNote;\r\n  const semitones = isMinor ? [0, 3, 7] : [0, 4, 7];\r\n\r\n  try {\r\n    const notes = semitones.map(iv => Tone.Frequency(root).transpose(iv).toNote());\r\n    piano.triggerAttackRelease(notes, \"2n\"); \/\/ todas las notas simult\u00e1neas\r\n  } catch (e) {\r\n    console.error(\"Error reproduciendo acorde:\", e);\r\n  }\r\n}\r\n\r\nfunction polar(cx, cy, r, angleRad){ return { x: cx + r * Math.cos(angleRad), y: cy + r * Math.sin(angleRad) }; }\r\nfunction degToRad(d){ return d * Math.PI \/ 180; }\r\nfunction donutSlicePath(cx, cy, rOuter, rInner, a0, a1){\r\n  const p1 = polar(cx, cy, rOuter, a0), p2 = polar(cx, cy, rOuter, a1),\r\n        p3 = polar(cx, cy, rInner, a1), p4 = polar(cx, cy, rInner, a0);\r\n  const largeArc = ((a1-a0) % (Math.PI*2)) > Math.PI ? 1: 0;\r\n  return [\r\n    \"M\", p1.x.toFixed(3), p1.y.toFixed(3),\r\n    \"A\", rOuter.toFixed(3), rOuter.toFixed(3), 0, largeArc, 1, p2.x.toFixed(3), p2.y.toFixed(3),\r\n    \"L\", p3.x.toFixed(3), p3.y.toFixed(3),\r\n    \"A\", rInner.toFixed(3), rInner.toFixed(3), 0, largeArc, 0, p4.x.toFixed(3), p4.y.toFixed(3),\r\n    \"Z\"\r\n  ].join(\" \");\r\n}\r\n\r\nfunction renderWheel(){\r\n  outerG.innerHTML = ''; innerG.innerHTML = ''; dividerG.innerHTML = ''; labelsG.innerHTML = '';\r\n  const w = 720, h = 720, cx = w\/2, cy = h\/2;\r\n  const outerR = Math.min(w,h)\/2 - 24;\r\n  const midR = outerR * 0.72;\r\n  const innerR = outerR * 0.42;\r\n  const total = circleData.length;\r\n  const labelFont = Math.max(11, Math.round(outerR * 0.058));\r\n\r\n  for(let i=0;i<total;i++){\r\n    const gapDeg = 0.6;\r\n    const a0 = (i\/total)*Math.PI*2 - Math.PI\/2 + degToRad(gapDeg\/2);\r\n    const a1 = ((i+1)\/total)*Math.PI*2 - Math.PI\/2 - degToRad(gapDeg\/2);\r\n\r\n    const outerPath = document.createElementNS(\"http:\/\/www.w3.org\/2000\/svg\",\"path\");\r\n    outerPath.setAttribute('d', donutSlicePath(cx, cy, outerR, midR, a0, a1));\r\n    outerPath.setAttribute('data-idx', i);\r\n    outerPath.setAttribute('data-type', 'major');\r\n    outerPath.setAttribute('class','slice base');\r\n    outerG.appendChild(outerPath);\r\n\r\n    const innerPath = document.createElementNS(\"http:\/\/www.w3.org\/2000\/svg\",\"path\");\r\n    innerPath.setAttribute('d', donutSlicePath(cx, cy, midR - 6, innerR, a0, a1));\r\n    innerPath.setAttribute('data-idx', i);\r\n    innerPath.setAttribute('data-type', 'minor');\r\n    innerPath.setAttribute('class','slice base');\r\n    innerG.appendChild(innerPath);\r\n\r\n    const dv = polar(cx, cy, outerR + 2, a0 - 0.0001);\r\n    const dv2 = polar(cx, cy, innerR - 2, a0 - 0.0001);\r\n    const divider = document.createElementNS(\"http:\/\/www.w3.org\/2000\/svg\",\"line\");\r\n    divider.setAttribute('x1', dv.x); divider.setAttribute('y1', dv.y);\r\n    divider.setAttribute('x2', dv2.x); divider.setAttribute('y2', dv2.y);\r\n    divider.setAttribute('class','divider');\r\n    dividerG.appendChild(divider);\r\n\r\n    const centroidAngle = (a0 + a1) \/ 2;\r\n    const outerLabelPos = polar(cx, cy, (outerR + midR)\/2, centroidAngle);\r\n    const textOuter = document.createElementNS(\"http:\/\/www.w3.org\/2000\/svg\",\"text\");\r\n    textOuter.setAttribute('x', outerLabelPos.x);\r\n    textOuter.setAttribute('y', outerLabelPos.y - 6);\r\n    textOuter.setAttribute('data-idx', i);\r\n    textOuter.setAttribute('data-type', 'major-label');\r\n    textOuter.setAttribute('class', 'label-major');\r\n    textOuter.setAttribute('style', `font-size:${labelFont}px;`);\r\n    textOuter.textContent = labelFor(i, 'major');\r\n    textOuter.style.fill = '#EAEEF2';\r\n    labelsG.appendChild(textOuter);\r\n\r\n    const innerLabelPos = polar(cx, cy, (midR + innerR)\/2, centroidAngle);\r\n    const textInner = document.createElementNS(\"http:\/\/www.w3.org\/2000\/svg\",\"text\");\r\n    textInner.setAttribute('x', innerLabelPos.x);\r\n    textInner.setAttribute('y', innerLabelPos.y + 10);\r\n    textInner.setAttribute('data-idx', i);\r\n    textInner.setAttribute('data-type', 'minor-label');\r\n    textInner.setAttribute('class', 'label-minor');\r\n    textInner.setAttribute('style', `font-size:${labelFont}px;`);\r\n    textInner.textContent = labelFor(i, 'minor');\r\n    labelsG.appendChild(textInner);\r\n\r\n    outerPath.addEventListener('click', ()=> selectSlice(i,'major'));\r\n    innerPath.addEventListener('click', ()=> selectSlice(i,'minor'));\r\n    textOuter.addEventListener('click', ()=> selectSlice(i,'major'));\r\n    textInner.addEventListener('click', ()=> selectSlice(i,'minor'));\r\n  }\r\n}\r\n\r\nfunction clearAllStates(){\r\n  Array.from(outerG.children).forEach(n => n.classList.remove('selected','rel','dimmed'));\r\n  Array.from(innerG.children).forEach(n => n.classList.remove('selected','rel','dimmed'));\r\n  Array.from(labelsG.children).forEach(n => {\r\n    if(n.getAttribute('data-type') === 'major-label'){\r\n      const idx = Number(n.getAttribute('data-idx'));\r\n      n.style.fill = '#EAEEF2';\r\n      n.style.opacity = '1';\r\n      n.style.filter = 'none';\r\n    } else {\r\n      n.style.fill = 'var(--muted)';\r\n      n.style.opacity = '1';\r\n      n.style.filter = '';\r\n    }\r\n  });\r\n}\r\n\r\nfunction selectSlice(idx, type, play = true){\r\n  clearAllStates();\r\n  const data = circleData[idx];\r\n  active = { idx, type };\r\n\r\n  if(viewMode === 'camelot'){\r\n    if(type === 'major'){\r\n      centerLabel.textContent = data.camMajor;\r\n      centerSub.textContent = `Relativo: ${data.camMinor}`;\r\n    } else {\r\n      centerLabel.textContent = data.camMinor;\r\n      centerSub.textContent = `Relativo: ${data.camMajor}`;\r\n    }\r\n  } else {\r\n    if(type === 'major'){\r\n      centerLabel.textContent = `${displayName(data.major)} Major`;\r\n      centerSub.textContent = `Relative: ${displayName(data.minor)}`;\r\n    } else {\r\n      centerLabel.textContent = `${displayName(data.minor)} Minor`;\r\n      centerSub.textContent = `Relative Major: ${displayName(data.major)}`;\r\n    }\r\n  }\r\n\r\n  const root = type === 'minor' ? data.rootNoteMinor : data.rootNote;\r\n  const semitones = type === \"minor\" ? [0, 3, 7] : [0, 4, 7];\r\n  const fullNotes = semitones.map(iv => Tone.Frequency(root).transpose(iv).toNote());\r\n  const notesWithoutOctave = fullNotes.map(note => note.replace(\/\\d+$\/, ''));\r\n  \/\/ En modo Camelot ocultamos las notas individuales (solo el c\u00f3digo)\r\n  centerNotes.textContent = viewMode === 'camelot' ? '' : notesWithoutOctave.join(\" \u00b7 \");\r\n\r\n  if (type === 'minor') {\r\n      const targets = [];\r\n      const prevIdx = (idx - 1 + 12) % 12;\r\n      const nextIdx = (idx + 1) % 12;\r\n      targets.push(circleData[prevIdx].minor, circleData[nextIdx].minor);\r\n      targets.push(data.major);\r\n\r\n      Array.from(outerG.children).forEach((node) => {\r\n        const i = Number(node.getAttribute('data-idx'));\r\n        if (targets.includes(circleData[i].major)){\r\n          node.classList.add('rel');\r\n        } else {\r\n          node.classList.add('dimmed');\r\n        }\r\n      });\r\n      Array.from(innerG.children).forEach((node) => {\r\n        const i = Number(node.getAttribute('data-idx'));\r\n        if(i === idx){\r\n          node.classList.add('selected');\r\n        } else if (targets.includes(circleData[i].minor)){\r\n          node.classList.add('rel');\r\n        } else {\r\n          node.classList.add('dimmed');\r\n        }\r\n      });\r\n      Array.from(labelsG.children).forEach((node) => {\r\n        const t = node.getAttribute('data-type');\r\n        const i = Number(node.getAttribute('data-idx'));\r\n        if(t === 'major-label'){\r\n          if (targets.includes(circleData[i].major)){\r\n            node.style.fill = 'var(--orange-mid)';\r\n            node.style.opacity='1';\r\n          } else {\r\n            node.style.fill = '#6f7a86';\r\n            node.style.opacity='0.28';\r\n          }\r\n        } else {\r\n          if(i === idx){\r\n            node.style.fill = 'var(--orange)';\r\n            node.style.opacity='1';\r\n          } else if (targets.includes(circleData[i].minor)){\r\n            node.style.fill = 'var(--orange-mid)';\r\n            node.style.opacity='1';\r\n          } else {\r\n            node.style.opacity='0.28';\r\n          }\r\n        }\r\n      });\r\n  } else {\r\n      const targets = [ data.chords.I, data.chords.IV, data.chords.V ];\r\n      Array.from(outerG.children).forEach((node) => {\r\n        const i = Number(node.getAttribute('data-idx'));\r\n        const majorName = circleData[i].major;\r\n        if(i === idx){\r\n          node.classList.add('selected');\r\n        } else if (targets.includes(majorName)){\r\n          node.classList.add('rel');\r\n        } else {\r\n          node.classList.add('dimmed');\r\n        }\r\n      });\r\n      Array.from(innerG.children).forEach((node) => {\r\n        const i = Number(node.getAttribute('data-idx'));\r\n        if (circleData[i].minor === data.minor){\r\n          node.classList.add('rel');\r\n        } else {\r\n          node.classList.add('dimmed');\r\n        }\r\n      });\r\n      Array.from(labelsG.children).forEach((node) => {\r\n        const t = node.getAttribute('data-type');\r\n        const i = Number(node.getAttribute('data-idx'));\r\n        if(t === 'major-label'){\r\n          if(i === idx){\r\n            node.style.fill = 'var(--orange)';\r\n            node.style.opacity = '1';\r\n          } else if (targets.includes(circleData[i].major)){\r\n            node.style.fill = 'var(--orange-mid)';\r\n            node.style.opacity='1';\r\n          } else {\r\n            node.style.fill = '#6f7a86';\r\n            node.style.opacity='0.28';\r\n          }\r\n        } else {\r\n          if (circleData[i].minor === data.minor){\r\n            node.style.fill = 'var(--orange-mid)';\r\n            node.style.opacity='1';\r\n          } else {\r\n            node.style.opacity='0.28';\r\n          }\r\n        }\r\n      });\r\n  }\r\n  if(play) playPianoChord();\r\n}\r\n\r\nwindow.addEventListener('load', ()=>{\r\n  renderWheel();\r\n  clearAllStates();\r\n  selectSlice(0,'major', false);\r\n});\r\n\r\nmuteBtn.addEventListener('click', ()=>{\r\n  isMuted = !isMuted;\r\n  muteBtn.classList.toggle('muted', isMuted);\r\n  playPulse.style.opacity = '0.98';\r\n  playPulse.style.transform = 'scale(1.06)';\r\n  setTimeout(()=>{ playPulse.style.opacity = '0.0'; playPulse.style.transform = 'scale(0.9)'; }, 420);\r\n});\r\n\r\n\/\/ --- Men\u00fa selector Productor \/ DJ ---\r\nconst optCamelot = document.getElementById('optCamelot');\r\nconst optMusician = document.getElementById('optMusician');\r\n\r\nfunction setMode(mode){\r\n  if(mode === viewMode) return;\r\n  viewMode = mode;\r\n  optCamelot.classList.toggle('active', mode === 'camelot');\r\n  optMusician.classList.toggle('active', mode === 'musician');\r\n  renderWheel();\r\n  if(active) selectSlice(active.idx, active.type, false);\r\n}\r\n\r\noptCamelot.addEventListener('click', ()=> setMode('camelot'));\r\noptMusician.addEventListener('click', ()=> setMode('musician'));\r\n\r\nlet rt;\r\nwindow.addEventListener('resize', ()=> {\r\n  clearTimeout(rt);\r\n  rt = setTimeout(()=> {\r\n    renderWheel();\r\n    if(active) selectSlice(active.idx, active.type, false);\r\n  }, 140);\r\n});\r\n<\/script>\r\n\r\n<script type=\"application\/ld+json\">\r\n{\r\n  \"@context\": \"https:\/\/schema.org\",\r\n  \"@graph\": [\r\n    {\r\n      \"@type\": \"BlogPosting\",\r\n      \"headline\": \"C\u00edrculo de Quintas y Rueda Camelot Interactivo: la Herramienta con Sonido para M\u00fasicos, Productores y DJs\",\r\n      \"description\": \"El \u00fanico c\u00edrculo de quintas y rueda Camelot interactivo: haz clic y escucha cada acorde. Cambia entre notaci\u00f3n musical y Camelot para DJs, m\u00fasicos y productores.\",\r\n      \"inLanguage\": \"es\",\r\n      \"mainEntityOfPage\": \"https:\/\/produccionmusic.com\/blog\/circulo-de-quintas-y-rueda-camelot\/\",\r\n      \"author\": { \"@type\": \"Organization\", \"name\": \"Produccionmusic\" },\r\n      \"publisher\": {\r\n        \"@type\": \"Organization\",\r\n        \"name\": \"Produccionmusic\",\r\n        \"url\": \"https:\/\/produccionmusic.com\"\r\n      },\r\n      \"datePublished\": \"2026-07-01\",\r\n      \"dateModified\": \"2026-07-01\"\r\n    },\r\n    {\r\n      \"@type\": \"WebApplication\",\r\n      \"name\": \"C\u00edrculo de Quintas y Rueda Camelot Interactivo\",\r\n      \"url\": \"https:\/\/produccionmusic.com\/blog\/circulo-de-quintas-y-rueda-camelot\/\",\r\n      \"applicationCategory\": \"MultimediaApplication\",\r\n      \"operatingSystem\": \"Cualquiera (navegador web)\",\r\n      \"inLanguage\": \"es\",\r\n      \"isAccessibleForFree\": true,\r\n      \"offers\": { \"@type\": \"Offer\", \"price\": \"0\", \"priceCurrency\": \"EUR\" },\r\n      \"description\": \"Herramienta web gratuita que combina el c\u00edrculo de quintas y la rueda Camelot. Reproduce el sonido real de cada acorde al hacer clic, resalta las tonalidades relativas y permite alternar entre notaci\u00f3n musical y c\u00f3digos Camelot.\",\r\n      \"featureList\": [\r\n        \"Reproduce el sonido real de cada acorde al hacer clic\",\r\n        \"Alterna entre notaci\u00f3n musical y c\u00f3digos Camelot\",\r\n        \"Resalta las tonalidades relativas mayor y menor\",\r\n        \"Dise\u00f1ada para m\u00fasicos, productores y DJs\"\r\n      ]\r\n    },\r\n    {\r\n      \"@type\": \"FAQPage\",\r\n      \"mainEntity\": [\r\n        {\r\n          \"@type\": \"Question\",\r\n          \"name\": \"\u00bfQu\u00e9 es el c\u00edrculo de quintas?\",\r\n          \"acceptedAnswer\": {\r\n            \"@type\": \"Answer\",\r\n            \"text\": \"Es un diagrama que organiza las doce tonalidades musicales por intervalos de quinta y coloca cada tonalidad mayor junto a su relativa menor. Las tonalidades vecinas comparten casi todas sus notas, por lo que suenan bien juntas y ayudan a componer progresiones de acordes y a modular.\"\r\n          }\r\n        },\r\n        {\r\n          \"@type\": \"Question\",\r\n          \"name\": \"\u00bfQu\u00e9 es la rueda Camelot y para qu\u00e9 sirve?\",\r\n          \"acceptedAnswer\": {\r\n            \"@type\": \"Answer\",\r\n            \"text\": \"Es el c\u00edrculo de quintas convertido en c\u00f3digos (por ejemplo 8A o 8B) que populariz\u00f3 el software Mixed In Key. Sirve para la mezcla arm\u00f3nica: encadenar canciones en tonalidades compatibles para que las transiciones entre temas suenen fundidas.\"\r\n          }\r\n        },\r\n        {\r\n          \"@type\": \"Question\",\r\n          \"name\": \"\u00bfCu\u00e1l es la diferencia entre el c\u00edrculo de quintas y la rueda Camelot?\",\r\n          \"acceptedAnswer\": {\r\n            \"@type\": \"Answer\",\r\n            \"text\": \"A nivel de estructura no hay diferencia: son la misma herramienta con dos notaciones. Los m\u00fasicos y productores usan los nombres de las notas y los DJ usan los c\u00f3digos Camelot. Por ejemplo, Do mayor equivale a 8B y su relativa La menor a 8A.\"\r\n          }\r\n        },\r\n        {\r\n          \"@type\": \"Question\",\r\n          \"name\": \"\u00bfC\u00f3mo se usa la rueda Camelot para mezclar?\",\r\n          \"acceptedAnswer\": {\r\n            \"@type\": \"Answer\",\r\n            \"text\": \"Las reglas b\u00e1sicas son: mismo n\u00famero y misma letra es la misma tonalidad (mezcla perfecta); mismo n\u00famero cambiando la letra salta entre relativa mayor y menor; y subir o bajar un n\u00famero manteniendo la letra lleva a tonalidades vecinas que encajan de forma natural.\"\r\n          }\r\n        }\r\n      ]\r\n    }\r\n  ]\r\n}\r\n<\/script><\/a><\/p>\n<p>Si llevas un tiempo en esto de la m\u00fasica, seguro que has visto ese diagrama circular con las doce notas repartidas como si fuera un reloj. Unos lo llaman <strong>c\u00edrculo de quintas<\/strong> y otros, sobre todo si vienen del mundo del DJ, lo conocen como <strong>rueda Camelot<\/strong>. Y aqu\u00ed viene lo interesante: son la misma cosa vista desde dos oficios distintos.<\/p>\n<p>Justo arriba tienes la herramienta: no es una imagen est\u00e1tica como la mayor\u00eda de c\u00edrculos de quintas que encuentras por ah\u00ed, sino una versi\u00f3n c\u00edrculo de quintas interactivo. Haces clic en cualquier tono y lo escuchas al momento, ves c\u00f3mo se iluminan sus relativos y puedes alternar entre la notaci\u00f3n musical y la Camelot con un solo clic. En este art\u00edculo te cuento de d\u00f3nde sale, c\u00f3mo funciona y c\u00f3mo sacarle partido tanto si compones y produces como si pinchas.<\/p>\n<h2>Un poco de historia: de d\u00f3nde viene el c\u00edrculo de quintas<\/h2>\n<p>El c\u00edrculo de quintas no es ning\u00fan invento moderno. Su primera formulaci\u00f3n clara se le atribuye al compositor y te\u00f3rico ucraniano <a style=\"color: #ff6600;\" href=\"https:\/\/es.wikipedia.org\/wiki\/Nikol%C3%A1i_Diletski\"><strong>Nikol\u00e1i Diletski<\/strong><\/a>, que all\u00e1 por 1679 lo dibuj\u00f3 en un tratado sobre composici\u00f3n. Poco despu\u00e9s, el alem\u00e1n <a style=\"color: #ff6600;\" href=\"https:\/\/es.wikipedia.org\/wiki\/Johann_David_Heinichen\"><strong>Johann David Heinichen<\/strong><\/a> lo populariz\u00f3 a principios del siglo XVIII con la forma circular que m\u00e1s o menos seguimos usando hoy.<\/p>\n<p>La idea de fondo es tan sencilla como potente: si vas subiendo de quinta en quinta partiendo de Do, acabas recorriendo las doce notas de la escala crom\u00e1tica hasta volver al punto de partida. Do, Sol, Re, La, Mi\u2026 y as\u00ed hasta cerrar el c\u00edrculo. Cada paso a\u00f1ade un sostenido (si vas hacia la derecha) o un bemol (si vas hacia la izquierda), lo que convierte al diagrama en un mapa visual de todas las tonalidades y sus armaduras.<\/p>\n<p>Durante siglos ha sido la br\u00fajula de compositores cl\u00e1sicos, de jazz y, m\u00e1s tarde, de cualquiera que quisiera entender c\u00f3mo se relacionan las tonalidades entre s\u00ed. Que una herramienta del siglo XVII siga siendo \u00fatil en un estudio con un DAW abierto dice mucho de lo bien pensada que estaba. La diferencia es que ahora, en versi\u00f3n interactiva y con sonido, ya no hace falta imaginarte c\u00f3mo suena cada relaci\u00f3n: la oyes.<\/p>\n<h2>C\u00f3mo funciona por dentro<\/h2>\n<p>El c\u00edrculo coloca las doce tonalidades mayores en el anillo exterior y sus <strong>relativas menores<\/strong> en el interior. Do mayor comparte anillo con La menor, Sol mayor con Mi menor, y as\u00ed con todas. \u00bfPor qu\u00e9? Porque una tonalidad mayor y su relativa menor usan exactamente las mismas notas; solo cambia el centro tonal, ese \u00abhogar\u00bb al que la m\u00fasica tiende a volver.<\/p>\n<p>Lo m\u00e1gico est\u00e1 en la vecindad. Las tonalidades que quedan <strong>juntas en el c\u00edrculo se parecen much\u00edsimo<\/strong> entre s\u00ed: comparten casi todas sus notas. Cuanto m\u00e1s lejos est\u00e1n dos posiciones, m\u00e1s notas distintas tienen y m\u00e1s \u00abbrusco\u00bb suena saltar de una a otra. Prueba en la herramienta de arriba: pulsa dos tonos vecinos y luego dos alejados, y la diferencia salta sola.<\/p>\n<h2>Para m\u00fasicos y productores: tu chuleta de armon\u00eda<\/h2>\n<p>Si compones o produces, el c\u00edrculo de quintas es de esas herramientas que, una vez la interiorizas, ya no sueltas. Estos son sus usos m\u00e1s directos:<\/p>\n<ul>\n<li><strong>Encontrar los acordes de una tonalidad.<\/strong> El acorde central (I), el de su izquierda (IV) y el de su derecha (V) forman la base de miles de canciones. Con solo mirar tres posiciones contiguas ya tienes el esqueleto de una progresi\u00f3n que funciona.<\/li>\n<li><strong>Construir progresiones que fluyen.<\/strong> Moverte entre posiciones cercanas del c\u00edrculo genera transiciones suaves. Es el secreto detr\u00e1s de progresiones tan usadas como el cl\u00e1sico I\u2013V\u2013vi\u2013IV que sostiene medio pop moderno.<\/li>\n<li><strong>Modular con criterio.<\/strong> Si quieres cambiar de tonalidad a mitad de tema sin que el oyente pegue un respingo, el c\u00edrculo te dice a qu\u00e9 tonalidades vecinas puedes saltar de forma elegante.<\/li>\n<li><strong>Trabajar con relativas.<\/strong> Pasar de una tonalidad mayor a su relativa menor (o al rev\u00e9s) es un recurso emocional brutal: cambias el color sin cambiar las notas. El c\u00edrculo te lo pone en bandeja.<\/li>\n<\/ul>\n<p>Y aqu\u00ed es donde lo interactivo marca la diferencia: en lugar de imaginarte las progresiones, las <strong>escuchas al instante<\/strong>. Pruebas el I, el IV y el V de una tonalidad, los oyes encadenados y decides si esa direcci\u00f3n te sirve antes de tocar una sola tecla en tu DAW.<\/p>\n<h2>Para DJs: la rueda Camelot y la mezcla arm\u00f3nica<\/h2>\n<p>Aqu\u00ed es donde el mismo diagrama se pone su otra chaqueta. Los DJs no suelen pensar en \u00abDo mayor\u00bb o \u00abLa menor\u00bb cuando encadenan tracks; piensan en <strong>c\u00f3digos Camelot<\/strong>: un n\u00famero del 1 al 12 seguido de una letra, A o B.<br \/>\nUn consejo pr\u00e1ctico: la notaci\u00f3n Camelot y la notaci\u00f3n musical no compiten, se complementan. Si eres DJ, la rueda Camelot es la forma m\u00e1s r\u00e1pida y visual de mezclar en armon\u00eda. Y si adem\u00e1s aprendes a qu\u00e9 tonalidad equivale cada c\u00f3digo, entender\u00e1s mejor\u00a0<em>por qu\u00e9<\/em>\u00a0encajan los temas y ganar\u00e1s criterio para romper las reglas cuando te interese. Dominar las dos notaciones te da lo mejor de los dos mundos: la velocidad de la cabina y la comprensi\u00f3n del m\u00fasico.<\/p>\n<p>Este sistema lo populariz\u00f3 el software <strong>Mixed In Key<\/strong> y su gran acierto fue <strong>simplificar la teor\u00eda musical a un c\u00f3digo de dos caracteres<\/strong>. La l\u00f3gica es directa:<\/p>\n<ul>\n<li>La letra <strong>B<\/strong> corresponde a las tonalidades <strong>mayores<\/strong> y la <strong>A<\/strong> a las <strong>menores<\/strong>.<\/li>\n<li>Cada tonalidad tiene su n\u00famero. Por ejemplo, La menor es 8A y su relativa Do mayor es 8B.<\/li>\n<\/ul>\n<p>\u00bfY para qu\u00e9 sirve todo esto? Para la <strong>mezcla arm\u00f3nica<\/strong>: encadenar canciones que casen tonalmente para que la transici\u00f3n suene fundida en lugar de un choque de trenes. Las reglas de oro son sencill\u00edsimas:<\/p>\n<ul>\n<li><strong>Mismo n\u00famero, misma letra:<\/strong> mezcla perfecta (es la misma tonalidad).<\/li>\n<li><strong>Mismo n\u00famero, cambia la letra<\/strong> (por ejemplo, de 8A a 8B): saltas entre relativa mayor y menor. Cambia la energ\u00eda, pero encaja de maravilla.<\/li>\n<li><strong>Sube o baja un n\u00famero<\/strong> manteniendo la letra (de 8A a 9A o a 7A): tonalidades vecinas que suenan muy naturales juntas.<\/li>\n<\/ul>\n<p>Si te fijas, son exactamente las mismas relaciones de cercan\u00eda del c\u00edrculo de quintas, solo que traducidas a un idioma pensado para la cabina. Con la herramienta de arriba cambias a la vista Camelot con un clic y, adem\u00e1s, oyes cada c\u00f3digo antes de meterlo en la mezcla.<br \/>\n\u00bfNo sabes en qu\u00e9 tonalidad o c\u00f3digo Camelot est\u00e1 una canci\u00f3n? Det\u00e9ctalo autom\u00e1ticamente con nuestro <a href=\"https:\/\/produccionmusic.com\/blog\/analizar-bpm-tonalidad-online\/\"><span style=\"color: #ff6600;\"><strong>Analizador de BPM y tonalidad<\/strong><\/span><\/a>, que te da la tonalidad, el BPM y el c\u00f3digo Camelot de cualquier tema listos para mezclar.<br \/>\nEn nuestros cursos de Dj te ense\u00f1amos con pr\u00e1cticas como aplicar estas t\u00e9cnicas a tus mezclas:<br \/>\n<strong>&#8211; <a style=\"color: #ff6600;\" href=\"https:\/\/produccionmusic.com\/curso-rekordbox-online\/\">Curso Dj Rekordbox<\/a><\/strong><br \/>\n<strong>&#8211; <a style=\"color: #ff6600;\" href=\"https:\/\/produccionmusic.com\/curso-traktor-pro-online\/\">Curso Dj Traktor<\/a><\/strong><\/p>\n<p>&nbsp;<\/p>\n<h3>Tabla de equivalencias: notaci\u00f3n musical y c\u00f3digos Camelot<\/h3>\n<figure class=\"wp-block-table\">\n<table>\n<thead>\n<tr>\n<th>Tonalidad mayor<\/th>\n<th>Camelot<\/th>\n<th>Relativa menor<\/th>\n<th>Camelot<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td>Do (C)<\/td>\n<td>8B<\/td>\n<td>La menor (Am)<\/td>\n<td>8A<\/td>\n<\/tr>\n<tr>\n<td>Sol (G)<\/td>\n<td>9B<\/td>\n<td>Mi menor (Em)<\/td>\n<td>9A<\/td>\n<\/tr>\n<tr>\n<td>Re (D)<\/td>\n<td>10B<\/td>\n<td>Si menor (Bm)<\/td>\n<td>10A<\/td>\n<\/tr>\n<tr>\n<td>La (A)<\/td>\n<td>11B<\/td>\n<td>Fa# menor (F#m)<\/td>\n<td>11A<\/td>\n<\/tr>\n<tr>\n<td>Mi (E)<\/td>\n<td>12B<\/td>\n<td>Do# menor (C#m)<\/td>\n<td>12A<\/td>\n<\/tr>\n<tr>\n<td>Si (B)<\/td>\n<td>1B<\/td>\n<td>Sol# menor (G#m)<\/td>\n<td>1A<\/td>\n<\/tr>\n<tr>\n<td>Fa# (F#)<\/td>\n<td>2B<\/td>\n<td>Re# menor (D#m)<\/td>\n<td>2A<\/td>\n<\/tr>\n<tr>\n<td>Reb (Db)<\/td>\n<td>3B<\/td>\n<td>Sib menor (Bbm)<\/td>\n<td>3A<\/td>\n<\/tr>\n<tr>\n<td>Lab (Ab)<\/td>\n<td>4B<\/td>\n<td>Fa menor (Fm)<\/td>\n<td>4A<\/td>\n<\/tr>\n<tr>\n<td>Mib (Eb)<\/td>\n<td>5B<\/td>\n<td>Do menor (Cm)<\/td>\n<td>5A<\/td>\n<\/tr>\n<tr>\n<td>Sib (Bb)<\/td>\n<td>6B<\/td>\n<td>Sol menor (Gm)<\/td>\n<td>6A<\/td>\n<\/tr>\n<tr>\n<td>Fa (F)<\/td>\n<td>7B<\/td>\n<td>Re menor (Dm)<\/td>\n<td>7A<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/figure>\n<p><strong>\u00a0<\/strong><\/p>\n<h2>C\u00edrculo de quintas o rueda Camelot: elige tu idioma<\/h2>\n<p>Esta es la idea que quiero que te lleves a casa: <strong>no son dos herramientas, es una sola con dos notaciones<\/strong>. El m\u00fasico ve \u00abSol mayor\u00bb y piensa en armon\u00eda y acordes. El DJ ve \u00ab9B\u00bb y piensa en qu\u00e9 track puede meter a continuaci\u00f3n. Pero por debajo, la estructura de relaciones es id\u00e9ntica. Por eso, en la herramienta de arriba, con el men\u00fa <strong>\u00abSelecciona Productor o Dj\u00bb<\/strong> cambias entre la notaci\u00f3n musical (Do, Sol, Re, La menor\u2026) y los c\u00f3digos Camelot (8B, 9B, 8A\u2026) seg\u00fan tu perfil.<\/p>\n<h2>C\u00f3mo usar la herramienta<\/h2>\n<p>Haz clic en un <strong>tono musical<\/strong> (mayor o menor). El segmento seleccionado brilla en naranja y sus relativos se marcan en naranja suave.<\/p>\n<ul>\n<li>El <strong>bot\u00f3n naranja central<\/strong> silencia o activa el sonido de los acordes.<\/li>\n<li>Solo hay una selecci\u00f3n activa a la vez; al elegir otra, la anterior se desactiva.<\/li>\n<li>Usa el men\u00fa <strong>\u00abSelecciona Productor o Dj\u00bb<\/strong> para cambiar entre notaci\u00f3n musical y Camelot.<\/li>\n<\/ul>\n<h2>Para terminar<\/h2>\n<p>Tanto si tu terreno es el estudio como la cabina, entender esta herramienta te ahorra horas de prueba y error. El compositor gana un mapa de la armon\u00eda; el DJ, un sistema para mezclar sin desafinar el ambiente. Y lo mejor es que aprender una de las dos notaciones te acerca autom\u00e1ticamente a la otra.<\/p>\n<p>La ventaja de hacerlo con un c\u00edrculo <strong>interactivo y con sonido<\/strong> es que dejas de estudiar la teor\u00eda de memoria y empiezas a entenderla con el o\u00eddo. Cacharrea con el de arriba, pulsa tonos, escucha los relativos y ver\u00e1s c\u00f3mo esas relaciones que antes eran abstractas empiezan a tener todo el sentido del mundo.<\/p>\n<h2>Preguntas frecuentes sobre el c\u00edrculo de quintas y la rueda Camelot<\/h2>\n<h3>\u00bfQu\u00e9 es el c\u00edrculo de quintas?<\/h3>\n<p>Es un diagrama que ordena las doce tonalidades musicales por intervalos de quinta y coloca cada tonalidad mayor junto a su relativa menor. Las tonalidades vecinas comparten casi todas sus notas, por lo que suenan bien juntas y ayudan a componer progresiones de acordes y a modular.<\/p>\n<h3>\u00bfQu\u00e9 es la rueda Camelot y para qu\u00e9 sirve?<\/h3>\n<p>Es el c\u00edrculo de quintas convertido en c\u00f3digos (por ejemplo 8A o 8B) que populariz\u00f3 el software Mixed In Key. Sirve para la mezcla arm\u00f3nica: encadenar canciones en tonalidades compatibles para que las transiciones entre temas suenen fundidas.<\/p>\n<h3>\u00bfCu\u00e1l es la diferencia entre el c\u00edrculo de quintas y la rueda Camelot?<\/h3>\n<p>A nivel de estructura no hay diferencia: son la misma herramienta con dos notaciones. Los m\u00fasicos y productores usan los nombres de las notas y los DJs usan los c\u00f3digos Camelot. Por ejemplo, Do mayor equivale a 8B y su relativa La menor a 8A.<\/p>\n<h3>\u00bfC\u00f3mo se usa la rueda Camelot para mezclar?<\/h3>\n<p>Las reglas b\u00e1sicas son tres: mismo n\u00famero y misma letra es la misma tonalidad (mezcla perfecta); mismo n\u00famero cambiando la letra salta entre relativa mayor y menor; y subir o bajar un n\u00famero manteniendo la letra lleva a tonalidades vecinas que encajan de forma natural.<\/p>\n<h3>\u00bfPara qu\u00e9 sirve el c\u00edrculo de quintas a un productor musical?<\/h3>\n<p>Le permite encontrar r\u00e1pidamente los acordes de una tonalidad (los grados I, IV y V), construir progresiones que fluyen, modular a tonalidades cercanas sin saltos bruscos y cambiar entre una tonalidad mayor y su relativa menor para variar el color emocional sin cambiar las notas.<\/p>\n<p><em>\u00bfQuieres profundizar en armon\u00eda y llevar tus producciones o tus sesiones al siguiente nivel? \u00c9chale un vistazo a nuestros:<br \/>\n<strong>&#8211; <a style=\"color: #ff6600;\" href=\"https:\/\/produccionmusic.com\/\">Curso Producci\u00f3n Musical<\/a><\/strong><br \/>\n<strong>&#8211; <a style=\"color: #ff6600;\" href=\"https:\/\/produccionmusic.com\/curso-rekordbox-online\/\">Curso Dj<\/a><\/strong><\/em><\/p>\n<p>Luis Sancho.-\u00a0Compositor, Productor, Ingeniero de Mezcla \u2013 Masterizaci\u00f3n y Dj.<br \/>\nEspecialista en software DAW y Dj.<\/p>\n<p>Profesor en\u00a0escuela profesional\u00a0<strong><a style=\"color: #ff6600;\" href=\"https:\/\/produccionmusic.com\/\">ProduccionMusic.com<\/a><\/strong><\/p>\n<p><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><\/p>\n<p><em>\u00a0<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Si llevas un tiempo en esto de la m\u00fasica, seguro que has visto ese diagrama circular con las doce notas repartidas como si fuera un reloj. Unos lo llaman c\u00edrculo de quintas y otros, sobre todo si vienen del mundo del DJ, lo conocen como rueda Camelot. Y aqu\u00ed viene &#8230;<\/p>\n<a href=\"https:\/\/produccionmusic.com\/blog\/circulo-de-quintas-y-rueda-camelot\/\" title=\"Permalink to: C\u00edrculo de Quintas y Rueda Camelot Interactivo: la Herramienta con Sonido para M\u00fasicos, Productores y DJs\" class=\"btn btn-extra-small btn-dark-border btn-transparent\">Leer m\u00e1s... <\/a>","protected":false},"author":2,"featured_media":3062,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7],"tags":[],"class_list":["post-3044","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\/3044","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=3044"}],"version-history":[{"count":23,"href":"https:\/\/produccionmusic.com\/blog\/wp-json\/wp\/v2\/posts\/3044\/revisions"}],"predecessor-version":[{"id":3132,"href":"https:\/\/produccionmusic.com\/blog\/wp-json\/wp\/v2\/posts\/3044\/revisions\/3132"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/produccionmusic.com\/blog\/wp-json\/wp\/v2\/media\/3062"}],"wp:attachment":[{"href":"https:\/\/produccionmusic.com\/blog\/wp-json\/wp\/v2\/media?parent=3044"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/produccionmusic.com\/blog\/wp-json\/wp\/v2\/categories?post=3044"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/produccionmusic.com\/blog\/wp-json\/wp\/v2\/tags?post=3044"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}