Skip to content

Commit

Permalink
Styling (chrome)
Browse files Browse the repository at this point in the history
  • Loading branch information
Selim Sheta committed Apr 16, 2024
1 parent 60ed58a commit a12b024
Show file tree
Hide file tree
Showing 4 changed files with 144 additions and 30 deletions.
1 change: 1 addition & 0 deletions .gitignore
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
.vs
5 changes: 3 additions & 2 deletions README.md
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
# PolyrhythmMaker
Create and download long and or complex polyrhythms as midi files.
Create and download long and/or complex polyrhythms as midi files. Try the [live website app](https://selim-sheta.github.io/PolyrhythmMaker) to generate, vizualize, preview and download your own polyrhythms.

https://selim-sheta.github.io/PolyrhythmMaker

Project inspired by: https://youtu.be/SthcxWPXG_E?si=hkXKBKlslRpAWaXP
51 changes: 23 additions & 28 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,28 +2,31 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Polyrhythm Generator</title>
<title>Polyrhythm Maker</title>
<script src="midiwriter.js"></script>
<script src="https://cdn.jsdelivr.net/combine/npm/tone@14.7.58,npm/@magenta/music@1.23.1/es6/core.js,npm/focus-visible@5,npm/html-midi-player@1.5.0"></script>
<link href="style.css" rel="stylesheet">
</head>
<body>
<h1>Polyrhythm Generator</h1>

<form id="polyrhythmForm">
<h3>Global Settings</h3>
<label for="tempo">Tempo (BPM):</label>
<input type="number" onchange="generateMidi()" id="tempo" name="tempo" value="120" min="1" max="300" required>
<label for="duration">Duration (seconds):</label>
<input type="number" onchange="generateMidi()" id="duration" name="duration" value="30" min="1" max="600" required>
<button type="button" onclick="addNote()">Add Note</button>
<button type="button" onclick="downloadMidi()">Download</button>
<div id="noteInputs"></div> <!-- Container for dynamic note inputs -->
</form>

<midi-player id="player" src="" sound-font></midi-player>

<midi-visualizer type="piano-roll" id="v_roll" src=""></midi-visualizer>

<div class="mainContainer">
<h1>Polyrhythm Maker</h1>

<form id="polyrhythmForm">
<div class="globalParameters">
<label for="tempo">Tempo (BPM):</label>
<input type="number" onchange="generateMidi()" id="tempo" name="tempo" value="120" min="1" max="300" required>
<label for="duration">Duration (seconds):</label>
<input type="number" onchange="generateMidi()" id="duration" name="duration" value="30" min="1" max="600" required>
<button type="button" onclick="addNote()">Add Note</button>
<button type="button" onclick="downloadMidi()">Download</button>
</div>
<div id="noteInputs"></div> <!-- Container for dynamic note inputs -->
</form>

<midi-player id="player" src="" sound-font></midi-player>

<midi-visualizer type="piano-roll" id="v_roll" src=""></midi-visualizer>
</div>
<script>

let globalDataUri = "";
Expand Down Expand Up @@ -67,6 +70,7 @@ <h3>Global Settings</h3>
const noteIndex = container.children.length + 1;
const noteDiv = document.createElement('div');
noteDiv.id = 'noteContainer' + noteIndex;
noteDiv.className = 'noteContainer'
noteDiv.innerHTML = `
<label for="note${noteIndex}">Pitch</label>
<select id="note${noteIndex}" onchange="generateMidi()" name="note${noteIndex}">
Expand All @@ -91,18 +95,9 @@ <h3>Global Settings</h3>
<select id="duration${noteIndex}" onchange="generateMidi()" name="duration${noteIndex}" required>
<option value="1">whole</option>
<option value="2">half</option>
<option value="d2">dotted half</option>
<option value="dd2">double dotted half</option>
<option value="4" selected="selected">quarter</option>
<option value="4t">quarter triplet</option>
<option value="d4">dotted quarter</option>
<option value="dd4">double dotted quarter</option>
<option value="8">eighth</option>
<option value="8t">eighth triplet</option>
<option value="d8">dotted eighth</option>
<option value="dd8">double dotted eighth</option>
<option value="16">sixteenth</option>
<option value="16t">sixteenth triplet</option>
<option value="32">thirty-second</option>
<option value="64">sixty-fourth</option>
</select>
Expand All @@ -116,7 +111,7 @@ <h3>Global Settings</h3>
<label for="beats${noteIndex}">times every</label>
<input type="number" onchange="generateMidi()" id="beats${noteIndex}" name="beats${noteIndex}" min="1" max="100" value="${defaultBeats}" required>
<label for="xbut${noteIndex}">beats</label>
<label for="xbut${noteIndex}">beats.</label>
<button type="button" onchange="generateMidi()" id="xbut${noteIndex}" onclick="removeNote(${noteIndex})">X</button>
`;
container.appendChild(noteDiv);
Expand Down
117 changes: 117 additions & 0 deletions style.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,117 @@
:root {
--text: #032319;
--background: #fafffd;
--primary: #2d5c4e;
--secondary: #af9ad6;
--accent: #f2b44e;
}

body {
font-family: 'Arial', sans-serif;
background-color: var(--background);
color: var(--text);
padding: 20px;
margin: 0;

}

.mainContainer {
display: flex;
flex-direction: column;
justify-content: center; /* Centers content horizontally */
align-items: center; /* Optional: if you also want vertical centering */
}

h1, h3 {
color: var(--primary);
}

form {
background-color: #ffffff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
margin-top: 20px;
overflow-x: hidden;
max-height: 600px;
display: flex;
flex-direction: column;
justify-content: center; /* Centers content horizontally */
align-items: center; /* Optional: if you also want vertical centering */
}

label {
margin: 5px 0 5px;
}

input[type="number"],
select {
padding: 8px;
margin: 5px 0 5px;
border: 1px solid var(--secondary);
border-radius: 4px;
box-sizing: border-box; /* Makes padding not affect width */
}

button {
background-color: var(--primary);
color: white;
border: none;
padding: 10px 10px;
text-transform: uppercase;
letter-spacing: 1px;
border-radius: 4px;
cursor: pointer;
margin-right: 5px;
}

button:hover {
background-color: var(--accent);
}

#noteInputs {
width: 100%; /* Ensures the container spans the full width of its parent */
overflow-x: auto; /* Enables horizontal scrolling when content overflows */
margin-top: 10px;
padding-bottom: 10px;
display: flex;
flex-direction: column;
justify-content: center; /* Centers content horizontally */
align-items: center; /* Optional: if you also want vertical centering */
}

#noteInputs label,
#noteInputs input,
#noteInputs select {
display: inline-block;
width: auto;
margin-right: 10px;
}

#noteInputs button {
background-color: var(--secondary);
}

#noteInputs button:hover {
background-color: var(--accent);
}

.noteContainer {
display: inline-block;
font-size: 14px;
border-top: 1px solid var(--secondary);
white-space: nowrap; /* Prevents items from wrapping to the next line */
}

midi-player {
display: block;
margin-top: 20px;
width: 100%;
max-width: 600px;
}

midi-visualizer {
display: block;
margin-top: 20px;
max-width: 100%;
}

0 comments on commit a12b024

Please sign in to comment.