JotaChina/mmpSearch
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

versão 2.0.2 - É possível gravar áudio do dispositivo

Browse Source
This commit is contained in:
JotaChina committed 2025-10-23 21:04:53 -03:00
1 parent b3f0d13b90
commit 1818932244
6 files changed
+632 -104
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

creation.html
+334 -102
View File
@@ -10,7 +10,65 @@
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css"
/>
<link rel="stylesheet" href="assets/css/style.css" />
</head>
<style>
/* Estilo para clipes de pattern */
.timeline-clip.pattern-clip {
background: linear-gradient(to bottom, #4a4f57, #3b3f45);
height: 70px; /* Mais alto para ver as notas */
overflow: hidden;
}
/* Container para as notas do pattern */
.pattern-clip-view {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
padding: 2px 0;
box-sizing: border-box;
display: flex;
flex-direction: column;
justify-content: space-around;
gap: 1px;
}
/* Linha de trilha dentro do clipe */
.pattern-clip-track-row {
position: relative;
width: 100%;
height: 100%;
}
/* Cada "nota" (bloco branco) */
.pattern-step-note {
position: absolute;
background-color: rgba(255, 255, 255, 0.9);
border-left: 1px solid #333;
border-bottom: 1px solid #333;
border-radius: 1px;
box-sizing: border-box;
}
/* Menu de contexto */
#timeline-context-menu .menu-divider {
height: 1px;
background-color: var(--border-color);
margin: 4px 0;
padding: 0;
}
#timeline-context-menu div#delete-clip:hover {
background-color: var(--accent-red);
color: white;
}
#timeline-context-menu div#paste-clip.disabled {
color: var(--text-dark);
cursor: default;
background-color: transparent;
}
#timeline-context-menu div#paste-clip.disabled:hover {
color: var(--text-dark);
background-color: transparent;
}
</style>
</head>
<body>
<aside class="sample-browser">
<div class="browser-header">Navegador de Samples</div>
@@ -21,54 +79,142 @@
<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>
<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-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>
<button id="record-btn" class="transport-btn" title="Gravar">
<i class="fa-solid fa-circle-dot"></i>
</button>
</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>
<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>
<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>
<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>
<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>
<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
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>
@@ -78,42 +224,69 @@
<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 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 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>
<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="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>
<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
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>
<button
id="send-pattern-to-playlist-btn"
class="pattern-btn"
title="Enviar Pattern para a Playlist"
style="width: auto; padding: 0 8px; font-size: 0.9rem"
>
<i class="fa-solid fa-arrow-right-to-bracket"></i> Enviar
</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>
<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>
<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>
@@ -121,81 +294,137 @@
<div class="audio-editor">
<div class="editor-header">
<span>Editor de Amostras de Áudio</span>
<div class="playback-controls">
<i class="fa-solid fa-search-minus" id="zoom-out-btn" title="Zoom Out"></i>
<i class="fa-solid fa-search-plus" id="zoom-in-btn" title="Zoom In"></i>
<i class="fa-solid fa-scissors" id="slice-tool-btn" title="Ferramenta de Corte"></i>
<i class="fa-solid fa-arrows-left-right-to-line" id="resize-tool-trim" title="Modo de Redimensionamento (Aparar/Trimming)"></i>
<i class="fa-solid fa-arrows-left-right" id="resize-tool-stretch" title="Modo de Redimensionamento (Esticar/Time Stretch)"></i>
<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>
<i class="fa-solid fa-repeat" id="audio-editor-loop-btn" title="Ativar/Desativar Loop"></i>
<i class="fa-solid fa-plus" id="add-audio-track-btn" title="Adicionar Pista de Áudio"></i>
</div>
</div>
<div id="audio-track-container">
<div class="audio-track-lane">
<div class="track-info">
<div class="track-info-header">
<i class="fa-solid fa-gear"></i>
<span class="track-name">Pista de Áudio 1</span>
<div class="track-mute"></div>
</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>
</div>
<div class="timeline-container">
<div class="spectrogram-view-grid" style="width: 4000px;"> <div class="timeline-clip" style="left: 100px; width: 400px;"></div>
<div class="playhead"></div>
</div>
</div>
<div class="audio-track-lane">
<div class="track-info">
<div class="track-info-header">
<i class="fa-solid fa-gear"></i>
<span class="track-name">Pista de Áudio 2</span>
<div class="track-mute"></div>
<div class="playback-controls">
<i
class="fa-solid fa-search-minus"
id="zoom-out-btn"
title="Zoom Out"
></i>
<i
class="fa-solid fa-search-plus"
id="zoom-in-btn"
title="Zoom In"
></i>
<i
class="fa-solid fa-scissors"
id="slice-tool-btn"
title="Ferramenta de Corte"
></i>
<i
class="fa-solid fa-arrows-left-right-to-line"
id="resize-tool-trim"
title="Modo de Redimensionamento (Aparar/Trimming)"
></i>
<i
class="fa-solid fa-arrows-left-right"
id="resize-tool-stretch"
title="Modo de Redimensionamento (Esticar/Time Stretch)"
></i>
<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>
<i
class="fa-solid fa-repeat"
id="audio-editor-loop-btn"
title="Ativar/Desativar Loop"
></i>
<i
class="fa-solid fa-plus"
id="add-audio-track-btn"
title="Adicionar Pista de Áudio"
></i>
</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 id="audio-track-container">
<div class="audio-track-lane">
<div class="track-info">
<div class="track-info-header">
<i class="fa-solid fa-gear"></i>
<span class="track-name">Pista de Áudio 1</span>
<div class="track-mute"></div>
</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>
</div>
<div class="knob-container">
<div class="knob" data-control="pan"><div class="knob-indicator"></div></div>
<span>PAN</span>
<div class="timeline-container">
<div class="spectrogram-view-grid" style="width: 4000px">
<div class="timeline-clip" style="left: 100px; width: 400px"></div>
<div class="playhead"></div>
</div>
</div>
</div>
</div>
<div class="timeline-container">
<div id="loop-region" class="loop-region">
<div class="spectrogram-view-grid" style="width: 4000px;">
<div class="timeline-clip" style="left: 50px; width: 600px;">
<div class="clip-name">jungle01.ogg</div>
<div class="audio-track-lane">
<div class="track-info">
<div class="track-info-header">
<i class="fa-solid fa-gear"></i>
<span class="track-name">Pista de Áudio 2</span>
<div class="track-mute"></div>
</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>
</div>
<div class="timeline-container">
<div id="loop-region" class="loop-region">
<div class="spectrogram-view-grid" style="width: 4000px">
<div class="timeline-clip" style="left: 50px; width: 600px">
<div class="clip-name">jungle01.ogg</div>
</div>
</div>
</div>
<div class="playhead"></div>
</div>
</div>
<div class="playhead"></div>
</div>
</div>
</div>
</div>
</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"/>
<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"
/>
<div class="modal-overlay" id="open-project-modal">
<div class="modal-content">
@@ -214,14 +443,17 @@
</div>
</div>
<div id="timeline-context-menu">
<div id="set-loop-start">Definir Início do Loop</div>
<div id="set-loop-end">Definir Fim do Loop</div>
<div class="menu-divider"></div>
<div id="delete-clip" style="color: var(--accent-red);">Excluir Clipe</div>
<div id="set-loop-start">Definir Início do Loop</div>
<div id="set-loop-end">Definir Fim do Loop</div>
<div class="menu-divider"></div>
<div id="copy-clip">Copiar</div>
<div id="cut-clip">Recortar</div>
<div id="paste-clip">Colar</div>
<div class="menu-divider"></div>
<div id="delete-clip" style="color: var(--accent-red)">Excluir Clipe</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tone/14.7.77/Tone.js"></script>