Amostras de áudio funcionais até o momento. Agulha de tempo, mute/solo e ajustado com a velocidade de reprodução
Deploy / Deploy (push) Successful in 1m14s
Details
Deploy / Deploy (push) Successful in 1m14s
Details
This commit is contained in:
parent
da310421ba
commit
facc329b03
|
|
@ -10,18 +10,28 @@
|
|||
--text-dark: #888;
|
||||
--accent-green: #2ecc71;
|
||||
--accent-red: #d9534f;
|
||||
--background-light: #4a4f57;
|
||||
--background-lighter: #5c626b;
|
||||
--border-color-dark: #1a1c1e;
|
||||
--accent-blue: #3498db;
|
||||
}
|
||||
|
||||
/* =============================================== */
|
||||
/* ESTILOS GLOBAIS E LAYOUT PRINCIPAL
|
||||
/* ESTILOS GLOBAIS E LAYOUT PRINCIPAL (CORRIGIDO)
|
||||
/* =============================================== */
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
|
||||
background-color: var(--bg-body);
|
||||
color: var(--text-light);
|
||||
/* Retornamos ao layout com padding para compatibilidade */
|
||||
padding-left: 300px;
|
||||
padding-top: 50px; /* Adiciona espaço para a toolbar fixa */
|
||||
box-sizing: border-box;
|
||||
transition: padding-left .3s ease;
|
||||
height: 100vh;
|
||||
display: flex; /* Usamos flex no body para o main-content crescer */
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
body.sidebar-hidden {
|
||||
|
|
@ -33,7 +43,13 @@ body.knob-dragging {
|
|||
}
|
||||
|
||||
.main-content {
|
||||
padding: 2rem;
|
||||
padding: 1rem;
|
||||
flex-grow: 1; /* Faz o conteúdo principal ocupar o espaço restante */
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
overflow: hidden; /* Evita que o conteúdo transborde */
|
||||
height: 100%; /* Garante que o flexbox interno funcione */
|
||||
}
|
||||
|
||||
/* =============================================== */
|
||||
|
|
@ -73,43 +89,13 @@ body.sidebar-hidden .sample-browser {
|
|||
padding: 10px;
|
||||
}
|
||||
|
||||
.browser-content ul {
|
||||
list-style: none;
|
||||
padding-left: 15px;
|
||||
}
|
||||
|
||||
.browser-content li {
|
||||
padding: 5px;
|
||||
cursor: pointer;
|
||||
border-radius: 3px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.browser-content li:hover {
|
||||
background-color: var(--bg-editor);
|
||||
}
|
||||
|
||||
.browser-content li i {
|
||||
margin-right: 8px;
|
||||
width: 12px;
|
||||
color: var(--text-dark);
|
||||
transition: transform .2s;
|
||||
}
|
||||
|
||||
.browser-content li.directory > ul {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.browser-content li.directory.open > ul {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.browser-content li.directory.open > .fa-folder {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
.browser-content ul { list-style: none; padding-left: 15px; }
|
||||
.browser-content li { padding: 5px; cursor: pointer; border-radius: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; user-select: none; }
|
||||
.browser-content li:hover { background-color: var(--bg-editor); }
|
||||
.browser-content li i { margin-right: 8px; width: 12px; color: var(--text-dark); transition: transform .2s; }
|
||||
.browser-content li.directory > ul { display: none; }
|
||||
.browser-content li.directory.open > ul { display: block; }
|
||||
.browser-content li.directory.open > .fa-folder { transform: rotate(90deg); }
|
||||
|
||||
#sidebar-toggle {
|
||||
position: fixed;
|
||||
|
|
@ -150,27 +136,90 @@ body.sidebar-hidden #sidebar-toggle {
|
|||
background-color: var(--bg-toolbar);
|
||||
border-bottom: 2px solid var(--border-color);
|
||||
transition: left .3s ease;
|
||||
height: 50px; /* Altura fixa para o cálculo do padding do body */
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body.sidebar-hidden .global-toolbar {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
/* =============================================== */
|
||||
/* NOVO: EDITOR DE AMOSTRAS DE ÁUDIO (AUDIO EDITOR)
|
||||
/* =============================================== */
|
||||
|
||||
/* =============================================== */
|
||||
/* EDITOR DE BATIDAS (BEAT EDITOR)
|
||||
/* =============================================== */
|
||||
.beat-editor {
|
||||
background-color: var(--bg-body);
|
||||
/* O container principal que substitui o .future-panel */
|
||||
.audio-editor {
|
||||
height: 50%;
|
||||
background-color: var(--bg-editor);
|
||||
border: 1px solid var(--border-color);
|
||||
width: 100%;
|
||||
max-width: 900px;
|
||||
margin: auto;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 5px 15px rgba(0, 0, 0, .3);
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
/* Container para as faixas de áudio, com scroll vertical */
|
||||
#audio-track-container {
|
||||
overflow-y: auto;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
/* Estilo para cada linha de faixa de áudio */
|
||||
.audio-track-lane {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 8px 10px;
|
||||
background-color: var(--bg-editor);
|
||||
border-bottom: 1px solid var(--bg-toolbar);
|
||||
min-height: 40px; /* Altura mínima para cada faixa */
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
|
||||
/* =============================================== */
|
||||
/* ESTILOS DO EDITOR DE ÁUDIO (MARCADORES)
|
||||
/* =============================================== */
|
||||
|
||||
/* Wrapper para a visualização do espectrograma, permite scroll horizontal */
|
||||
.spectrogram-view-wrapper {
|
||||
flex-grow: 1;
|
||||
overflow-x: auto;
|
||||
overflow-y: hidden;
|
||||
background-color: #2a2c30;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
/* Garante que o grid possa conter elementos posicionados de forma absoluta */
|
||||
.spectrogram-view-grid {
|
||||
position: relative;
|
||||
display: inline-block; /* Faz o contêiner se ajustar à largura do canvas */
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
/* Estilo para os números de compasso */
|
||||
.bar-marker {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
transform: translateX(-50%); /* Centraliza o número sobre a linha */
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
color: var(--text-dark);
|
||||
padding: 1px 5px;
|
||||
font-size: 0.7rem;
|
||||
border-radius: 3px;
|
||||
user-select: none; /* Impede que o texto seja selecionado */
|
||||
z-index: 5; /* Garante que fique acima da forma de onda mas abaixo da agulha */
|
||||
}
|
||||
|
||||
/* Mantém o canvas como block para evitar espaçamentos */
|
||||
.waveform-canvas {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* =============================================== */
|
||||
/* TOOLBAR DO EDITOR
|
||||
/* =============================================== */
|
||||
.editor-header {
|
||||
background-color: var(--bg-toolbar);
|
||||
padding: 4px 10px;
|
||||
|
|
@ -179,590 +228,264 @@ body.sidebar-hidden .global-toolbar {
|
|||
justify-content: space-between;
|
||||
align-items: center;
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.window-controls i {
|
||||
margin-left: 12px;
|
||||
cursor: pointer;
|
||||
.window-controls i { margin-left: 12px; cursor: pointer; }
|
||||
|
||||
.editor-toolbar, .editor-header .playback-controls {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 15px;
|
||||
}
|
||||
|
||||
.editor-toolbar {
|
||||
background-color: var(--bg-toolbar);
|
||||
padding: 5px 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 15px;
|
||||
border-bottom: 2px solid var(--border-color);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.editor-toolbar i {
|
||||
cursor: pointer;
|
||||
padding: 5px;
|
||||
border-radius: 3px;
|
||||
.editor-toolbar i, .editor-header .playback-controls i {
|
||||
cursor: pointer;
|
||||
padding: 5px;
|
||||
border-radius: 3px;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.editor-toolbar i.enabled {
|
||||
background-color: var(--bg-body);
|
||||
box-shadow: inset 0 0 2px #000;
|
||||
}
|
||||
.editor-toolbar i.enabled { background-color: var(--bg-body); box-shadow: inset 0 0 2px #000; }
|
||||
|
||||
.pattern-selector {
|
||||
background-color: var(--bg-body);
|
||||
padding: 5px 15px;
|
||||
border: 1px solid var(--border-color);
|
||||
flex-grow: 1;
|
||||
font-size: .9rem;
|
||||
border-radius: 2px;
|
||||
}
|
||||
.pattern-manager { display: flex; align-items: center; gap: 10px; }
|
||||
.pattern-selector { background-color: var(--bg-body); color: var(--text-light); padding: 5px 10px; border: 1px solid var(--border-color); font-size: .9rem; border-radius: 2px; }
|
||||
.pattern-btn { background: var(--bg-body); border: 1px solid var(--border-color); color: var(--text-light); cursor: pointer; border-radius: 3px; width: 28px; height: 28px; font-size: 1.2rem; }
|
||||
|
||||
/* =============================================== */
|
||||
/* FAIXAS (TRACK LANES) E SEQUENCIADOR
|
||||
/* =============================================== */
|
||||
#track-container {
|
||||
overflow-y: auto;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.track-lane {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 8px 10px;
|
||||
background-color: var(--bg-editor);
|
||||
border: 2px dashed transparent;
|
||||
transition: border-color 0.2s;
|
||||
border-bottom: 1px solid var(--bg-toolbar);
|
||||
border-left: 2px solid transparent;
|
||||
border-right: 2px solid transparent;
|
||||
transition: border-color 0.2s, background-color 0.2s;
|
||||
}
|
||||
|
||||
.track-lane.active-track {
|
||||
background-color: #40454d;
|
||||
}
|
||||
|
||||
.track-lane.drag-over {
|
||||
border-color: var(--accent-green);
|
||||
}
|
||||
|
||||
.track-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
width: 180px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.track-info .fa-gear {
|
||||
font-size: 1.2rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.track-mute {
|
||||
/* Localize a regra .track-mute e substitua por esta */
|
||||
.track-solo-btn {
|
||||
width: 25px;
|
||||
height: 12px;
|
||||
background-color: var(--accent-green);
|
||||
background-color: var(--accent-red); /* Cor padrão: vermelho */
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
border: 1px solid var(--border-color);
|
||||
box-shadow: inset 0 0 2px #000;
|
||||
transition: background-color 0.2s, opacity 0.2s;
|
||||
}
|
||||
|
||||
.track-name {
|
||||
color: var(--accent-red);
|
||||
font-weight: 700;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
.track-solo-btn:hover {
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.track-controls {
|
||||
display: flex;
|
||||
gap: 5px;
|
||||
margin: 0 10px;
|
||||
padding-left: 10px;
|
||||
border-left: 1px solid var(--bg-toolbar);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.knob-container {
|
||||
text-align: center;
|
||||
font-size: .7rem;
|
||||
color: var(--text-dark);
|
||||
}
|
||||
|
||||
.knob {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
background-color: var(--bg-toolbar);
|
||||
border-radius: 50%;
|
||||
border: 1px solid var(--border-color);
|
||||
margin-bottom: 2px;
|
||||
cursor: grab;
|
||||
box-shadow: inset 0 0 4px #222;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.knob:active {
|
||||
cursor: grabbing;
|
||||
}
|
||||
|
||||
.knob-indicator {
|
||||
width: 2px;
|
||||
height: 8px;
|
||||
background-color: var(--text-light);
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
left: 50%;
|
||||
transform-origin: bottom center;
|
||||
transform: translateX(-50%) rotate(0deg);
|
||||
border-radius: 1px;
|
||||
}
|
||||
|
||||
.step-sequencer-wrapper {
|
||||
flex-grow: 1;
|
||||
overflow-x: auto;
|
||||
overflow-y: hidden;
|
||||
padding-bottom: 8px;
|
||||
}
|
||||
|
||||
.step-sequencer {
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.step-sequencer-wrapper::-webkit-scrollbar {
|
||||
height: 8px;
|
||||
}
|
||||
.step-sequencer-wrapper::-webkit-scrollbar-track {
|
||||
background: var(--border-color);
|
||||
border-radius: 4px;
|
||||
}
|
||||
.step-sequencer-wrapper::-webkit-scrollbar-thumb {
|
||||
background: var(--bg-toolbar);
|
||||
border-radius: 4px;
|
||||
}
|
||||
.step-sequencer-wrapper::-webkit-scrollbar-thumb:hover {
|
||||
background: #555;
|
||||
}
|
||||
|
||||
/* (CORREÇÃO) CSS para as marcações de compasso */
|
||||
.step-wrapper {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.step-marker {
|
||||
position: absolute;
|
||||
top: -16px;
|
||||
left: 1px;
|
||||
font-size: .6rem;
|
||||
color: var(--text-dark);
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.step {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
background-color: #2a2a2a;
|
||||
border: 1px solid #4a4a4a;
|
||||
border-radius: 2px;
|
||||
cursor: pointer;
|
||||
transition: background-color .1s, transform 0.1s;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.step-dark {
|
||||
background-color: #1e1e1e;
|
||||
}
|
||||
|
||||
.step:hover {
|
||||
background-color: #555;
|
||||
border-color: #888;
|
||||
}
|
||||
|
||||
.step.active {
|
||||
/* Quando solado (ativo), o botão fica verde */
|
||||
.track-solo-btn.active {
|
||||
background-color: var(--accent-green);
|
||||
border: 1px solid #fff;
|
||||
box-shadow: 0 0 8px var(--accent-green);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.step.playing {
|
||||
transform: scale(1.1);
|
||||
box-shadow: inset 0 0 8px rgba(255, 255, 255, 0.8);
|
||||
.track-info { display: flex; align-items: center; gap: 8px; width: 180px; flex-shrink: 0; }
|
||||
.track-info .fa-gear { font-size: 1.2rem; cursor: pointer; }
|
||||
.track-mute { width: 25px; height: 12px; background-color: var(--accent-green); border-radius: 6px; cursor: pointer; border: 1px solid var(--border-color); box-shadow: inset 0 0 2px #000; transition: background-color 0.2s, opacity 0.2s; }
|
||||
.track-mute:hover {
|
||||
opacity: 0.8;
|
||||
}
|
||||
.track-mute.active {
|
||||
background-color: var(--text-dark);
|
||||
opacity: 0.7;
|
||||
}
|
||||
.track-name { color: var(--accent-red); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
||||
.track-controls { display: flex; gap: 5px; margin: 0 10px; padding-left: 10px; border-left: 1px solid var(--bg-toolbar); flex-shrink: 0; }
|
||||
.knob-container { text-align: center; font-size: .7rem; color: var(--text-dark); }
|
||||
.knob { width: 28px; height: 28px; background-color: var(--bg-toolbar); border-radius: 50%; border: 1px solid var(--border-color); margin-bottom: 2px; cursor: grab; box-shadow: inset 0 0 4px #222; position: relative; }
|
||||
.knob:active { cursor: grabbing; }
|
||||
.knob-indicator { width: 2px; height: 8px; background-color: var(--text-light); position: absolute; top: 2px; left: 50%; transform-origin: bottom center; transform: translateX(-50%) rotate(0deg); border-radius: 1px; }
|
||||
|
||||
.step-sequencer-wrapper { flex-grow: 1; overflow-x: auto; overflow-y: hidden; padding-bottom: 8px; }
|
||||
.step-sequencer { display: flex; gap: 4px; }
|
||||
.step-sequencer-wrapper::-webkit-scrollbar { height: 8px; }
|
||||
.step-sequencer-wrapper::-webkit-scrollbar-track { background: var(--border-color); border-radius: 4px; }
|
||||
.step-sequencer-wrapper::-webkit-scrollbar-thumb { background: var(--bg-toolbar); border-radius: 4px; }
|
||||
.step-sequencer-wrapper::-webkit-scrollbar-thumb:hover { background: #555; }
|
||||
.step-wrapper { position: relative; }
|
||||
.step-marker { position: absolute; top: -16px; left: 1px; font-size: .6rem; color: var(--text-dark); user-select: none; }
|
||||
.step { width: 28px; height: 28px; background-color: #2a2a2a; border: 1px solid #4a4a4a; border-radius: 2px; cursor: pointer; transition: background-color .1s, transform 0.1s; flex-shrink: 0; }
|
||||
.step-dark { background-color: #1e1e1e; }
|
||||
.step:hover { background-color: #555; border-color: #888; }
|
||||
.step.active { background-color: var(--accent-green); border: 1px solid #fff; box-shadow: 0 0 8px var(--accent-green); }
|
||||
.step.playing { transform: scale(1.1); box-shadow: inset 0 0 8px rgba(255, 255, 255, 0.8); }
|
||||
|
||||
/* =============================================== */
|
||||
/* CONTROLES E INPUTS
|
||||
/* =============================================== */
|
||||
.interactive-input-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 4px;
|
||||
}
|
||||
.interactive-input-container { display: flex; align-items: center; justify-content: center; gap: 4px; }
|
||||
.compasso-group { display: flex; align-items: center; gap: 4px; }
|
||||
.value-input { background: 0 0; border: 0; outline: 0; color: var(--accent-green); font-weight: 700; font-size: 1.4rem; font-family: Courier New, Courier, monospace; text-align: center; padding: 0; width: 55px; }
|
||||
.compasso-input { width: 25px; }
|
||||
.compasso-separator { color: var(--accent-green); font-weight: 700; font-size: 1.4rem; font-family: Courier New, Courier, monospace; margin: 0 2px; }
|
||||
.value-input::-webkit-outer-spin-button, .value-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
|
||||
.value-input[type=number] { -moz-appearance: textfield; }
|
||||
.adjust-btn { background: 0 0; border: 0; color: var(--text-dark); font-size: 1rem; font-weight: 700; cursor: pointer; padding: 0 5px; transition: color .2s; line-height: 1; }
|
||||
.adjust-btn:hover { color: #fff; }
|
||||
.control-group { display: flex; align-items: center; gap: 15px; padding: 0 10px; }
|
||||
.control-group i { font-size: 1.2rem; cursor: pointer; color: var(--text-light); transition: color .2s; }
|
||||
.control-group i:hover { color: #fff; }
|
||||
.fa-play, .fa-pause { color: var(--accent-green) !important; }
|
||||
.divider { width: 1px; height: 25px; background-color: var(--border-color); }
|
||||
.info-display-group { display: flex; align-items: center; gap: 5px; }
|
||||
.info-display { background-color: #1a1c1e; padding: 5px 8px; border-radius: 3px; text-align: center; }
|
||||
.info-display .label { color: var(--text-dark); font-size: .6rem; text-transform: uppercase; }
|
||||
.spacer { flex-grow: 1; }
|
||||
#metronome-btn { background: 0 0; border: 1px solid var(--text-dark); color: var(--accent-green); font-family: inherit; font-weight: 700; font-size: .8rem; padding: 5px 10px; border-radius: 3px; cursor: pointer; transition: all .2s; }
|
||||
#metronome-btn:hover { border-color: var(--text-light); background-color: var(--bg-editor); }
|
||||
#metronome-btn.active { background-color: var(--accent-green); color: var(--bg-body); border-color: var(--accent-green); }
|
||||
|
||||
.compasso-group {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
}
|
||||
.modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.7); z-index: 2000; display: flex; justify-content: center; align-items: center; padding: 1rem; visibility: hidden; opacity: 0; transition: visibility 0s 0.3s, opacity 0.3s; }
|
||||
.modal-overlay.visible { visibility: visible; opacity: 1; transition: visibility 0s, opacity 0.3s; }
|
||||
.modal-content { background-color: var(--bg-body); padding: 1.5rem 2rem; border-radius: 6px; border: 1px solid var(--border-color); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); width: 100%; max-width: 500px; position: relative; display: flex; flex-direction: column; gap: 1.5rem; max-height: 90vh; }
|
||||
.modal-close { position: absolute; top: 10px; right: 15px; font-size: 1.5rem; color: var(--text-dark); cursor: pointer; border: none; background: none; }
|
||||
.modal-close:hover { color: var(--text-light); }
|
||||
.modal-title { margin: 0; padding-bottom: 0.5rem; border-bottom: 1px solid var(--bg-toolbar); color: var(--text-light); text-align: center; flex-shrink: 0; }
|
||||
.modal-section { margin: 0; }
|
||||
.modal-section h3 { margin-top: 0; margin-bottom: 0.8rem; font-size: 1rem; color: var(--text-light); }
|
||||
#server-projects-list { max-height: 250px; overflow-y: auto; background-color: var(--bg-toolbar); border: 1px solid var(--border-color); border-radius: 4px; padding: 0.5rem; min-height: 50px; }
|
||||
#server-projects-list .project-item { background-color: var(--bg-editor); padding: 10px 15px; border-radius: 4px; margin-bottom: 8px; cursor: pointer; transition: background-color 0.2s, color 0.2s; border: 1px solid transparent; }
|
||||
#server-projects-list .project-item:last-child { margin-bottom: 0; }
|
||||
#server-projects-list .project-item:hover { background-color: var(--bg-body); color: #fff; border-color: var(--accent-green); }
|
||||
.modal-button { background-color: var(--bg-toolbar); color: var(--text-light); border: 1px solid var(--border-color); padding: 0.8rem 1.5rem; border-radius: 4px; cursor: pointer; font-size: 1rem; transition: background-color 0.2s, border-color 0.2s; width: 100%; text-align: center; }
|
||||
.modal-button:hover { background-color: #4a4f57; border-color: #333; }
|
||||
|
||||
.value-input {
|
||||
background: 0 0;
|
||||
border: 0;
|
||||
outline: 0;
|
||||
color: var(--accent-green);
|
||||
font-weight: 700;
|
||||
font-size: 1.4rem;
|
||||
font-family: Courier New, Courier, monospace;
|
||||
text-align: center;
|
||||
padding: 0;
|
||||
width: 55px;
|
||||
}
|
||||
|
||||
.compasso-input {
|
||||
width: 25px;
|
||||
}
|
||||
|
||||
.compasso-separator {
|
||||
color: var(--accent-green);
|
||||
font-weight: 700;
|
||||
font-size: 1.4rem;
|
||||
font-family: Courier New, Courier, monospace;
|
||||
margin: 0 2px;
|
||||
}
|
||||
|
||||
.value-input::-webkit-outer-spin-button,
|
||||
.value-input::-webkit-inner-spin-button {
|
||||
-webkit-appearance: none;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.value-input[type=number] {
|
||||
-moz-appearance: textfield;
|
||||
}
|
||||
|
||||
.adjust-btn {
|
||||
background: 0 0;
|
||||
border: 0;
|
||||
color: var(--text-dark);
|
||||
font-size: 1rem;
|
||||
font-weight: 700;
|
||||
cursor: pointer;
|
||||
padding: 0 5px;
|
||||
transition: color .2s;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.adjust-btn:hover {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.control-group {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 15px;
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
.control-group i {
|
||||
font-size: 1.2rem;
|
||||
cursor: pointer;
|
||||
color: var(--text-light);
|
||||
transition: color .2s;
|
||||
}
|
||||
|
||||
.control-group i:hover {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.fa-play,
|
||||
.fa-pause {
|
||||
color: var(--accent-green) !important;
|
||||
}
|
||||
|
||||
.divider {
|
||||
width: 1px;
|
||||
height: 25px;
|
||||
background-color: var(--border-color);
|
||||
}
|
||||
|
||||
.info-display-group {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
}
|
||||
|
||||
.info-display {
|
||||
background-color: #1a1c1e;
|
||||
padding: 5px 8px;
|
||||
border-radius: 3px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.info-display .label {
|
||||
color: var(--text-dark);
|
||||
font-size: .6rem;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.spacer {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
#metronome-btn {
|
||||
background: 0 0;
|
||||
border: 1px solid var(--text-dark);
|
||||
color: var(--accent-green);
|
||||
font-family: inherit;
|
||||
font-weight: 700;
|
||||
font-size: .8rem;
|
||||
padding: 5px 10px;
|
||||
border-radius: 3px;
|
||||
cursor: pointer;
|
||||
transition: all .2s;
|
||||
}
|
||||
|
||||
#metronome-btn:hover {
|
||||
border-color: var(--text-light);
|
||||
background-color: var(--bg-editor);
|
||||
}
|
||||
|
||||
#metronome-btn.active {
|
||||
background-color: var(--accent-green);
|
||||
color: var(--bg-body);
|
||||
border-color: var(--accent-green);
|
||||
}
|
||||
|
||||
/* =============================================== */
|
||||
/* MODAL (CAIXA DE DIÁLOGO)
|
||||
/* =============================================== */
|
||||
.modal-overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.7);
|
||||
z-index: 2000;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 1rem;
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
transition: visibility 0s 0.3s, opacity 0.3s;
|
||||
}
|
||||
|
||||
.modal-overlay.visible {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
transition: visibility 0s, opacity 0.3s;
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
background-color: var(--bg-body);
|
||||
padding: 1.5rem 2rem;
|
||||
border-radius: 6px;
|
||||
border: 1px solid var(--border-color);
|
||||
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
|
||||
width: 100%;
|
||||
max-width: 500px;
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1.5rem;
|
||||
max-height: 90vh;
|
||||
}
|
||||
|
||||
.modal-close {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 15px;
|
||||
font-size: 1.5rem;
|
||||
color: var(--text-dark);
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
background: none;
|
||||
}
|
||||
|
||||
.modal-close:hover {
|
||||
color: var(--text-light);
|
||||
}
|
||||
|
||||
.modal-title {
|
||||
margin: 0;
|
||||
padding-bottom: 0.5rem;
|
||||
border-bottom: 1px solid var(--bg-toolbar);
|
||||
color: var(--text-light);
|
||||
text-align: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.modal-section {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.modal-section h3 {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0.8rem;
|
||||
font-size: 1rem;
|
||||
color: var(--text-light);
|
||||
}
|
||||
|
||||
#server-projects-list {
|
||||
max-height: 250px;
|
||||
overflow-y: auto;
|
||||
background-color: var(--bg-toolbar);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 4px;
|
||||
padding: 0.5rem;
|
||||
min-height: 50px;
|
||||
}
|
||||
|
||||
#server-projects-list .project-item {
|
||||
background-color: var(--bg-editor);
|
||||
padding: 10px 15px;
|
||||
border-radius: 4px;
|
||||
margin-bottom: 8px;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.2s, color 0.2s;
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
#server-projects-list .project-item:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
#server-projects-list .project-item:hover {
|
||||
background-color: var(--bg-body);
|
||||
color: #fff;
|
||||
border-color: var(--accent-green);
|
||||
}
|
||||
|
||||
.modal-button {
|
||||
background-color: var(--bg-toolbar);
|
||||
color: var(--text-light);
|
||||
border: 1px solid var(--border-color);
|
||||
padding: 0.8rem 1.5rem;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
font-size: 1rem;
|
||||
transition: background-color 0.2s, border-color 0.2s;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.modal-button:hover {
|
||||
background-color: #4a4f57;
|
||||
border-color: #333;
|
||||
}
|
||||
.file-menu-container { position: relative; }
|
||||
.toolbar-btn { background-color: var(--background-light); color: var(--text-light); border: 1px solid var(--border-color); border-radius: 3px; padding: 5px 10px; cursor: pointer; font-family: inherit; font-size: 0.8rem; }
|
||||
.toolbar-btn:hover { background-color: var(--background-lighter); }
|
||||
.file-menu-dropdown { position: absolute; top: 100%; left: 0; background-color: var(--background-lighter); border: 1px solid var(--border-color-dark); border-radius: 4px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); min-width: 200px; z-index: 1000; overflow: hidden; display: flex; flex-direction: column; }
|
||||
.file-menu-dropdown.hidden { display: none; }
|
||||
.file-menu-dropdown a { color: var(--text-light); padding: 8px 12px; text-decoration: none; display: block; font-size: 0.9rem; }
|
||||
.file-menu-dropdown a:hover { background-color: var(--accent-blue); color: white; }
|
||||
.menu-divider { height: 1px; background-color: var(--border-color); margin: 4px 0; }
|
||||
|
||||
|
||||
/* =============================================== */
|
||||
/* ESTILOS RESPONSIVOS
|
||||
/* ESTILOS RESPONSIVOS (MELHORADO)
|
||||
/* =============================================== */
|
||||
@media (max-width: 1200px) {
|
||||
.info-display-group {
|
||||
gap: 2px;
|
||||
}
|
||||
.info-display {
|
||||
padding: 4px 6px;
|
||||
}
|
||||
.value-input {
|
||||
font-size: 1.2rem;
|
||||
width: 45px;
|
||||
}
|
||||
.compasso-input {
|
||||
width: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 992px) {
|
||||
.main-content {
|
||||
padding: 1.5rem;
|
||||
.global-toolbar {
|
||||
gap: 10px;
|
||||
flex-wrap: wrap;
|
||||
height: auto; /* Permite que a toolbar cresça se o conteúdo quebrar linha */
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
.beat-editor {
|
||||
max-width: 100%;
|
||||
body {
|
||||
padding-top: 80px; /* Aumenta o espaço para a toolbar maior */
|
||||
}
|
||||
.info-display-group {
|
||||
order: 3; /* Move o grupo de informações para o final da toolbar */
|
||||
width: 100%;
|
||||
justify-content: space-around;
|
||||
}
|
||||
.spacer {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
body {
|
||||
padding-left: 0 !important;
|
||||
}
|
||||
.main-content {
|
||||
padding: 1rem;
|
||||
padding-left: 0 !important;
|
||||
}
|
||||
.sample-browser {
|
||||
transform: translateX(-100%);
|
||||
width: 280px;
|
||||
transform: translateX(-100%);
|
||||
position: fixed; /* Volta a ser fixo para deslizar por cima */
|
||||
width: 280px;
|
||||
}
|
||||
body:not(.sidebar-hidden) .sample-browser {
|
||||
transform: translateX(0);
|
||||
transform: translateX(0);
|
||||
}
|
||||
#sidebar-toggle {
|
||||
left: 5px;
|
||||
left: 5px;
|
||||
transform: translateX(0);
|
||||
position: fixed; /* Garante que o botão fique visível */
|
||||
}
|
||||
.global-toolbar {
|
||||
left: 0;
|
||||
padding-left: 45px;
|
||||
left: 0;
|
||||
padding-left: 45px;
|
||||
}
|
||||
.editor-toolbar,
|
||||
.control-group {
|
||||
flex-wrap: wrap;
|
||||
gap: 10px;
|
||||
.main-content {
|
||||
padding: 10px;
|
||||
padding-top: 85px; /* Ajusta o padding para a toolbar fixa */
|
||||
}
|
||||
.track-lane {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
gap: 15px;
|
||||
padding: 15px;
|
||||
.track-lane, .audio-track-lane {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
gap: 15px;
|
||||
padding: 15px;
|
||||
}
|
||||
.track-info,
|
||||
.track-controls {
|
||||
width: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
.track-controls {
|
||||
border-left: none;
|
||||
padding-left: 0;
|
||||
justify-content: space-around;
|
||||
border-left: none;
|
||||
padding-left: 0;
|
||||
justify-content: space-around;
|
||||
}
|
||||
.step-sequencer-wrapper {
|
||||
width: 100%;
|
||||
}
|
||||
.modal-content {
|
||||
max-width: 95vw;
|
||||
padding: 1rem 1.5rem;
|
||||
gap: 1rem;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
/* --- ESTILOS PARA O MENU ARQUIVO --- */
|
||||
|
||||
.file-menu-container {
|
||||
position: relative; /* Essencial para o posicionamento do dropdown */
|
||||
.spectrogram-view-wrapper {
|
||||
position: relative; /* Essencial para o posicionamento absoluto do filho */
|
||||
overflow: hidden; /* Garante que a agulha não saia dos limites */
|
||||
}
|
||||
|
||||
.toolbar-btn {
|
||||
background-color: var(--background-light);
|
||||
color: var(--text-light);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 3px;
|
||||
padding: 5px 10px;
|
||||
cursor: pointer;
|
||||
font-family: inherit;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.toolbar-btn:hover {
|
||||
background-color: var(--background-lighter);
|
||||
}
|
||||
|
||||
.file-menu-dropdown {
|
||||
.playhead {
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 0;
|
||||
background-color: var(--background-lighter);
|
||||
border: 1px solid var(--border-color-dark);
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
|
||||
min-width: 200px;
|
||||
z-index: 1000;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.file-menu-dropdown.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.file-menu-dropdown a {
|
||||
color: var(--text-light);
|
||||
padding: 8px 12px;
|
||||
text-decoration: none;
|
||||
display: block;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.file-menu-dropdown a:hover {
|
||||
background-color: var(--accent-blue);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.menu-divider {
|
||||
height: 1px;
|
||||
background-color: var(--border-color);
|
||||
margin: 4px 0;
|
||||
top: 0;
|
||||
left: 0; /* A posição será atualizada via JavaScript */
|
||||
width: 2px;
|
||||
height: 100%;
|
||||
background-color: var(--accent-red, #e74c3c); /* Use uma cor de destaque */
|
||||
z-index: 10;
|
||||
pointer-events: none; /* Impede que a agulha intercepte cliques do mouse */
|
||||
transition: background-color 0.3s; /* Efeito suave ao parar */
|
||||
}
|
||||
|
|
@ -1,7 +1,8 @@
|
|||
// js/audio.js
|
||||
import { appState } from "./state.js";
|
||||
import { highlightStep } from "./ui.js";
|
||||
import { highlightStep, updateAudioEditorUI, updatePlayheadVisual, resetPlayheadVisual } from "./ui.js";
|
||||
import { getTotalSteps } from "./utils.js";
|
||||
import { PIXELS_PER_STEP } from "./config.js";
|
||||
|
||||
let audioContext;
|
||||
let mainGainNode;
|
||||
|
|
@ -30,6 +31,7 @@ export function initializeAudioContext() {
|
|||
}
|
||||
}
|
||||
|
||||
// ... (funções de master volume/pan, formatTime, metronome, sample player, tick, etc. permanecem iguais)...
|
||||
export function updateMasterVolume(volume) {
|
||||
if (mainGainNode) {
|
||||
mainGainNode.gain.setValueAtTime(volume, audioContext.currentTime);
|
||||
|
|
@ -120,7 +122,6 @@ function tick() {
|
|||
appState.tracks.forEach((track) => {
|
||||
if (!track.patterns || track.patterns.length === 0) return;
|
||||
|
||||
// Usa o índice GLOBAL para saber qual pattern tocar, sincronizando com a UI.
|
||||
const activePattern = track.patterns[appState.activePatternIndex];
|
||||
|
||||
if (activePattern && activePattern.steps[appState.currentStep] && track.samplePath) {
|
||||
|
|
@ -190,4 +191,104 @@ export function togglePlayback() {
|
|||
appState.currentStep = 0;
|
||||
startPlayback();
|
||||
}
|
||||
}
|
||||
|
||||
function animationLoop() {
|
||||
if (!appState.isAudioEditorPlaying || !audioContext) return;
|
||||
const bpm = parseInt(document.getElementById("bpm-input").value, 10) || 120;
|
||||
const stepsPerSecond = (bpm / 60) * 4;
|
||||
const pixelsPerSecond = stepsPerSecond * PIXELS_PER_STEP;
|
||||
const totalElapsedTime = (audioContext.currentTime - appState.audioEditorStartTime) + appState.audioEditorPlaybackTime;
|
||||
const newPositionPx = totalElapsedTime * pixelsPerSecond;
|
||||
const maxDuration = appState.audioTracks.reduce((max, track) => (track.audioBuffer && track.audioBuffer.duration > max) ? track.audioBuffer.duration : max, 0);
|
||||
if (totalElapsedTime >= maxDuration && maxDuration > 0) {
|
||||
stopAudioEditorPlayback();
|
||||
appState.audioEditorPlaybackTime = 0;
|
||||
resetPlayheadVisual();
|
||||
return;
|
||||
}
|
||||
updatePlayheadVisual(newPositionPx);
|
||||
appState.audioEditorAnimationId = requestAnimationFrame(animationLoop);
|
||||
}
|
||||
|
||||
// --- LÓGICA DE REPRODUÇÃO ATUALIZADA ---
|
||||
export function startAudioEditorPlayback() {
|
||||
if (appState.isAudioEditorPlaying || appState.audioTracks.length === 0) return;
|
||||
initializeAudioContext();
|
||||
|
||||
appState.isAudioEditorPlaying = true;
|
||||
appState.activeAudioSources = [];
|
||||
updateAudioEditorUI();
|
||||
|
||||
const startTime = audioContext.currentTime;
|
||||
appState.audioEditorStartTime = startTime;
|
||||
|
||||
// Verifica se existe alguma faixa no modo "solo"
|
||||
const isAnyTrackSoloed = appState.audioTracks.some(t => t.isSoloed);
|
||||
|
||||
appState.audioTracks.forEach(track => {
|
||||
// Condições para tocar:
|
||||
// 1. A faixa deve ter um buffer de áudio.
|
||||
// 2. A faixa não pode estar mutada.
|
||||
const canPlay = track.audioBuffer && !track.isMuted;
|
||||
|
||||
// 3. Lógica de solo:
|
||||
// - Se houver alguma faixa solada, esta faixa TAMBÉM deve estar solada.
|
||||
// - Se NENHUMA faixa estiver solada, todas podem tocar.
|
||||
const shouldPlay = isAnyTrackSoloed ? track.isSoloed : true;
|
||||
|
||||
if (canPlay && shouldPlay) {
|
||||
if (appState.audioEditorPlaybackTime >= track.audioBuffer.duration) return;
|
||||
|
||||
const source = audioContext.createBufferSource();
|
||||
source.buffer = track.audioBuffer;
|
||||
source.connect(track.gainNode);
|
||||
source.start(startTime, appState.audioEditorPlaybackTime);
|
||||
appState.activeAudioSources.push(source);
|
||||
}
|
||||
});
|
||||
|
||||
if (appState.activeAudioSources.length > 0) {
|
||||
if (appState.audioEditorAnimationId) {
|
||||
cancelAnimationFrame(appState.audioEditorAnimationId);
|
||||
}
|
||||
animationLoop();
|
||||
} else {
|
||||
appState.isAudioEditorPlaying = false;
|
||||
updateAudioEditorUI();
|
||||
}
|
||||
}
|
||||
|
||||
export function stopAudioEditorPlayback() {
|
||||
if (!appState.isAudioEditorPlaying) return;
|
||||
const elapsedTime = (audioContext.currentTime - appState.audioEditorStartTime);
|
||||
appState.audioEditorPlaybackTime += elapsedTime;
|
||||
if (appState.audioEditorAnimationId) {
|
||||
cancelAnimationFrame(appState.audioEditorAnimationId);
|
||||
appState.audioEditorAnimationId = null;
|
||||
}
|
||||
appState.activeAudioSources.forEach(source => {
|
||||
try {
|
||||
source.stop(0);
|
||||
} catch (e) { /* Ignora erros */ }
|
||||
});
|
||||
appState.activeAudioSources = [];
|
||||
appState.isAudioEditorPlaying = false;
|
||||
updateAudioEditorUI();
|
||||
}
|
||||
|
||||
export function seekAudioEditor(newTime) {
|
||||
const wasPlaying = appState.isAudioEditorPlaying;
|
||||
if (wasPlaying) {
|
||||
stopAudioEditorPlayback();
|
||||
}
|
||||
appState.audioEditorPlaybackTime = newTime;
|
||||
const bpm = parseInt(document.getElementById("bpm-input").value, 10) || 120;
|
||||
const stepsPerSecond = (bpm / 60) * 4;
|
||||
const pixelsPerSecond = stepsPerSecond * PIXELS_PER_STEP;
|
||||
const newPositionPx = newTime * pixelsPerSecond;
|
||||
updatePlayheadVisual(newPositionPx);
|
||||
if (wasPlaying) {
|
||||
startAudioEditorPlayback();
|
||||
}
|
||||
}
|
||||
|
|
@ -7,3 +7,8 @@ export const NOTE_LENGTH = 12;
|
|||
// Constantes para os valores padrão dos knobs
|
||||
export const DEFAULT_VOLUME = 0.8;
|
||||
export const DEFAULT_PAN = 0.0;
|
||||
|
||||
// --- ADICIONADO ---
|
||||
// Constantes para o layout do editor de áudio
|
||||
export const PIXELS_PER_STEP = 32; // Cada step (1/16) terá 32px de largura
|
||||
export const PIXELS_PER_BAR = 512; // 16 steps * 32px/step = 512px por compasso (bar)
|
||||
|
|
@ -11,6 +11,8 @@ import {
|
|||
initializeAudioContext,
|
||||
updateMasterVolume,
|
||||
updateMasterPan,
|
||||
startAudioEditorPlayback,
|
||||
stopAudioEditorPlayback,
|
||||
} from "./audio.js";
|
||||
import { handleFileLoad, generateMmpFile } from "./file.js";
|
||||
import {
|
||||
|
|
@ -33,6 +35,8 @@ document.addEventListener("DOMContentLoaded", () => {
|
|||
const removeInstrumentBtn = document.getElementById("remove-instrument-btn");
|
||||
const playBtn = document.getElementById("play-btn");
|
||||
const stopBtn = document.getElementById("stop-btn");
|
||||
const audioEditorPlayBtn = document.getElementById("audio-editor-play-btn");
|
||||
const audioEditorStopBtn = document.getElementById("audio-editor-stop-btn");
|
||||
const rewindBtn = document.getElementById("rewind-btn");
|
||||
const metronomeBtn = document.getElementById("metronome-btn");
|
||||
const mmpFileInput = document.getElementById("mmp-file-input");
|
||||
|
|
@ -248,6 +252,17 @@ document.addEventListener("DOMContentLoaded", () => {
|
|||
});
|
||||
});
|
||||
|
||||
// Listeners para os controles do editor de áudio
|
||||
audioEditorPlayBtn.addEventListener("click", () => {
|
||||
if (appState.isAudioEditorPlaying) {
|
||||
stopAudioEditorPlayback();
|
||||
} else {
|
||||
startAudioEditorPlayback();
|
||||
}
|
||||
});
|
||||
|
||||
audioEditorStopBtn.addEventListener("click", stopAudioEditorPlayback);
|
||||
|
||||
loadAndRenderSampleBrowser();
|
||||
renderApp();
|
||||
setupMasterKnobs();
|
||||
|
|
|
|||
|
|
@ -5,18 +5,25 @@ import {
|
|||
getAudioContext,
|
||||
getMainGainNode,
|
||||
} from "./audio.js";
|
||||
import { renderApp } from "./ui.js";
|
||||
import { renderApp, renderAudioEditor } from "./ui.js";
|
||||
import { getTotalSteps } from "./utils.js";
|
||||
|
||||
export let appState = {
|
||||
tracks: [],
|
||||
audioTracks: [],
|
||||
activeTrackId: null,
|
||||
activePatternIndex: 0, // <-- VOLTOU A SER GLOBAL
|
||||
activePatternIndex: 0,
|
||||
isPlaying: false,
|
||||
isAudioEditorPlaying: false,
|
||||
activeAudioSources: [],
|
||||
audioEditorStartTime: 0,
|
||||
audioEditorAnimationId: null,
|
||||
audioEditorPlaybackTime: 0,
|
||||
playbackIntervalId: null,
|
||||
currentStep: 0,
|
||||
metronomeEnabled: false,
|
||||
originalXmlDoc: null,
|
||||
currentBeatBasslineName: 'Novo Projeto',
|
||||
masterVolume: DEFAULT_VOLUME,
|
||||
masterPan: DEFAULT_PAN,
|
||||
};
|
||||
|
|
@ -37,6 +44,54 @@ export async function loadAudioForTrack(track) {
|
|||
return track;
|
||||
}
|
||||
|
||||
export function addAudioTrack(samplePath) {
|
||||
initializeAudioContext();
|
||||
const audioContext = getAudioContext();
|
||||
const mainGainNode = getMainGainNode();
|
||||
|
||||
const newAudioTrack = {
|
||||
id: Date.now() + Math.random(),
|
||||
name: samplePath.split('/').pop(),
|
||||
samplePath: samplePath,
|
||||
audioBuffer: null,
|
||||
volume: DEFAULT_VOLUME,
|
||||
pan: DEFAULT_PAN,
|
||||
isMuted: false,
|
||||
isSoloed: false, // <-- ADICIONADO: Começa como não-solada
|
||||
gainNode: audioContext.createGain(),
|
||||
pannerNode: audioContext.createStereoPanner(),
|
||||
};
|
||||
|
||||
newAudioTrack.gainNode.connect(newAudioTrack.pannerNode);
|
||||
newAudioTrack.pannerNode.connect(mainGainNode);
|
||||
newAudioTrack.gainNode.gain.value = newAudioTrack.volume;
|
||||
newAudioTrack.pannerNode.pan.value = newAudioTrack.pan;
|
||||
|
||||
appState.audioTracks.push(newAudioTrack);
|
||||
|
||||
loadAudioForTrack(newAudioTrack).then(() => {
|
||||
renderAudioEditor();
|
||||
});
|
||||
}
|
||||
|
||||
// A função de mute agora será a de solo.
|
||||
export function toggleAudioTrackSolo(trackId) {
|
||||
const track = appState.audioTracks.find(t => t.id == trackId);
|
||||
if (track) {
|
||||
track.isSoloed = !track.isSoloed;
|
||||
renderAudioEditor(); // Re-renderiza para mostrar a nova cor
|
||||
}
|
||||
}
|
||||
|
||||
// Mantemos a função de mute caso precise no futuro, mas ela não está conectada ao botão.
|
||||
export function toggleAudioTrackMute(trackId) {
|
||||
const track = appState.audioTracks.find(t => t.id == trackId);
|
||||
if (track) {
|
||||
track.isMuted = !track.isMuted;
|
||||
renderAudioEditor();
|
||||
}
|
||||
}
|
||||
|
||||
export function addTrackToState() {
|
||||
initializeAudioContext();
|
||||
const audioContext = getAudioContext();
|
||||
|
|
@ -52,7 +107,7 @@ export function addTrackToState() {
|
|||
patterns: referenceTrack
|
||||
? referenceTrack.patterns.map(p => ({ name: p.name, steps: new Array(p.steps.length).fill(false), pos: p.pos }))
|
||||
: [{ name: "Pattern 1", steps: new Array(totalSteps).fill(false), pos: 0 }],
|
||||
// activePatternIndex foi removido daqui
|
||||
activePatternIndex: 0,
|
||||
volume: DEFAULT_VOLUME,
|
||||
pan: DEFAULT_PAN,
|
||||
gainNode: audioContext.createGain(),
|
||||
|
|
@ -64,18 +119,12 @@ export function addTrackToState() {
|
|||
newTrack.pannerNode.pan.value = newTrack.pan;
|
||||
|
||||
appState.tracks.push(newTrack);
|
||||
if (!appState.activeTrackId) {
|
||||
appState.activeTrackId = newTrack.id;
|
||||
}
|
||||
renderApp();
|
||||
}
|
||||
|
||||
export function removeLastTrackFromState() {
|
||||
if (appState.tracks.length > 0) {
|
||||
const removedTrack = appState.tracks.pop();
|
||||
if (appState.activeTrackId === removedTrack.id) {
|
||||
appState.activeTrackId = appState.tracks[0]?.id || null;
|
||||
}
|
||||
appState.tracks.pop();
|
||||
renderApp();
|
||||
}
|
||||
}
|
||||
|
|
@ -87,18 +136,14 @@ export async function updateTrackSample(trackId, samplePath) {
|
|||
track.name = samplePath.split("/").pop();
|
||||
track.audioBuffer = null;
|
||||
await loadAudioForTrack(track);
|
||||
const trackLane = document.querySelector(`.track-lane[data-track-id="${trackId}"] .track-name`);
|
||||
if (trackLane) {
|
||||
trackLane.textContent = track.name;
|
||||
}
|
||||
renderApp();
|
||||
}
|
||||
}
|
||||
|
||||
export function toggleStepState(trackId, stepIndex) {
|
||||
const track = appState.tracks.find((t) => t.id == trackId);
|
||||
if (track && track.patterns && track.patterns.length > 0) {
|
||||
// Usa o índice GLOBAL para saber qual pattern modificar
|
||||
const activePattern = track.patterns[appState.activePatternIndex];
|
||||
const activePattern = track.patterns[track.activePatternIndex];
|
||||
if (activePattern && activePattern.steps.length > stepIndex) {
|
||||
activePattern.steps[stepIndex] = !activePattern.steps[stepIndex];
|
||||
}
|
||||
|
|
@ -106,7 +151,7 @@ export function toggleStepState(trackId, stepIndex) {
|
|||
}
|
||||
|
||||
export function updateTrackVolume(trackId, volume) {
|
||||
const track = appState.tracks.find((t) => t.id == trackId);
|
||||
const track = appState.tracks.find((t) => t.id == trackId) || appState.audioTracks.find((t) => t.id == trackId);
|
||||
if (track) {
|
||||
const clampedVolume = Math.max(0, Math.min(1.5, volume));
|
||||
track.volume = clampedVolume;
|
||||
|
|
@ -117,7 +162,7 @@ export function updateTrackVolume(trackId, volume) {
|
|||
}
|
||||
|
||||
export function updateTrackPan(trackId, pan) {
|
||||
const track = appState.tracks.find((t) => t.id == trackId);
|
||||
const track = appState.tracks.find((t) => t.id == trackId) || appState.audioTracks.find((t) => t.id == trackId);
|
||||
if (track) {
|
||||
const clampedPan = Math.max(-1, Math.min(1, pan));
|
||||
track.pan = clampedPan;
|
||||
|
|
|
|||
|
|
@ -5,17 +5,34 @@ import {
|
|||
updateTrackSample,
|
||||
updateTrackVolume,
|
||||
updateTrackPan,
|
||||
addAudioTrack,
|
||||
toggleAudioTrackSolo,
|
||||
} from "./state.js";
|
||||
import { playSample, stopPlayback } from "./audio.js";
|
||||
import { playSample, stopPlayback, seekAudioEditor } from "./audio.js";
|
||||
import { getTotalSteps } from "./utils.js";
|
||||
import { loadProjectFromServer } from "./file.js";
|
||||
import { drawWaveform } from "./waveform.js";
|
||||
import { PIXELS_PER_STEP, PIXELS_PER_BAR } from "./config.js";
|
||||
|
||||
export function updateAudioEditorUI() {
|
||||
const playBtn = document.getElementById('audio-editor-play-btn');
|
||||
if (playBtn) {
|
||||
if (appState.isAudioEditorPlaying) {
|
||||
playBtn.classList.remove('fa-play');
|
||||
playBtn.classList.add('fa-pause');
|
||||
} else {
|
||||
playBtn.classList.remove('fa-pause');
|
||||
playBtn.classList.add('fa-play');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
let samplePathMap = {};
|
||||
const globalPatternSelector = document.getElementById('global-pattern-selector');
|
||||
|
||||
if (globalPatternSelector) {
|
||||
globalPatternSelector.addEventListener('change', () => {
|
||||
// A linha stopPlayback() foi REMOVIDA daqui, permitindo a troca em tempo real.
|
||||
stopPlayback();
|
||||
appState.activePatternIndex = parseInt(globalPatternSelector.value, 10);
|
||||
|
||||
const firstTrack = appState.tracks[0];
|
||||
|
|
@ -105,6 +122,137 @@ function buildSamplePathMap(tree, currentPath) {
|
|||
}
|
||||
}
|
||||
|
||||
export function renderAudioEditor() {
|
||||
const audioEditor = document.querySelector('.audio-editor');
|
||||
const audioTrackContainer = document.getElementById('audio-track-container');
|
||||
if (!audioEditor || !audioTrackContainer) return;
|
||||
|
||||
audioEditor.ondragover = (e) => {
|
||||
e.preventDefault();
|
||||
audioEditor.classList.add("drag-over");
|
||||
};
|
||||
audioEditor.ondragleave = () => {
|
||||
audioEditor.classList.remove("drag-over");
|
||||
};
|
||||
audioEditor.ondrop = (e) => {
|
||||
e.preventDefault();
|
||||
audioEditor.classList.remove("drag-over");
|
||||
const filePath = e.dataTransfer.getData("text/plain");
|
||||
if (filePath) {
|
||||
addAudioTrack(filePath);
|
||||
}
|
||||
};
|
||||
|
||||
audioTrackContainer.innerHTML = '';
|
||||
|
||||
appState.audioTracks.forEach(trackData => {
|
||||
const audioTrackLane = document.createElement('div');
|
||||
audioTrackLane.className = 'audio-track-lane';
|
||||
audioTrackLane.dataset.trackId = trackData.id;
|
||||
|
||||
audioTrackLane.innerHTML = `
|
||||
<div class="track-info">
|
||||
<i class="fa-solid fa-gear"></i>
|
||||
<div class="track-solo-btn"></div>
|
||||
<span class="track-name">${trackData.name}</span>
|
||||
</div>
|
||||
<div class="track-controls">
|
||||
<div class="knob-container">
|
||||
<div class="knob" data-control="volume" data-track-id="${trackData.id}"><div class="knob-indicator"></div></div>
|
||||
<span>VOL</span>
|
||||
</div>
|
||||
<div class="knob-container">
|
||||
<div class="knob" data-control="pan" data-track-id="${trackData.id}"><div class="knob-indicator"></div></div>
|
||||
<span>PAN</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="spectrogram-view-wrapper">
|
||||
<div class="spectrogram-view-grid">
|
||||
<div class="playhead"></div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
const grid = audioTrackLane.querySelector('.spectrogram-view-grid');
|
||||
const canvas = document.createElement('canvas');
|
||||
canvas.className = 'waveform-canvas';
|
||||
canvas.height = 60;
|
||||
grid.prepend(canvas);
|
||||
|
||||
audioTrackContainer.appendChild(audioTrackLane);
|
||||
|
||||
if (trackData.audioBuffer) {
|
||||
const bpm = parseInt(document.getElementById("bpm-input").value, 10) || 120;
|
||||
const sampleDuration = trackData.audioBuffer.duration;
|
||||
|
||||
const stepsPerSecond = (bpm / 60) * 4;
|
||||
const totalSteps = sampleDuration * stepsPerSecond;
|
||||
|
||||
const canvasWidth = totalSteps * PIXELS_PER_STEP;
|
||||
canvas.width = canvasWidth;
|
||||
|
||||
drawWaveform(canvas, trackData.audioBuffer, 'var(--accent-green)');
|
||||
|
||||
const numberOfBars = Math.ceil(canvasWidth / PIXELS_PER_BAR);
|
||||
for (let i = 0; i < numberOfBars; i++) {
|
||||
if (i === 0) continue;
|
||||
const marker = document.createElement('div');
|
||||
marker.className = 'bar-marker';
|
||||
marker.textContent = i + 1;
|
||||
marker.style.left = `${i * PIXELS_PER_BAR}px`;
|
||||
grid.appendChild(marker);
|
||||
}
|
||||
}
|
||||
|
||||
const soloButton = audioTrackLane.querySelector('.track-solo-btn');
|
||||
if (soloButton) {
|
||||
if (trackData.isSoloed) {
|
||||
soloButton.classList.add('active');
|
||||
}
|
||||
soloButton.addEventListener('click', (e) => {
|
||||
e.stopPropagation();
|
||||
toggleAudioTrackSolo(trackData.id);
|
||||
});
|
||||
}
|
||||
|
||||
const volumeKnob = audioTrackLane.querySelector('.knob[data-control="volume"]');
|
||||
addKnobInteraction(volumeKnob);
|
||||
updateKnobVisual(volumeKnob, "volume");
|
||||
|
||||
const panKnob = audioTrackLane.querySelector('.knob[data-control="pan"]');
|
||||
addKnobInteraction(panKnob);
|
||||
updateKnobVisual(panKnob, "pan");
|
||||
|
||||
const waveformWrapper = audioTrackLane.querySelector('.spectrogram-view-wrapper');
|
||||
const handleSeek = (event) => {
|
||||
const bpm = parseInt(document.getElementById("bpm-input").value, 10) || 120;
|
||||
const stepsPerSecond = (bpm / 60) * 4;
|
||||
const pixelsPerSecond = stepsPerSecond * PIXELS_PER_STEP;
|
||||
|
||||
const rect = waveformWrapper.getBoundingClientRect();
|
||||
const clickX = event.clientX - rect.left;
|
||||
const scrollLeft = waveformWrapper.scrollLeft;
|
||||
const absoluteX = clickX + scrollLeft;
|
||||
|
||||
const newTime = absoluteX / pixelsPerSecond;
|
||||
|
||||
seekAudioEditor(newTime);
|
||||
};
|
||||
|
||||
waveformWrapper.addEventListener('mousedown', (e) => {
|
||||
e.preventDefault();
|
||||
handleSeek(e);
|
||||
const onMouseMove = (moveEvent) => handleSeek(moveEvent);
|
||||
const onMouseUp = () => {
|
||||
document.removeEventListener('mousemove', onMouseMove);
|
||||
document.removeEventListener('mouseup', onMouseUp);
|
||||
};
|
||||
document.addEventListener('mousemove', onMouseMove);
|
||||
document.addEventListener('mouseup', onMouseUp);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
export function renderApp() {
|
||||
const trackContainer = document.getElementById("track-container");
|
||||
trackContainer.innerHTML = "";
|
||||
|
|
@ -139,25 +287,12 @@ export function renderApp() {
|
|||
|
||||
trackLane.addEventListener('click', () => {
|
||||
if (appState.activeTrackId === trackData.id) return;
|
||||
|
||||
// A linha stopPlayback() também foi REMOVIDA daqui
|
||||
|
||||
stopPlayback();
|
||||
appState.activeTrackId = trackData.id;
|
||||
document.querySelectorAll('.track-lane').forEach(lane => lane.classList.remove('active-track'));
|
||||
trackLane.classList.add('active-track');
|
||||
updateGlobalPatternSelector();
|
||||
|
||||
// Apenas redesenha a UI, sem parar a música
|
||||
const activeTrack = appState.tracks.find(t => t.id === appState.activeTrackId);
|
||||
if (activeTrack) {
|
||||
const activePattern = activeTrack.patterns[activeTrack.activePatternIndex];
|
||||
if (activePattern) {
|
||||
const stepsPerBar = 16;
|
||||
const requiredBars = Math.ceil(activePattern.steps.length / stepsPerBar);
|
||||
document.getElementById("bars-input").value = requiredBars > 0 ? requiredBars : 1;
|
||||
redrawSequencer();
|
||||
}
|
||||
}
|
||||
redrawSequencer();
|
||||
});
|
||||
|
||||
trackLane.addEventListener("dragover", (e) => { e.preventDefault(); trackLane.classList.add("drag-over"); });
|
||||
|
|
@ -182,6 +317,7 @@ export function renderApp() {
|
|||
|
||||
updateGlobalPatternSelector();
|
||||
redrawSequencer();
|
||||
renderAudioEditor();
|
||||
}
|
||||
|
||||
export function redrawSequencer() {
|
||||
|
|
@ -266,7 +402,7 @@ function addKnobInteraction(knobElement) {
|
|||
if (e.button !== 0) return;
|
||||
e.preventDefault();
|
||||
const trackId = knobElement.dataset.trackId;
|
||||
const track = appState.tracks.find((t) => t.id == trackId);
|
||||
const track = appState.tracks.find((t) => t.id == trackId) || appState.audioTracks.find((t) => t.id == trackId);
|
||||
if (!track) return;
|
||||
const startY = e.clientY;
|
||||
const startValue = controlType === "volume" ? track.volume : track.pan;
|
||||
|
|
@ -293,7 +429,7 @@ function addKnobInteraction(knobElement) {
|
|||
knobElement.addEventListener("wheel", (e) => {
|
||||
e.preventDefault();
|
||||
const trackId = knobElement.dataset.trackId;
|
||||
const track = appState.tracks.find((t) => t.id == trackId);
|
||||
const track = appState.tracks.find((t) => t.id == trackId) || appState.audioTracks.find((t) => t.id == trackId);
|
||||
if (!track) return;
|
||||
const step = 0.05;
|
||||
const direction = e.deltaY < 0 ? 1 : -1;
|
||||
|
|
@ -310,7 +446,7 @@ function addKnobInteraction(knobElement) {
|
|||
|
||||
function updateKnobVisual(knobElement, controlType) {
|
||||
const trackId = knobElement.dataset.trackId;
|
||||
const track = appState.tracks.find((t) => t.id == trackId);
|
||||
const track = appState.tracks.find((t) => t.id == trackId) || appState.audioTracks.find((t) => t.id == trackId);
|
||||
if (!track) return;
|
||||
const indicator = knobElement.querySelector(".knob-indicator");
|
||||
if (!indicator) return;
|
||||
|
|
@ -359,11 +495,7 @@ export function highlightStep(stepIndex, isActive) {
|
|||
export async function loadAndRenderSampleBrowser() {
|
||||
const browserContent = document.getElementById("browser-content");
|
||||
try {
|
||||
// --- CORREÇÃO AQUI ---
|
||||
// Adiciona um timestamp à URL para evitar que o navegador use uma versão antiga (em cache) do arquivo.
|
||||
const response = await fetch(`metadata/samples-manifest.json?v=${Date.now()}`);
|
||||
// --- FIM DA CORREÇÃO ---
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error("Arquivo samples-manifest.json não encontrado.");
|
||||
}
|
||||
|
|
@ -459,4 +591,16 @@ export async function showOpenProjectModal() {
|
|||
export function closeOpenProjectModal() {
|
||||
const openProjectModal = document.getElementById("open-project-modal");
|
||||
openProjectModal.classList.remove("visible");
|
||||
}
|
||||
|
||||
export function updatePlayheadVisual(pixels) {
|
||||
document.querySelectorAll('.audio-track-lane .playhead').forEach(ph => {
|
||||
ph.style.left = `${pixels}px`;
|
||||
});
|
||||
}
|
||||
|
||||
export function resetPlayheadVisual() {
|
||||
document.querySelectorAll('.audio-track-lane .playhead').forEach(ph => {
|
||||
ph.style.left = '0px';
|
||||
});
|
||||
}
|
||||
|
|
@ -0,0 +1,48 @@
|
|||
// js/waveform.js
|
||||
|
||||
/**
|
||||
* Desenha a forma de onda de um AudioBuffer em um elemento Canvas.
|
||||
* @param {HTMLCanvasElement} canvas - O elemento canvas onde o desenho será feito.
|
||||
* @param {AudioBuffer} audioBuffer - O buffer de áudio decodificado da faixa.
|
||||
* @param {string} color - A cor da forma de onda (ex: '#2ecc71').
|
||||
*/
|
||||
export function drawWaveform(canvas, audioBuffer, color) {
|
||||
if (!canvas || !audioBuffer) return;
|
||||
|
||||
const ctx = canvas.getContext('2d');
|
||||
const width = canvas.width;
|
||||
const height = canvas.height;
|
||||
const channelData = audioBuffer.getChannelData(0); // Pega os dados do primeiro canal
|
||||
const step = Math.ceil(channelData.length / width);
|
||||
const amp = height / 2; // Amplitude máxima do desenho
|
||||
|
||||
ctx.clearRect(0, 0, width, height); // Limpa o canvas
|
||||
ctx.strokeStyle = color;
|
||||
ctx.lineWidth = 2;
|
||||
ctx.beginPath();
|
||||
|
||||
for (let i = 0; i < width; i++) {
|
||||
let min = 1.0;
|
||||
let max = -1.0;
|
||||
|
||||
// Encontra o valor mínimo e máximo para um bloco de amostras
|
||||
for (let j = 0; j < step; j++) {
|
||||
const datum = channelData[(i * step) + j];
|
||||
if (datum < min) {
|
||||
min = datum;
|
||||
}
|
||||
if (datum > max) {
|
||||
max = datum;
|
||||
}
|
||||
}
|
||||
|
||||
// Desenha a linha vertical para aquele ponto no tempo
|
||||
const x = i;
|
||||
const y_max = (1 + max) * amp;
|
||||
const y_min = (1 + min) * amp;
|
||||
|
||||
ctx.moveTo(x, y_max);
|
||||
ctx.lineTo(x, y_min);
|
||||
}
|
||||
ctx.stroke();
|
||||
}
|
||||
228
creation.html
228
creation.html
|
|
@ -18,108 +18,148 @@
|
|||
</aside>
|
||||
|
||||
<button id="sidebar-toggle"><i class="fa-solid fa-caret-left"></i></button>
|
||||
|
||||
<header class="global-toolbar">
|
||||
<div class="control-group">
|
||||
<i class="fa-solid fa-file" id="new-project-btn" title="Novo Projeto"></i>
|
||||
<i class="fa-solid fa-folder-open" id="open-mmp-btn" title="Abrir Projeto do Servidor"></i>
|
||||
<i class="fa-solid fa-save" id="save-mmp-btn" title="Salvar Projeto (.mmp)"></i>
|
||||
<i class="fa-solid fa-upload" id="upload-sample-btn" title="Carregar Sample do Computador"></i>
|
||||
</div>
|
||||
<div class="divider"></div>
|
||||
<div class="control-group">
|
||||
<i class="fa-solid fa-backward-step" id="rewind-btn" title="Voltar ao Início"></i>
|
||||
<i class="fa-solid fa-play" title="Play/Pause Global (Futuro)"></i>
|
||||
<i class="fa-solid fa-stop" title="Stop Global (Futuro)"></i>
|
||||
<i class="fa-solid fa-circle-dot" title="Gravar"></i>
|
||||
</div>
|
||||
<div class="divider"></div>
|
||||
<div class="info-display-group">
|
||||
<div class="info-display">
|
||||
<div class="interactive-input-container">
|
||||
<button class="adjust-btn" data-target="bpm" data-step="-1">-</button>
|
||||
<input type="text" class="value-input" id="bpm-input" value="140" data-min="20" data-max="400"/>
|
||||
<button class="adjust-btn" data-target="bpm" data-step="1">+</button>
|
||||
</div>
|
||||
<div class="label">ANDAMENTO/BPM</div>
|
||||
<div class="app-container">
|
||||
<header class="global-toolbar">
|
||||
<div class="control-group">
|
||||
<i class="fa-solid fa-file" id="new-project-btn" title="Novo Projeto"></i>
|
||||
<i class="fa-solid fa-folder-open" id="open-mmp-btn" title="Abrir Projeto do Servidor"></i>
|
||||
<i class="fa-solid fa-save" id="save-mmp-btn" title="Salvar Projeto (.mmp)"></i>
|
||||
<i class="fa-solid fa-upload" id="upload-sample-btn" title="Carregar Sample do Computador"></i>
|
||||
</div>
|
||||
<div class="info-display">
|
||||
<div class="interactive-input-container">
|
||||
<button class="adjust-btn" data-target="bars" data-step="-1">-</button>
|
||||
<input type="text" class="value-input" id="bars-input" value="1" data-min="1" data-max="64"/>
|
||||
<button class="adjust-btn" data-target="bars" data-step="1">+</button>
|
||||
</div>
|
||||
<div class="label">COMPASSOS</div>
|
||||
<div class="divider"></div>
|
||||
<div class="control-group">
|
||||
<i class="fa-solid fa-backward-step" id="rewind-btn" title="Voltar ao Início"></i>
|
||||
<i class="fa-solid fa-play" title="Play/Pause Global (Futuro)"></i>
|
||||
<i class="fa-solid fa-stop" title="Stop Global (Futuro)"></i>
|
||||
<i class="fa-solid fa-circle-dot" title="Gravar"></i>
|
||||
</div>
|
||||
<div class="info-display">
|
||||
<div class="interactive-input-container">
|
||||
<div class="compasso-group">
|
||||
<button class="adjust-btn" data-target="compasso-a" data-step="-1">-</button>
|
||||
<input type="text" class="value-input compasso-input" id="compasso-a-input" value="4" data-min="1" data-max="16"/>
|
||||
<button class="adjust-btn" data-target="compasso-a" data-step="1">+</button>
|
||||
<div class="divider"></div>
|
||||
<div class="info-display-group">
|
||||
<div class="info-display">
|
||||
<div class="interactive-input-container">
|
||||
<button class="adjust-btn" data-target="bpm" data-step="-1">-</button>
|
||||
<input type="text" class="value-input" id="bpm-input" value="140" data-min="20" data-max="400"/>
|
||||
<button class="adjust-btn" data-target="bpm" data-step="1">+</button>
|
||||
</div>
|
||||
<span class="compasso-separator">/</span>
|
||||
<div class="compasso-group">
|
||||
<button class="adjust-btn" data-target="compasso-b" data-step="-1">-</button>
|
||||
<input type="text" class="value-input compasso-input" id="compasso-b-input" value="4" data-min="1" data-max="16"/>
|
||||
<button class="adjust-btn" data-target="compasso-b" data-step="1">+</button>
|
||||
<div class="label">ANDAMENTO/BPM</div>
|
||||
</div>
|
||||
<div class="info-display">
|
||||
<div class="interactive-input-container">
|
||||
<button class="adjust-btn" data-target="bars" data-step="-1">-</button>
|
||||
<input type="text" class="value-input" id="bars-input" value="1" data-min="1" data-max="64"/>
|
||||
<button class="adjust-btn" data-target="bars" data-step="1">+</button>
|
||||
</div>
|
||||
<div class="label">COMPASSOS</div>
|
||||
</div>
|
||||
<div class="info-display">
|
||||
<div class="interactive-input-container">
|
||||
<div class="compasso-group">
|
||||
<button class="adjust-btn" data-target="compasso-a" data-step="-1">-</button>
|
||||
<input type="text" class="value-input compasso-input" id="compasso-a-input" value="4" data-min="1" data-max="16"/>
|
||||
<button class="adjust-btn" data-target="compasso-a" data-step="1">+</button>
|
||||
</div>
|
||||
<span class="compasso-separator">/</span>
|
||||
<div class="compasso-group">
|
||||
<button class="adjust-btn" data-target="compasso-b" data-step="-1">-</button>
|
||||
<input type="text" class="value-input compasso-input" id="compasso-b-input" value="4" data-min="1" data-max="16"/>
|
||||
<button class="adjust-btn" data-target="compasso-b" data-step="1">+</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="label">COMPASSO</div>
|
||||
</div>
|
||||
<div class="info-display">
|
||||
<div id="timer-display" class="interactive-input-container" style="font-size: 0.7rem; color: var(--text-dark)">00:00:00</div>
|
||||
<div class="label">MIN:SEC:MSEC</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="control-group">
|
||||
<button id="metronome-btn" title="Metrônomo On/Off">Metrônomo</button>
|
||||
</div>
|
||||
<div class="spacer"></div>
|
||||
<div class="control-group master-controls">
|
||||
<div class="knob-container">
|
||||
<div class="knob" id="master-volume-knob"><div class="knob-indicator"></div></div>
|
||||
<span>VOL MASTER</span>
|
||||
</div>
|
||||
<div class="knob-container">
|
||||
<div class="knob" id="master-pan-knob"><div class="knob-indicator"></div></div>
|
||||
<span>PAN MASTER</span>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main class="main-content">
|
||||
<div class="beat-editor">
|
||||
<div class="editor-header">
|
||||
Mostrar/esconder Editor de Bases
|
||||
<div class="window-controls">
|
||||
<i class="fa-solid fa-minus"></i><i class="fa-regular fa-square"></i><i class="fa-solid fa-xmark"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="label">COMPASSO</div>
|
||||
</div>
|
||||
<div class="info-display">
|
||||
<div id="timer-display" class="interactive-input-container" style="font-size: 0.7rem; color: var(--text-dark)">00:00:00</div>
|
||||
<div class="label">MIN:SEC:MSEC</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="control-group">
|
||||
<button id="metronome-btn" title="Metrônomo On/Off">Metrônomo</button>
|
||||
</div>
|
||||
<div class="spacer"></div>
|
||||
<div class="control-group master-controls">
|
||||
<div class="knob-container">
|
||||
<div class="knob" id="master-volume-knob"><div class="knob-indicator"></div></div>
|
||||
<span>VOL MASTER</span>
|
||||
</div>
|
||||
<div class="knob-container">
|
||||
<div class="knob" id="master-pan-knob"><div class="knob-indicator"></div></div>
|
||||
<span>PAN MASTER</span>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main class="main-content">
|
||||
<div class="beat-editor">
|
||||
<div class="editor-header">
|
||||
Mostrar/esconder Editor de Bases
|
||||
<div class="window-controls">
|
||||
<i class="fa-solid fa-minus"></i><i class="fa-regular fa-square"></i><i class="fa-solid fa-xmark"></i>
|
||||
<div class="editor-toolbar">
|
||||
<div class="playback-controls">
|
||||
<i class="fa-solid fa-play" id="play-btn" title="Play/Pause"></i>
|
||||
<i class="fa-solid fa-stop" id="stop-btn" title="Stop"></i>
|
||||
</div>
|
||||
<div class="pattern-manager">
|
||||
<h2 id="beat-bassline-title"></h2>
|
||||
<select id="global-pattern-selector" class="pattern-selector" disabled>
|
||||
<option>Selecione uma faixa</option>
|
||||
</select>
|
||||
<button id="add-pattern-btn" class="pattern-btn">+</button>
|
||||
<button id="remove-pattern-btn" class="pattern-btn">-</button>
|
||||
</div>
|
||||
<div class="tool-icons">
|
||||
<i class="fa-solid fa-table-cells"></i><i class="fa-solid fa-bars-staggered"></i><i class="fa-solid fa-wave-square enabled"></i><i class="fa-solid fa-plus" id="add-bar-btn" title="Adicionar 1 Compasso"></i>
|
||||
</div>
|
||||
<div class="zoom-controls">
|
||||
<i class="fa-solid fa-minus" id="remove-instrument-btn"></i><i class="fa-solid fa-plus" id="add-instrument-btn"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div id="track-container"></div>
|
||||
</div>
|
||||
<div class="editor-toolbar">
|
||||
<div class="playback-controls">
|
||||
<i class="fa-solid fa-play" id="play-btn" title="Play/Pause"></i>
|
||||
<i class="fa-solid fa-stop" id="stop-btn" title="Stop"></i>
|
||||
</div>
|
||||
<div class="pattern-manager">
|
||||
<h2 id="beat-bassline-title"></h2>
|
||||
<select id="global-pattern-selector" class="pattern-selector" disabled>
|
||||
<option>Selecione uma faixa</option>
|
||||
</select>
|
||||
<button id="add-pattern-btn" class="pattern-btn">+</button>
|
||||
<button id="remove-pattern-btn" class="pattern-btn">-</button>
|
||||
</div>
|
||||
<div class="tool-icons">
|
||||
<i class="fa-solid fa-table-cells"></i><i class="fa-solid fa-bars-staggered"></i><i class="fa-solid fa-wave-square enabled"></i><i class="fa-solid fa-plus" id="add-bar-btn" title="Adicionar 1 Compasso"></i>
|
||||
</div>
|
||||
<div class="zoom-controls">
|
||||
<i class="fa-solid fa-minus" id="remove-instrument-btn"></i><i class="fa-solid fa-plus" id="add-instrument-btn"></i>
|
||||
</div>
|
||||
<div class="audio-editor">
|
||||
<div class="editor-header">
|
||||
<span>Editor de Amostras de Áudio</span>
|
||||
|
||||
<div class="playback-controls">
|
||||
<i class="fa-solid fa-play" id="audio-editor-play-btn" title="Play/Pause"></i>
|
||||
<i class="fa-solid fa-stop" id="audio-editor-stop-btn" title="Stop"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div id="audio-track-container">
|
||||
<div class="audio-track-lane">
|
||||
<div class="track-info">
|
||||
<i class="fa-solid fa-gear"></i>
|
||||
<div class="track-mute"></div>
|
||||
<span class="track-name">bassslap02.ogg</span>
|
||||
</div>
|
||||
<div class="track-controls">
|
||||
<div class="knob-container">
|
||||
<div class="knob" data-control="volume">
|
||||
<div class="knob-indicator"></div>
|
||||
</div>
|
||||
<span>VOL</span>
|
||||
</div>
|
||||
<div class="knob-container">
|
||||
<div class="knob" data-control="pan">
|
||||
<div class="knob-indicator"></div>
|
||||
</div>
|
||||
<span>PAN</span>
|
||||
</div>
|
||||
<div class="spectrogram-view-wrapper">
|
||||
<div class="spectrogram-view-grid"></div>
|
||||
</div>
|
||||
<div class="spectrogram-view-wrapper">
|
||||
<canvas id="spectrogram-canvas-1" width="800" height="100"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="track-container"></div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
</main>
|
||||
</div>
|
||||
<input type="file" id="mmp-file-input" accept=".mmp, .mmpz" style="display: none"/>
|
||||
<input type="file" id="sample-file-input" accept=".wav,.flac,.ogg,.mp3" style="display: none"/>
|
||||
|
||||
|
|
|
|||
|
|
@ -528,7 +528,11 @@
|
|||
"_isFile": true
|
||||
}
|
||||
},
|
||||
"samples": {},
|
||||
"samples": {
|
||||
"bassdrum_acoustic02_-_Copia.ogg": {
|
||||
"_isFile": true
|
||||
}
|
||||
},
|
||||
"shapes": {
|
||||
"additive.wav": {
|
||||
"_isFile": true
|
||||
|
|
|
|||
|
|
@ -8,9 +8,12 @@ Isso ativará o ambiente de desenvolvimento.
|
|||
# ----------------------- // --------------------------
|
||||
|
||||
# Serviço Watchdog para verificar alterações nas pastas de samples
|
||||
Foi criado um serviço(/etc/systemd/system/mmpCreator-upload-server.service) com nome "mmpCreator-upload-server.service" para verificar alterações na pasta src/samples se há alguma mudança. Caso tenha, ele fará um novo build do site para que seja atualizado em tempo real todas as alterações. (tempo de 5 em 5 segundos)
|
||||
Foi criado um serviço (/etc/systemd/system/mmpCreator-upload-server.service) com nome "mmpCreator-upload-server.service" para verificar alterações na pasta src/samples se há alguma mudança. Caso tenha, ele fará um novo build do site para que seja atualizado em tempo real todas as alterações. (tempo de 5 em 5 segundos)
|
||||
A atualização no site é feita a partir de build do site feito pelo script.
|
||||
|
||||
# TO DO
|
||||
- Verificar caminho do build, pois está sendo feito apenas na parte de testes
|
||||
|
||||
# ----------------------- // --------------------------
|
||||
|
||||
# Servidor de Upload de samples
|
||||
|
|
|
|||
|
|
@ -0,0 +1,129 @@
|
|||
# Visão Geral do Código
|
||||
Este é o código de um sequenciador de música para a web, similar a um "DAW" (Digital Audio Workstation) simplificado, focado em criar batidas e melodias. Ele permite carregar e salvar projetos no formato .mmp (LMMS), manipular trilhas de instrumentos, programar notas em um sequenciador e controlar aspectos como volume e pan.
|
||||
|
||||
# main.js - O Ponto de Partida
|
||||
Este arquivo inicializa a aplicação. Ele conecta os botões da interface (como "Play", "Salvar", "Adicionar Trilha") às suas funções correspondentes, que estão em outros arquivos. Pense nele como o cérebro que delega as tarefas.
|
||||
|
||||
# Função Principal
|
||||
- Configura todos os "ouvintes de eventos" (event listeners).
|
||||
|
||||
Exemplo: Quando o usuário clica no botão com o ID play-btn, a função togglePlayback do arquivo audio.js é chamada para iniciar ou parar a música.
|
||||
|
||||
```JavaScript
|
||||
|
||||
// Exemplo de como um botão é conectado a uma função
|
||||
playBtn.addEventListener("click", togglePlayback);
|
||||
addInstrumentBtn.addEventListener("click", addTrackToState);
|
||||
saveMmpBtn.addEventListener("click", generateMmpFile);
|
||||
```
|
||||
# state.js - O Coração da Aplicação
|
||||
|
||||
Aqui fica guardado todo o estado atual do projeto. Isso inclui as trilhas, as notas, o volume de cada instrumento, se a música está tocando ou não, etc. Quando algo muda (por exemplo, o usuário adiciona uma nota), este estado é atualizado, e a interface visual reflete essa mudança.
|
||||
|
||||
|
||||
# Função Principal
|
||||
- Manter um objeto central (appState) com todas as informações do projeto.
|
||||
|
||||
Exemplo: O objeto appState contém uma lista (tracks) onde cada item representa um instrumento com seus padrões de notas, volume e nome do sample.
|
||||
|
||||
```JavaScript
|
||||
|
||||
export let appState = {
|
||||
tracks: [], // Lista de instrumentos
|
||||
isPlaying: false, // A música está tocando?
|
||||
currentStep: 0, // Qual passo da batida está sendo tocado
|
||||
masterVolume: 0.8, // Volume geral
|
||||
};
|
||||
```
|
||||
|
||||
# ui.js - A Interface Gráfica
|
||||
|
||||
Este arquivo é responsável por desenhar tudo o que o usuário vê e com o que interage na tela: as trilhas, os "knobs" de volume, a grade do sequenciador e o navegador de arquivos de áudio. Ele lê os dados do state.js para saber o que mostrar.
|
||||
|
||||
# Função Principal
|
||||
- Gerar e atualizar os elementos HTML da página.
|
||||
|
||||
Exemplo: A função renderApp cria uma "div" para cada trilha existente no appState, e redrawSequencer desenha os quadradinhos de notas, colorindo os que estão ativos.
|
||||
|
||||
```JavaScript
|
||||
|
||||
// Exemplo da lógica para desenhar os passos da batida
|
||||
for (let i = 0; i < totalGridSteps; i++) {
|
||||
const stepElement = document.createElement("div");
|
||||
// Se a nota 'i' estiver marcada como ativa no estado, adiciona a classe 'active'
|
||||
if (patternSteps[i] === true) {
|
||||
stepElement.classList.add("active");
|
||||
}
|
||||
sequencerContainer.appendChild(stepElement);
|
||||
}
|
||||
```
|
||||
|
||||
# audio.js - O Módulo de Som
|
||||
|
||||
Este é o motor de áudio. Ele usa a API de Áudio do navegador para carregar os samples (os sons dos instrumentos), controlar a reprodução, gerenciar o tempo (BPM), tocar o metrônomo e garantir que as notas toquem na hora certa.
|
||||
|
||||
# Função Principal
|
||||
- Controlar a reprodução de áudio e o tempo da música.
|
||||
|
||||
Exemplo: A função tick é chamada repetidamente em um intervalo de tempo preciso (calculado a partir do BPM). A cada chamada, ela verifica quais notas devem ser tocadas no passo atual e dispara os sons correspondentes.
|
||||
|
||||
```JavaScript
|
||||
|
||||
function tick() {
|
||||
// Para cada trilha...
|
||||
appState.tracks.forEach((track) => {
|
||||
// Se a nota no passo atual estiver ativa...
|
||||
if (activePattern.steps[appState.currentStep]) {
|
||||
// Toca o som daquela trilha
|
||||
playSample(track.samplePath, track.id);
|
||||
}
|
||||
});
|
||||
// Avança para o próximo passo
|
||||
appState.currentStep = (appState.currentStep + 1) % totalSteps;
|
||||
}
|
||||
```
|
||||
|
||||
# file.js - O Gerenciador de Arquivos
|
||||
|
||||
Responsável por ler, interpretar e salvar arquivos de projeto. Ele sabe como decodificar o formato .mmp (baseado em XML) e traduzi-lo para a estrutura de dados que a aplicação entende (appState). Também faz o caminho inverso, convertendo o estado atual do projeto em um arquivo .mmp que pode ser salvo.
|
||||
|
||||
# Função Principal
|
||||
- Ler e escrever projetos no formato .mmp.
|
||||
|
||||
Exemplo: Ao carregar um arquivo, a função parseMmpContent usa o DOMParser do navegador para ler o XML, extrair informações como BPM e as notas de cada trilha, e popular o appState.
|
||||
|
||||
# Utilitários
|
||||
- config.js e utils.js
|
||||
|
||||
# config.js
|
||||
- Guarda valores constantes e configurações padrão, como o volume inicial ou o pan. Isso facilita a manutenção, mantendo números "mágicos" em um só lugar.
|
||||
|
||||
# utils.js
|
||||
- Contém pequenas funções de ajuda usadas em várias partes do código. Por exemplo, a função getTotalSteps calcula quantos "passos" a música terá com base no número de compassos e na fórmula de compasso definidos pelo usuário.
|
||||
|
||||
# upload_server.py - O Servidor de Suporte
|
||||
|
||||
Este é um pequeno servidor web escrito em Python que roda nos bastidores. Sua principal tarefa é permitir o upload de novos samples de áudio. Quando um novo arquivo é enviado, ele o salva na pasta correta e, crucialmente, atualiza os arquivos de "manifesto" (.json). Esses manifestos são listas que a interface web consulta para saber quais samples e projetos estão disponíveis para serem carregados.
|
||||
|
||||
# Função Principal
|
||||
- Receber uploads de arquivos e manter os manifestos de samples e projetos atualizados.
|
||||
|
||||
Exemplo: Um usuário faz o upload do arquivo kick_drum.wav. O servidor salva este arquivo e automaticamente adiciona uma entrada para kick_drum.wav no arquivo samples-manifest.json. Da próxima vez que o usuário abrir o navegador de samples, o novo bumbo aparecerá na lista.
|
||||
|
||||
# style.css - A Aparência
|
||||
|
||||
Este é o arquivo de estilização. Ele define todas as cores, tamanhos, fontes e o layout da aplicação. É o que dá ao sequenciador sua aparência de "software de música", com temas escuros e elementos visuais que lembram equipamentos de estúdio.
|
||||
|
||||
# Função Principal
|
||||
- Definir o estilo visual de todos os componentes.
|
||||
|
||||
Exemplo: O estilo para um passo ativo no sequenciador é definido aqui, fazendo-o brilhar em verde.
|
||||
|
||||
```CSS
|
||||
|
||||
.step.active {
|
||||
background-color: var(--accent-green);
|
||||
border: 1px solid #fff;
|
||||
box-shadow: 0 0 8px var(--accent-green);
|
||||
}
|
||||
```
|
||||
Binary file not shown.
Loading…
Reference in New Issue