540 lines
25 KiB
HTML
540 lines
25 KiB
HTML
---
|
|
layout: default
|
|
title: "{{ page.file }}"
|
|
---
|
|
|
|
<div class="publication">
|
|
{% include sidebar.html %}
|
|
<main class="content">
|
|
<div class="container">
|
|
<br />
|
|
|
|
<h1 class="title is-3 mb-4"><code>{{ page.file }}</code></h1>
|
|
|
|
{% if page.file or page.bpm %}
|
|
<div class="mb-5">
|
|
<div class="columns is-mobile is-multiline is-vcentered">
|
|
{% if page.file %}
|
|
<div class="column is-narrow">
|
|
<span
|
|
><strong><code>📁 Arquivo:</code></strong> {{ page.file }}</span
|
|
>
|
|
</div>
|
|
{% endif %} {% if page.bpm %}
|
|
<div class="column is-narrow">
|
|
<span
|
|
><strong><code>🎵 BPM:</code></strong> {{ page.bpm }}</span
|
|
>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
{% endif %} {% assign audio_file_path = '/mmp/wav/' | append: page.file |
|
|
append: '.wav' %} {% if page.file %}
|
|
<section class="audio-player-section mb-6">
|
|
<audio controls>
|
|
<source src="{{ audio_file_path | relative_url }}" type="audio/wav" />
|
|
{% assign audio_ogg_path = '/mmp/ogg/' | append: page.file | append:
|
|
'.ogg' %}
|
|
<source src="{{ audio_ogg_path | relative_url }}" type="audio/ogg" />
|
|
Seu navegador não suporta o elemento <code>audio</code>.
|
|
</audio>
|
|
</section>
|
|
{% endif %}
|
|
|
|
<div class="columns">
|
|
<div class="column is-half">
|
|
{% if page.tags %} {% assign tags_vazias = true %} {% for categoria in
|
|
page.tags %} {% if categoria[1] and categoria[1].size > 0 %} {% assign
|
|
tags_vazias = false %} {% endif %} {% endfor %} {% unless tags_vazias
|
|
%}
|
|
<section class="tags-section mb-6">
|
|
<details>
|
|
<summary
|
|
class="title is-5"
|
|
style="cursor: pointer; padding-left: 0"
|
|
>
|
|
<code>🏷️ Tags</code>
|
|
</summary>
|
|
{% for categoria in page.tags %} {% if categoria[1] and
|
|
categoria[1].size > 0 %}
|
|
<div class="mb-4">
|
|
<strong><code>{{ categoria[0] }}:</code></strong>
|
|
<div class="tags mt-2">
|
|
{% for valor in categoria[1] %} {% if valor != "" %} {% assign
|
|
tag_slug = valor | replace: ' ', '+' %} {% if categoria[0] ==
|
|
'bassline' %}
|
|
<a
|
|
href="{{ '/bassline/?bassline=' | append: tag_slug | relative_url }}"
|
|
class="tag is-info is-light"
|
|
>{{ valor }}</a
|
|
>
|
|
{% elsif categoria[0] == 'sample' %}
|
|
<a
|
|
href="{{ '/sample/?sample=' | append: tag_slug | relative_url }}"
|
|
class="tag is-info is-light"
|
|
>{{ valor }}</a
|
|
>
|
|
{% elsif categoria[0] == 'plugin' %}
|
|
<a
|
|
href="{{ '/plugin/?plugin=' | append: tag_slug | relative_url }}"
|
|
class="tag is-info is-light"
|
|
>{{ valor }}</a
|
|
>
|
|
{% elsif categoria[0] == 'automation' %}
|
|
<a
|
|
href="{{ '/automation/?automation=' | append: tag_slug | relative_url }}"
|
|
class="tag is-info is-light"
|
|
>{{ valor }}</a
|
|
>
|
|
{% else %}
|
|
<a
|
|
href="{{ '/' | append: tag_slug | relative_url }}"
|
|
class="tag is-info is-light"
|
|
>{{ valor }}</a
|
|
>
|
|
{% endif %} {% endif %} {% endfor %}
|
|
</div>
|
|
</div>
|
|
{% endif %} {% endfor %}
|
|
</details>
|
|
</section>
|
|
{% endunless %} {% endif %} {% if page.tracks and page.tracks.size > 0
|
|
%}
|
|
<section class="instruments-section">
|
|
<details open>
|
|
<summary
|
|
class="title is-5"
|
|
style="cursor: pointer; padding-left: 0"
|
|
>
|
|
<code>🎚️ Instrumentos </code>
|
|
</summary>
|
|
|
|
<div class="content mt-3">
|
|
<ul style="list-style: none; padding-left: 0">
|
|
{% for track in page.tracks %} {% if track.instruments and
|
|
track.instruments.size > 0 %}
|
|
<li class="mb-5">
|
|
<div class="mb-2">
|
|
<span class="tag is-dark">{{ track.bassline_name }}</span>
|
|
</div>
|
|
<ul class="pl-4">
|
|
{% for instrument in track.instruments %} {% assign
|
|
plugin_name = instrument.instrument_name | downcase %} {%
|
|
assign is_sample = false %} {% assign sample_src = "" %}
|
|
{% if plugin_name == 'audiofileprocessor' or
|
|
instrument.audiofileprocessor %} {% assign is_sample =
|
|
true %} {% assign sample_src =
|
|
instrument.audiofileprocessor.src | default: "" | strip %}
|
|
{% endif %} {% assign should_open = false %} {% if
|
|
is_sample == false %} {% assign should_open = true %} {%
|
|
elsif is_sample == true and sample_src != "" %} {% assign
|
|
should_open = true %} {% endif %}
|
|
|
|
<div
|
|
class="instrument-wrapper mb-4"
|
|
data-plugin-name="{{ plugin_name }}"
|
|
data-params="{{ instrument | jsonify | escape }}"
|
|
>
|
|
<li style="list-style: none">
|
|
<details {% if should_open %}open{% endif %}>
|
|
<summary
|
|
style="
|
|
cursor: pointer;
|
|
outline: none;
|
|
margin-bottom: 0.5rem;
|
|
"
|
|
>
|
|
<div
|
|
style="
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
"
|
|
>
|
|
{% assign display_name =
|
|
instrument.instrument_name %} {% if is_sample %}
|
|
{% if display_name contains "audiofileprocessor"
|
|
and instrument.patterns %} {% assign
|
|
first_pattern_name = instrument.patterns | map:
|
|
'name' | first %} {% if first_pattern_name and
|
|
first_pattern_name != empty %} {% assign
|
|
display_name = first_pattern_name | remove:
|
|
".ogg" | remove: ".wav" | remove: ".flac" |
|
|
remove: ".mp3" %} {% elsif
|
|
instrument.audiofileprocessor.src %} {% assign
|
|
src_parts = instrument.audiofileprocessor.src |
|
|
split: '/' %} {% assign file_name = src_parts |
|
|
last %} {% assign display_name = file_name |
|
|
remove: ".ogg" | remove: ".wav" | remove:
|
|
".flac" | remove: ".mp3" %} {% endif %} {% endif
|
|
%} {% endif %} {% assign instrument_slug =
|
|
display_name | replace: ' ', '+' %}
|
|
<a
|
|
href="{{ '/instruments/?instrument=' | append: instrument_slug | relative_url }}"
|
|
class="tag is-info is-light"
|
|
>
|
|
<code>{{ display_name }}</code>
|
|
{% unless is_sample %}
|
|
<span class="ml-1" style="font-size: 0.7em"
|
|
>(Synth 🎹)</span
|
|
>{% endunless %}
|
|
</a>
|
|
</div>
|
|
</summary>
|
|
|
|
{% for pattern in instrument.patterns %} {% assign
|
|
pattern_steps = pattern.steps %} {% if pattern_steps
|
|
and pattern_steps.size > 0 %}
|
|
<div
|
|
class="mt-2 ml-4"
|
|
style="
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
"
|
|
>
|
|
{% assign bassline_index = forloop.index | minus:
|
|
1 %}
|
|
<span class="is-size-7 has-text-grey-light"
|
|
>{{ track.bassline_name }}{{ bassline_index
|
|
}}:</span
|
|
>
|
|
<div
|
|
class="patterns-container"
|
|
style="
|
|
display: flex;
|
|
flex-direction: row;
|
|
flex-wrap: wrap;
|
|
gap: 4px;
|
|
"
|
|
>
|
|
{% assign total_steps = pattern_steps.size %} {%
|
|
assign chunk_size = 4 %} {% assign num_chunks =
|
|
total_steps | divided_by: chunk_size %} {%
|
|
assign remainder = total_steps | modulo:
|
|
chunk_size %} {% if remainder > 0 %}{% assign
|
|
num_chunks = num_chunks | plus: 1 %}{% endif %}
|
|
{% for i in (0..num_chunks) %} {% assign
|
|
start_index = i | times: chunk_size %} {% assign
|
|
current_chunk_array = pattern_steps | slice:
|
|
start_index, chunk_size %} {% if
|
|
current_chunk_array.size > 0 %} {% assign
|
|
chunk_string = "" %} {% for step in
|
|
current_chunk_array %} {% if step == true or
|
|
step == 'true' or step == 1 %}{% assign
|
|
chunk_string = chunk_string | append: '1' %}{%
|
|
else %}{% assign chunk_string = chunk_string |
|
|
append: '0' %}{% endif %} {% endfor %} {% assign
|
|
search_url = '/pattern/?p=' | append:
|
|
chunk_string | relative_url %}
|
|
<a
|
|
href="{{ search_url }}"
|
|
title="Buscar padrão {{ chunk_string }}"
|
|
style="display: inline-block"
|
|
>
|
|
<div
|
|
style="
|
|
display: flex;
|
|
flex-direction: row;
|
|
border: 1px solid #999;
|
|
padding: 2px;
|
|
border-radius: 2px;
|
|
background-color: #f0f0f0;
|
|
"
|
|
>
|
|
{% for step_active in current_chunk_array %}
|
|
{% assign step_color = '#d9d9d9' %} {% if
|
|
step_active == true or step_active == 'true'
|
|
or step_active == 1 %} {% assign step_color
|
|
= '#4caf50' %} {% endif %}
|
|
<div
|
|
style="width: 5px; height: 10px; background-color: {{ step_color }}; border-radius: 1px; margin-right: 1px;"
|
|
></div>
|
|
{% endfor %}
|
|
</div>
|
|
</a>
|
|
{% endif %} {% endfor %}
|
|
</div>
|
|
</div>
|
|
{% endif %} {% endfor %}
|
|
</details>
|
|
|
|
<div class="playback-controls mt-2 pl-4">
|
|
{% if is_sample %} {% if sample_src != "" %} {%
|
|
assign audio_filename_with_path = 'src/samples/' |
|
|
append: sample_src %}
|
|
<audio controls class="js-sample-player">
|
|
<source
|
|
src="{{ audio_filename_with_path | relative_url }}"
|
|
type="audio/ogg"
|
|
/>
|
|
{% assign wav_path = audio_filename_with_path |
|
|
replace: '.ogg', '.wav' %}
|
|
<source
|
|
src="{{ wav_path | relative_url }}"
|
|
type="audio/wav"
|
|
/>
|
|
Seu navegador não suporta o elemento
|
|
<code>audio</code>.
|
|
</audio>
|
|
{% else %}
|
|
<p class="has-text-danger is-size-7">
|
|
O sample **não foi enviado** 😢
|
|
</p>
|
|
{% endif %} {% else %}
|
|
<button
|
|
class="button is-small is-primary is-outlined js-play-synth-btn"
|
|
>
|
|
<span class="icon is-small"
|
|
><i class="fa-solid fa-play"></i
|
|
></span>
|
|
<span>Testar Plugin</span>
|
|
</button>
|
|
<span class="is-size-7 has-text-grey ml-2"
|
|
>Via Web Audio API</span
|
|
>
|
|
{% endif %}
|
|
</div>
|
|
</li>
|
|
</div>
|
|
{% endfor %}
|
|
</ul>
|
|
</li>
|
|
|
|
{% elsif track.instrument_name %} {% assign instrument = track
|
|
%}
|
|
<ul class="pl-4">
|
|
{% assign plugin_name = instrument.instrument_name |
|
|
downcase %} {% assign is_sample = false %} {% assign
|
|
sample_src = "" %} {% if plugin_name == 'audiofileprocessor'
|
|
or instrument.audiofileprocessor %} {% assign is_sample =
|
|
true %} {% assign sample_src =
|
|
instrument.audiofileprocessor.src | default: "" | strip %}
|
|
{% endif %} {% assign should_open = false %} {% if is_sample
|
|
== false %} {% assign should_open = true %} {% elsif
|
|
is_sample == true and sample_src != "" %} {% assign
|
|
should_open = true %} {% endif %}
|
|
|
|
<div
|
|
class="instrument-wrapper mb-4"
|
|
data-plugin-name="{{ plugin_name }}"
|
|
data-params="{{ instrument | jsonify | escape }}"
|
|
>
|
|
<li style="list-style: none">
|
|
<details {% if should_open %}open{% endif %}>
|
|
<summary
|
|
style="
|
|
cursor: pointer;
|
|
outline: none;
|
|
margin-bottom: 0.5rem;
|
|
"
|
|
>
|
|
<div
|
|
style="
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
"
|
|
>
|
|
{% assign display_name =
|
|
instrument.instrument_name %} {% assign
|
|
instrument_slug = display_name | replace: ' ', '+'
|
|
%}
|
|
<a
|
|
href="{{ '/instruments/?instrument=' | append: instrument_slug | relative_url }}"
|
|
class="tag is-info is-light"
|
|
>
|
|
<code>{{ display_name }}</code>
|
|
{% unless is_sample %}
|
|
<span class="ml-1" style="font-size: 0.7em"
|
|
>(Synth 🎹)</span
|
|
>{% endunless %}
|
|
</a>
|
|
</div>
|
|
</summary>
|
|
|
|
{% if instrument.patterns %} {% for pattern in
|
|
instrument.patterns %} {% assign pattern_steps =
|
|
pattern.steps %} {% if pattern_steps and
|
|
pattern_steps.size > 0 %}
|
|
<div
|
|
class="mt-2 ml-4"
|
|
style="display: flex; align-items: center; gap: 4px"
|
|
>
|
|
<div
|
|
class="patterns-container"
|
|
style="
|
|
display: flex;
|
|
flex-direction: row;
|
|
flex-wrap: wrap;
|
|
gap: 4px;
|
|
"
|
|
>
|
|
{% assign total_steps = pattern_steps.size %} {%
|
|
assign chunk_size = 4 %} {% assign num_chunks =
|
|
total_steps | divided_by: chunk_size %} {% assign
|
|
remainder = total_steps | modulo: chunk_size %} {%
|
|
if remainder > 0 %}{% assign num_chunks =
|
|
num_chunks | plus: 1 %}{% endif %} {% for i in
|
|
(0..num_chunks) %} {% assign start_index = i |
|
|
times: chunk_size %} {% assign current_chunk_array
|
|
= pattern_steps | slice: start_index, chunk_size
|
|
%} {% if current_chunk_array.size > 0 %} {% assign
|
|
chunk_string = "" %} {% for step in
|
|
current_chunk_array %} {% if step == true or step
|
|
== 'true' or step == 1 %}{% assign chunk_string =
|
|
chunk_string | append: '1' %}{% else %}{% assign
|
|
chunk_string = chunk_string | append: '0' %}{%
|
|
endif %} {% endfor %} {% assign search_url =
|
|
'/pattern/?p=' | append: chunk_string |
|
|
relative_url %}
|
|
<a
|
|
href="{{ search_url }}"
|
|
title="Buscar padrão {{ chunk_string }}"
|
|
style="display: inline-block"
|
|
>
|
|
<div
|
|
style="
|
|
display: flex;
|
|
flex-direction: row;
|
|
border: 1px solid #999;
|
|
padding: 2px;
|
|
border-radius: 2px;
|
|
background-color: #f0f0f0;
|
|
"
|
|
>
|
|
{% for step_active in current_chunk_array %}
|
|
{% assign step_color = '#d9d9d9' %} {% if
|
|
step_active == true or step_active == 'true'
|
|
or step_active == 1 %} {% assign step_color =
|
|
'#4caf50' %} {% endif %}
|
|
<div
|
|
style="width: 5px; height: 10px; background-color: {{ step_color }}; border-radius: 1px; margin-right: 1px;"
|
|
></div>
|
|
{% endfor %}
|
|
</div>
|
|
</a>
|
|
{% endif %} {% endfor %}
|
|
</div>
|
|
</div>
|
|
{% endif %} {% endfor %} {% endif %}
|
|
</details>
|
|
|
|
<div class="playback-controls mt-2 pl-4">
|
|
{% if is_sample %} {% if sample_src != "" %} {% assign
|
|
audio_filename_with_path = 'src/samples/' | append:
|
|
sample_src %}
|
|
<audio controls class="js-sample-player">
|
|
<source
|
|
src="{{ audio_filename_with_path | relative_url }}"
|
|
type="audio/ogg"
|
|
/>
|
|
{% assign wav_path = audio_filename_with_path |
|
|
replace: '.ogg', '.wav' %}
|
|
<source
|
|
src="{{ wav_path | relative_url }}"
|
|
type="audio/wav"
|
|
/>
|
|
</audio>
|
|
{% else %}
|
|
<p class="has-text-danger is-size-7">
|
|
O sample **não foi enviado** 😢
|
|
</p>
|
|
{% endif %} {% else %}
|
|
<button
|
|
class="button is-small is-primary is-outlined js-play-synth-btn"
|
|
>
|
|
<span class="icon is-small"
|
|
><i class="fa-solid fa-play"></i
|
|
></span>
|
|
<span>Testar Plugin</span>
|
|
</button>
|
|
<span class="is-size-7 has-text-grey ml-2"
|
|
>Via Web Audio API</span
|
|
>
|
|
{% endif %}
|
|
</div>
|
|
</li>
|
|
</div>
|
|
</ul>
|
|
{% endif %} {% endfor %}
|
|
</ul>
|
|
</div>
|
|
</details>
|
|
</section>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<div class="column is-half">
|
|
<div class="box p-4 has-background-info-light">
|
|
<h3 class="title is-6 has-text-info mb-3">
|
|
🛠️ Abra na Criação Colaborativa
|
|
</h3>
|
|
|
|
{% assign creation_url =
|
|
'/~jotachina/mmpSearch/creation.html?project=' | append: page.file
|
|
%}
|
|
<span class="icon"
|
|
><i class="fa-solid fa-up-right-from-square"></i
|
|
></span>
|
|
<a
|
|
href="{{ creation_url }}"
|
|
target="_blank"
|
|
class="button is-info is-fullwidth is-medium mb-4"
|
|
>Abrir no MMPCreator</a
|
|
>
|
|
|
|
<p class="is-size-7 has-text-grey-dark">
|
|
O link abrirá o projeto em uma nova aba para edição.
|
|
<br />
|
|
Arquivo: <code>{{ page.file }}</code>
|
|
</p>
|
|
|
|
<div class="mt-4 is-hidden-mobile">
|
|
{% assign embed_url = creation_url | append: '&embed=true' %}
|
|
|
|
<iframe
|
|
src="{{ embed_url }}"
|
|
title="Prévia do Projeto"
|
|
style="
|
|
width: 100%;
|
|
height: 800px;
|
|
border: 1px solid #ccc;
|
|
border-radius: 4px;
|
|
"
|
|
>
|
|
</iframe>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
|
|
<script type="module">
|
|
import { InstrumentFactory } from '{{ "/assets/js/audio/InstrumentFactory.js" | relative_url }}';
|
|
|
|
document.addEventListener("DOMContentLoaded", () => {
|
|
const factory = new InstrumentFactory();
|
|
|
|
const synthButtons = document.querySelectorAll(".js-play-synth-btn");
|
|
|
|
synthButtons.forEach((btn) => {
|
|
btn.addEventListener("click", (e) => {
|
|
const wrapper = e.target.closest(".instrument-wrapper");
|
|
if (wrapper && wrapper.dataset.params) {
|
|
const rawData = wrapper.dataset.params;
|
|
try {
|
|
const instrumentData = JSON.parse(rawData);
|
|
factory.play(instrumentData);
|
|
} catch (error) {
|
|
console.error("Erro ao ler dados do instrumento:", error);
|
|
}
|
|
}
|
|
});
|
|
});
|
|
});
|
|
</script>
|