Impaczus/motif
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Remove volume controls and play at 100%.

Browse Source 
Eliminates volume sliders on main and share pages and hard-sets preview + Motif playback volume to 1.0 across the app.
This commit is contained in:
b1rdmania
2025-12-26 20:25:38 +00:00
parent d5434025c8
commit b0c1b49d2a
4 changed files with 9 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
-8
View File
@@ -952,10 +952,6 @@
<div id="resultsSection" class="results-section"> <div id="resultsSection" class="results-section">
<div class="results-header"> <div class="results-header">
<h3>Search Results</h3> <h3>Search Results</h3>
<div class="volume-control" style="margin-top:0; min-width: 260px; flex: 0 1 360px; opacity: 0.85;">
<label for="soundfontVolume" style="font-size: 12px;">Preview volume</label>
<input type="range" id="soundfontVolume" min="0" max="1" step="0.01" value="0.7" />
</div>
</div> </div>
<table id="resultsTable" class="results-table"> <table id="resultsTable" class="results-table">
<thead> <thead>
@@ -983,10 +979,6 @@
<div class="selected-support"> <div class="selected-support">
<button id="motifStopBtn" type="button" disabled>Stop</button> <button id="motifStopBtn" type="button" disabled>Stop</button>
<button id="copyLinkBtn" type="button" disabled>Copy link</button> <button id="copyLinkBtn" type="button" disabled>Copy link</button>
<div class="volume-control">
<label for="motifVolume">Output</label>
<input type="range" id="motifVolume" min="0" max="1" step="0.01" value="0.7" />
</div>
</div> </div>
<div class="engine-line">Reimagined as classic game-console music using Motif’s Wario engine.</div> <div class="engine-line">Reimagined as classic game-console music using Motif’s Wario engine.</div>
play.html
+1 -14
View File
@@ -320,14 +320,7 @@
max-width: 72ch; max-width: 72ch;
} }
.volume-row { /* No volume control on share page */
margin-top: 14px;
opacity: 0.6;
}
.volume-row label {
font-size: 12px;
color: rgba(255,255,255,0.5);
}
</style> </style>
</head> </head>
<body> <body>
@@ -370,12 +363,6 @@
Rendered using Motif’s Wario game-console engine. Rendered using Motif’s Wario game-console engine.
</div> </div>
<!-- Optional volume (acceptable) -->
<div class="volume-control volume-row" style="min-width: 0;">
<label for="volume" style="min-width: auto;">Volume</label>
<input id="volume" type="range" min="0" max="1" step="0.01" value="0.7" />
</div>
<!-- 7. Primary CTA (single) --> <!-- 7. Primary CTA (single) -->
<div style="margin-top: 18px;"> <div style="margin-top: 18px;">
<a id="generateOwn" href="/" style="display:inline-block; color: rgba(0,255,136,0.92); text-decoration:none; font-weight: 650;"> <a id="generateOwn" href="/" style="display:inline-block; color: rgba(0,255,136,0.92); text-decoration:none; font-weight: 650;">
src/main.ts
+6 -19
View File
@@ -27,13 +27,11 @@ class MotifApp {
private selectedMeta!: HTMLElement; private selectedMeta!: HTMLElement;
private selectedDetails!: HTMLElement; private selectedDetails!: HTMLElement;
// Preview player controls // Preview player (no UI volume)
private soundfontVolumeSlider!: HTMLInputElement;
// Motif controls // Motif controls
private motifBtn!: HTMLButtonElement; private motifBtn!: HTMLButtonElement;
private motifStopBtn!: HTMLButtonElement; private motifStopBtn!: HTMLButtonElement;
private motifVolumeSlider!: HTMLInputElement;
private motifProgressContainer!: HTMLElement; private motifProgressContainer!: HTMLElement;
private motifProgressBar!: HTMLInputElement; private motifProgressBar!: HTMLInputElement;
private motifProgressFill!: HTMLElement; private motifProgressFill!: HTMLElement;
@@ -71,8 +69,8 @@ class MotifApp {
this.initializeUI(); this.initializeUI();
this.setupEventListeners(); this.setupEventListeners();
// Apply initial volume immediately (slider default set in HTML) // Always play at 100%
this.motifEngine.setVolume(parseFloat(this.motifVolumeSlider.value)); this.motifEngine.setVolume(1);
} }
/** /**
@@ -83,7 +81,7 @@ class MotifApp {
const audioContext = await unlockAudio(); const audioContext = await unlockAudio();
if (!this.soundfontPlayer) { if (!this.soundfontPlayer) {
this.soundfontPlayer = new SoundfontMIDIPlayer(audioContext); this.soundfontPlayer = new SoundfontMIDIPlayer(audioContext);
this.soundfontPlayer.setVolume(parseFloat(this.soundfontVolumeSlider.value)); this.soundfontPlayer.setVolume(1);
} }
return this.soundfontPlayer; return this.soundfontPlayer;
} }
@@ -101,13 +99,9 @@ class MotifApp {
this.selectedMeta = document.getElementById('selectedMeta')!; this.selectedMeta = document.getElementById('selectedMeta')!;
this.selectedDetails = document.getElementById('selectedDetails')!; this.selectedDetails = document.getElementById('selectedDetails')!;
// Preview player controls
this.soundfontVolumeSlider = document.getElementById('soundfontVolume') as HTMLInputElement;
// Motif controls // Motif controls
this.motifBtn = document.getElementById('motifBtn') as HTMLButtonElement; this.motifBtn = document.getElementById('motifBtn') as HTMLButtonElement;
this.motifStopBtn = document.getElementById('motifStopBtn') as HTMLButtonElement; this.motifStopBtn = document.getElementById('motifStopBtn') as HTMLButtonElement;
this.motifVolumeSlider = document.getElementById('motifVolume') as HTMLInputElement;
this.motifProgressContainer = document.getElementById('motifProgressContainer')!; this.motifProgressContainer = document.getElementById('motifProgressContainer')!;
this.motifProgressBar = document.getElementById('motifProgressBar') as HTMLInputElement; this.motifProgressBar = document.getElementById('motifProgressBar') as HTMLInputElement;
this.motifProgressFill = document.getElementById('motifProgressFill')!; this.motifProgressFill = document.getElementById('motifProgressFill')!;
@@ -143,18 +137,10 @@ class MotifApp {
}); });
// Preview MIDI (verification only) — controlled from results table rows // Preview MIDI (verification only) — controlled from results table rows
this.soundfontVolumeSlider.addEventListener('input', (e) => {
const volume = parseFloat((e.target as HTMLInputElement).value);
this.soundfontPlayer?.setVolume(volume);
});
// Motif // Motif
this.motifBtn.addEventListener('click', () => this.handleMotif()); this.motifBtn.addEventListener('click', () => this.handleMotif());
this.motifStopBtn.addEventListener('click', () => this.handleMotifStop()); this.motifStopBtn.addEventListener('click', () => this.handleMotifStop());
this.motifVolumeSlider.addEventListener('input', (e) => {
const volume = parseFloat((e.target as HTMLInputElement).value);
this.motifEngine.setVolume(volume);
});
// Use both input and change for iOS compatibility // Use both input and change for iOS compatibility
const seekHandler = (e: Event) => { const seekHandler = (e: Event) => {
const progress = parseFloat((e.target as HTMLInputElement).value) / 100; const progress = parseFloat((e.target as HTMLInputElement).value) / 100;
@@ -369,7 +355,7 @@ class MotifApp {
} }
await player.load(events); await player.load(events);
player.setVolume(parseFloat(this.soundfontVolumeSlider.value)); player.setVolume(1);
await player.play(); await player.play();
this.playingPreviewIndex = index; this.playingPreviewIndex = index;
@@ -493,6 +479,7 @@ class MotifApp {
// Generate a variation using the procedural role-mapping mode // Generate a variation using the procedural role-mapping mode
await this.motifEngine.generateFromMIDI(this.currentMIDI.events, 'procedural'); await this.motifEngine.generateFromMIDI(this.currentMIDI.events, 'procedural');
this.motifEngine.setVolume(1);
await this.motifEngine.play(); await this.motifEngine.play();
src/play.ts
+2 -7
View File
@@ -128,7 +128,6 @@ async function main(): Promise<void> {
const titleEl = qs('songTitle'); const titleEl = qs('songTitle');
const artistEl = qs('songArtist'); const artistEl = qs('songArtist');
const playBtn = qs('playToggleBtn') as HTMLButtonElement; const playBtn = qs('playToggleBtn') as HTMLButtonElement;
const volumeEl = qs('volume') as HTMLInputElement;
const generateOwn = qs('generateOwn') as HTMLAnchorElement; const generateOwn = qs('generateOwn') as HTMLAnchorElement;
const progressContainer = qs('playProgressContainer') as HTMLElement; const progressContainer = qs('playProgressContainer') as HTMLElement;
const progressBar = qs('playProgressBar') as HTMLInputElement; const progressBar = qs('playProgressBar') as HTMLInputElement;
@@ -235,11 +234,6 @@ async function main(): Promise<void> {
} }
} }
volumeEl.addEventListener('input', () => {
const vol = Number.parseFloat(volumeEl.value);
motifEngine.setVolume(vol);
});
const seekHandler = (e: Event) => { const seekHandler = (e: Event) => {
showTimeRow(); showTimeRow();
const p = Number.parseFloat((e.target as HTMLInputElement).value) / 100; const p = Number.parseFloat((e.target as HTMLInputElement).value) / 100;
@@ -289,7 +283,7 @@ async function main(): Promise<void> {
if (!isGenerated) { if (!isGenerated) {
// Match main page "Generate & Play": procedural role-mapping → existing SynthesisEngine. // Match main page "Generate & Play": procedural role-mapping → existing SynthesisEngine.
await motifEngine.generateFromMIDI(events, 'procedural'); await motifEngine.generateFromMIDI(events, 'procedural');
motifEngine.setVolume(Number.parseFloat(volumeEl.value)); motifEngine.setVolume(1);
durationSec = motifEngine.getDuration(); durationSec = motifEngine.getDuration();
durationEl.textContent = formatTime(durationSec); durationEl.textContent = formatTime(durationSec);
progressContainer.style.display = 'block'; progressContainer.style.display = 'block';
@@ -300,6 +294,7 @@ async function main(): Promise<void> {
} }
setUiPlaying(true); setUiPlaying(true);
motifEngine.setVolume(1);
await motifEngine.play(); await motifEngine.play();
// Seek to remembered position (for pause/resume and scrub-before-play) // Seek to remembered position (for pause/resume and scrub-before-play)
if (durationSec > 0 && playOffsetSec > 0) { if (durationSec > 0 && playOffsetSec > 0) {