Merge pull request #31 from carlosedp/release/v5.4.0-20250630-183018

🚀 Release v5.4.0 to Production

Author: carlosedp

docs/FeatureList.md

@@ -22,9 +22,9 @@
 - [x] Have different fade curves for fade in and fade out (linear, exponential, etc.)
 - [ ] Settings menu for:
   - [ ]  Fade in/out curve type (linear, exponential, etc.)
+  - [ ]  Crossfade lengh and curve type
   - [ ]  Truncate lenght (174 seconds by default)
   - [ ]  Default export format
-- [ ] Improve splice detection with maybe a different algorithm or more advanced settings
 - [ ] Add detection preset slots to save sensitivity, frame size, and overlap settings
 - [x] Use mouse scroll to zoom in/out on the waveform
 - [x] Add tooltip to append audio button
@@ -33,7 +33,7 @@
 - [ ] Multi-level undo/redo functionality
 - [x] Time stretching and pitch shifting
 - [x] Audio effects (normalization, add/remove gain)
-- [ ] Crossfade between splice points with defined length and curve type
+- [x] Crossfade between splice points with defined length and curve type
 - [x] Record audio directly into the app via Wavesurfer record plugin
 
 ## Bugs

package-lock.json

@@ -19,7 +19,7 @@
     "url": "https://github.com/carlosedp/morphedit/issues"
   },
   "private": true,
-  "version": "5.3.0",
+  "version": "5.4.0",
   "type": "module",
   "scripts": {
     "start": "vite",

package.json

@@ -34,7 +34,8 @@ Although primarily focused on Morphagene users, MorphEdit can also be used for g
 
 - **Splice Marker Management**: Add, remove, lock, and automatically detect splice points
 - **Direct Splice Playback**: Play individual splice markers with keyboard shortcuts (1-0, Q-P)
-- **Audio Processing**: Crop, fade in/out, and concatenate multiple files
+- **Audio Processing**: Crop, fade in/out, crossfade, and concatenate multiple files
+- **Crossfade Processing**: Create smooth transitions between audio sections at splice markers
 - **Tempo and Pitch Processing**: Professional-grade tempo and pitch shifting with RubberBand
 - **Audio Normalization**: Professional-grade normalization to -1dB peak for optimal levels
 - **BPM Detection**: Automatic tempo detection and display for musical content
@@ -93,14 +94,15 @@ The MorphEdit interface consists of several main sections:
 - **BPM Display**: Shows detected BPM (tempo) of the loaded audio file
 - **Region Information**: Displays active crop and fade region details
 
-![alt text](img/playback.png)
+![info bar](img/infobar.png)
 
 ### 3. Export and Region Controls (Middle Section)
 
 - **Export Button**: Quick export in default Morphagene format
 - **Export Menu**: Access to multiple export formats
 - **Crop Region**: Create and apply crop regions
 - **Fade Regions**: Create fade-in and fade-out regions
+- **Crossfade Regions**: Create smooth transitions at splice markers
 - **Apply/Undo Buttons**: Process audio and revert changes
 
 ![alt text](img/region.png)
@@ -347,6 +349,50 @@ With fades applied:
 
 ![alt text](img/fades-applied.png)
 
+### Crossfade Regions
+
+Crossfade regions create smooth transitions between audio sections at splice markers, allowing you to blend two audio segments together seamlessly. This is especially useful for creating natural-sounding loops or transitions in Morphagene compositions.
+
+![crossfade](img/crossfade.png)
+
+#### Creating Crossfade Regions
+
+1. **Select Splice Marker**: First, click on a splice marker to select it
+2. **Create Region**: Press '\' (backslash) or click the "Crossfade" button
+3. **Default Size**: Creates a 1-second crossfade region centered on the selected marker which can be resized
+4. **Visual Feedback**: Blue highlighted area shows the crossfade region
+5. **Curve Selection**: Choose from linear, exponential, or logarithmic curves
+
+#### Crossfade Requirements
+
+- **Splice Marker**: A splice marker must be selected to enable crossfade creation
+- **Audio Context**: Works best with audio that has content both before and after the marker
+- **Region Positioning**: The crossfade is automatically centered on the selected marker
+
+#### Adjusting Crossfade Regions
+
+1. **Resize**: Drag the handles to adjust crossfade duration
+2. **Move**: Drag the region to reposition (while keeping it centered on the marker)
+3. **Curve Type**: Use the dropdown to select different fade curves:
+   - **Linear**: Constant crossfade rate
+   - **Exponential**: Smooth, gradual transition
+   - **Logarithmic**: More dramatic transition effect
+
+#### Applying Crossfades
+
+1. **Review Region**: Ensure crossfade boundaries are appropriate
+2. **Curve Selection**: Choose the desired crossfade curve type
+3. **Apply**: Click "Apply Crossfade" button
+4. **Processing**: The first half of the region fades out, the second half fades in
+5. **Smooth Transition**: Creates a seamless blend between the two audio sections
+
+#### Best Practices
+
+- **Loop Points**: Use crossfades at loop start/end points for seamless loops
+- **Section Transitions**: Apply crossfades between different musical sections
+- **Morphagene Optimization**: Create smooth granular transitions for the Morphagene
+- **Audio Content**: Works best with audio that has compatible harmonic or rhythmic content
+
 ### Audio Normalization
 
 MorphEdit includes audio normalization to optimize your audio levels for consistent playback and processing.
@@ -571,18 +617,18 @@ The estimated new audio length is displayed in the dialog.
 
 ### Regions
 
-| Key   | Action      | Description                 |
-| ----- | ----------- | --------------------------- |
-| **C** | Crop Region | Toggle crop region creation |
-| **[** | Fade-In     | Toggle fade-in region       |
-| **]** | Fade-Out    | Toggle fade-out region      |
+| Key    | Action      | Description                                               |
+| ------ | ----------- | --------------------------------------------------------- |
+| **C**  | Crop Region | Toggle crop region creation                               |
+| **[**  | Fade-In     | Toggle fade-in region                                     |
+| **]**  | Fade-Out    | Toggle fade-out region                                    |
+| **\\** | Crossfade   | Toggle crossfade region (requires selected splice marker) |
 
 ### System
 
-| Key                | Action | Description                          |
-| ------------------ | ------ | ------------------------------------ |
-| **Ctrl+Z / Cmd+Z** | Undo   | Undo last processing operation       |
-| **\\**             | Reset  | Clear all data and reset application |
+| Key                | Action | Description                    |
+| ------------------ | ------ | ------------------------------ |
+| **Ctrl+Z / Cmd+Z** | Undo   | Undo last processing operation |
 
 ---
 

public/USER_MANUAL.md

@@ -72,8 +72,10 @@ export interface WaveformRef extends SpliceMarkerHandlers {
   handleDecreaseSkipIncrement: () => void;
   handleFadeInRegion: () => void;
   handleFadeOutRegion: () => void;
+  handleCrossfadeRegion: () => void;
   handleApplyCrop: () => void;
   handleApplyFades: () => void;
+  handleApplyCrossfade: () => void;
   handleNormalize: () => void;
   handleTempoAndPitch: () => void;
   handleUndo: () => void;
@@ -1013,8 +1015,10 @@ const Waveform = forwardRef<WaveformRef, WaveformProps>(
     const handleLoop = handlers.handleLoop;
     const handleFadeInRegion = handlers.handleFadeInRegion;
     const handleFadeOutRegion = handlers.handleFadeOutRegion;
+    const handleCrossfadeRegion = handlers.handleCrossfadeRegion;
     const handleApplyCrop = handlers.handleApplyCrop;
     const handleApplyFades = handlers.handleApplyFades;
+    const handleApplyCrossfade = handlers.handleApplyCrossfade;
     const handleNormalize = handlers.handleNormalize;
     const handleTempoAndPitch = handlers.handleTempoAndPitch;
     const handleUndo = handlers.handleUndo;
@@ -1072,8 +1076,10 @@ const Waveform = forwardRef<WaveformRef, WaveformProps>(
         handleDecreaseSkipIncrement,
         handleFadeInRegion,
         handleFadeOutRegion,
+        handleCrossfadeRegion,
         handleApplyCrop,
         handleApplyFades,
+        handleApplyCrossfade,
         handleNormalize,
         handleTempoAndPitch,
         handleUndo,
@@ -1102,8 +1108,10 @@ const Waveform = forwardRef<WaveformRef, WaveformProps>(
         handleDecreaseSkipIncrement,
         handleFadeInRegion,
         handleFadeOutRegion,
+        handleCrossfadeRegion,
         handleApplyCrop,
         handleApplyFades,
+        handleApplyCrossfade,
         handleNormalize,
         handleTempoAndPitch,
         handleUndo,
@@ -1187,25 +1195,33 @@ const Waveform = forwardRef<WaveformRef, WaveformProps>(
           exportAnchorEl={state.exportAnchorEl}
           fadeInAnchorEl={state.fadeInAnchorEl}
           fadeOutAnchorEl={state.fadeOutAnchorEl}
+          crossfadeAnchorEl={state.crossfadeAnchorEl}
           cropMode={state.cropMode}
           fadeInMode={state.fadeInMode}
           fadeOutMode={state.fadeOutMode}
           fadeInCurveType={state.fadeInCurveType}
           fadeOutCurveType={state.fadeOutCurveType}
+          crossfadeMode={state.crossfadeMode}
+          crossfadeCurveType={state.crossfadeCurveType}
+          selectedSpliceMarker={!!state.selectedSpliceMarker}
           canUndo={canUndo}
           onExport={handleExport}
           onExportSlices={handleExportSlices}
           onExportFormatChange={handleExportFormatChange}
           onSetExportAnchorEl={actions.setExportAnchorEl}
           onSetFadeInAnchorEl={actions.setFadeInAnchorEl}
           onSetFadeOutAnchorEl={actions.setFadeOutAnchorEl}
+          onSetCrossfadeAnchorEl={actions.setCrossfadeAnchorEl}
           onNormalize={handleNormalize}
           onTempoAndPitch={handleTempoAndPitch}
           onCropRegion={handleCropRegion}
           onApplyCrop={handleApplyCrop}
           onFadeInRegion={handleFadeInRegion}
           onFadeOutRegion={handleFadeOutRegion}
           onApplyFades={handleApplyFades}
+          onCrossfadeRegion={handleCrossfadeRegion}
+          onApplyCrossfade={handleApplyCrossfade}
+          onSetCrossfadeCurveType={actions.setCrossfadeCurveType}
           onUndo={handleUndo}
           onSetFadeInCurveType={actions.setFadeInCurveType}
           onSetFadeOutCurveType={actions.setFadeOutCurveType}

public/img/crossfade.png

@@ -547,6 +547,10 @@ export const AudioRecorder: React.FC<AudioRecorderProps> = ({
                 ? 'Select a microphone and click "Start Recording" to begin'
                 : 'Click "Stop Recording" when finished to preview your audio'}
         </Typography>
+        <Typography variant="caption" color="text.primary" textAlign="center">
+          If encontering issues on mobile, try on Chrome browser for better
+          compatibility.
+        </Typography>
       </Stack>
     </Paper>
   );

public/img/infobar.png

@@ -8,7 +8,7 @@ import { TOOLTIP_DELAYS } from '../constants';
 interface FadeCurveSelectorProps {
   selectedCurve: string;
   onCurveChange: (curveType: string) => void;
-  fadeType: 'in' | 'out';
+  fadeType: 'in' | 'out' | 'crossfade';
   disabled?: boolean;
   anchorEl: HTMLElement | null;
   onSetAnchorEl: (element: HTMLElement | null) => void;