This article breaks down the “Melody Workshop” solution built on HarmonyOS 6 (API 23). Its core idea is to combine floating navigation, immersive material effects, Face AR, and multi-window composition into a PC music workstation that solves the classic DAW problems of crowded interfaces, weak emotional interaction, and poor window coordination. Keywords: HarmonyOS 6, Face AR, immersive materials.
Technical Specifications at a Glance
| Parameter | Details |
|---|---|
| Language | ArkTS / TypeScript |
| UI Framework | ArkUI, UIDesignKit |
| License | CC 4.0 BY-SA (as declared in the original source) |
| Stars | Not provided in the original content |
| Core Dependencies | @kit.AbilityKit, @kit.ArkUI, @kit.UIDesignKit, @kit.AREngineKit, @kit.MultimediaKit |
| Target Platforms | HarmonyOS PC / 2-in-1 / Tablet |
| Key Capabilities | Floating Navigation, Immersive Materials, Face AR, Multi-Window |
This Architecture Redefines the HarmonyOS PC Music Creation Interface
The pain points of traditional DAWs are clear: dense controls, high visual noise, expensive track switching, and no effective way to map emotion directly to sound control. The design goal of Melody Workshop is to evolve the UI from a tool panel into a creative medium.
It connects three new HarmonyOS 6 capabilities: systemMaterialEffect handles immersive glass-like materials, floating navigation manages track switching, and Face AR maps facial expressions to audio parameters in real time. Subwindows then enable parallel workflows for the mixer, sound library, and spectrum analysis.
AI Visual Insight: The image presents a cover-level preview of the project interface. The main area is a dark immersive workspace, while highly transparent floating layers at the top and bottom host navigation and control zones. The overall design emphasizes glassmorphism, low-brightness backgrounds, and theme-colored glow effects, which align well with the focus, layering, and real-time feedback requirements of a music workstation.
The Architecture Is Split into Four Cooperative Layers
The first layer is the ArkUI interface layer, including the immersive title bar, the timeline composition area, and the bottom floating tabs. The second layer is the Face AR engine layer, responsible for facial capture, expression analysis, and parameter mapping. The third layer is the window management layer, which coordinates the main window with multiple tool subwindows. The fourth layer contains the audio business logic.
This separation brings two immediate benefits. First, it decouples visual interaction from the audio engine. Second, it unifies multi-window state through AppStorage, which reduces the complexity of cross-component synchronization.
// Define key dependencies: immersive UI, AR, and multimedia capabilities are all required
{
"dependencies": {
"@kit.AbilityKit": "^6.1.0",
"@kit.ArkUI": "^6.1.0",
"@kit.UIDesignKit": "^6.1.0",
"@kit.AREngineKit": "^6.1.0",
"@kit.MultimediaKit": "^6.1.0"
}
}This configuration defines the project’s capability boundaries: windows, UI, AR, and audio are all essential.
The Window Layer Must Start with True Immersive Initialization
The main window should not simply enter fullscreen mode. It must disable the title bar, enable rounded corners and shadows, and allow content to extend into the system safe area. That is the only way to prevent the top immersive navigation and the bottom floating track bar from being visually cut off by system boundaries.
import { window } from '@kit.ArkUI';
async function initMainWindow(mainWindow: window.Window) {
await mainWindow.setWindowMode(window.WindowMode.FULLSCREEN); // Fullscreen immersive mode
await mainWindow.setWindowTitleBarEnable(false); // Disable the system title bar
await mainWindow.setWindowLayoutFullScreen(true); // Extend content into the full screen area
await mainWindow.setWindowBackgroundColor('#00000000'); // Transparent background for lighting effects
}This code ensures that the main canvas can carry an immersive experience. It is the prerequisite for all visual effects that follow.
The Immersive Title Bar Acts as the State Feedback Hub
The title bar does more than show the project name and BPM. It also communicates transport states such as play, pause, and record. In this design, playback state maps to the theme color, while the border, shadow, and opacity all update together to create low-cost but highly recognizable visual feedback.
HdsNavigation + SystemMaterialEffect.IMMERSIVE is the key combination here. When the window gains focus, the glow becomes stronger. When it loses focus, the opacity decreases. This keeps visual hierarchy clear in a multi-window environment.
Face AR Turns Facial Expressions Directly into Audio Parameters
The most valuable innovation here is not just that the system can recognize a face. It is how that recognition maps to usable audio control. In this design, a smile maps to reverb, a frown maps to distortion, a raised brow maps to filter cutoff, and an open mouth maps to delay feedback, creating an intuitive emotion-driven control panel.
function mapExpressionToParameters(smile: number, frown: number, browRaise: number, mouthOpen: number) {
return {
reverbAmount: 0.2 + smile * 0.6, // Stronger smile increases reverb
distortionDrive: frown * 0.8, // Frown increases distortion intensity
filterCutoff: 0.3 + browRaise * 0.7, // Raised brows brighten the sound
delayFeedback: 0.1 + mouthOpen * 0.7 // Open mouth increases spatial echo
};
}This mapping logic converts abstract facial expressions into continuous parameters that the audio engine can consume directly.
Floating Track Navigation Replaces the Traditional Track Panel
Traditional track panels usually occupy a large fixed area on the left or bottom side of the interface. This solution uses bottom floating tabs instead and reveals full controls only when necessary. It supports opacity adjustment, track switching, and tab closing. The core goal is to return more space to the timeline.
Because the navigation layer uses background blur, gradients, and rounded corners, it feels like a system-level control without interrupting the composition flow. On a large PC display, this works better than a tiled track panel for long creative sessions.
Slider({ value: this.navTransparency * 100, min: 55, max: 85, step: 15 })
.onChange((value: number) => {
this.navTransparency = value / 100; // Dynamically adjust floating bar opacity
})This interaction turns floating navigation from a fixed style into an adjustable tool, balancing visibility with content preservation.
Multi-Window Collaboration Is the Second Core of This PC Workstation
Beyond the main composition window, the mixer, sound library, and spectrum analyzer all open in subwindows. The real value is not simply opening multiple windows. It is synchronizing themes across windows and maintaining focus awareness. In this solution, AppStorage stores global_theme_color, allowing all windows to share the same visual context.
When the user switches the current track, the theme color updates everywhere. When a subwindow gains focus, it inherits the lighting style of the main window, preventing visual fragmentation during parallel multi-window work.
Performance Optimization Must Constrain AR and Window Overhead First
Face AR is the heaviest real-time module, so you should proactively reduce frame rate and resolution. Subwindows should also be created lazily to avoid initializing every tool panel at once. Audio buffers must stay within a low-latency range as well, or the facial control signals will drift away from the actual sound response.
private optimizeARPerformance(): void {
if (this.arSession) {
this.arSession.setCameraConfig({
fps: 15, // Lower frame rate for better stability
resolution: { width: 320, height: 240 } // Low resolution is sufficient for expression recognition
});
}
}This code reflects a core principle: music interaction needs stable latency more than camera image quality.
The Best-Fit Use Cases for This Implementation Are Already Clear
This approach fits music production software that needs large displays, multi-track editing, and collaboration across multiple tool windows. It also works well for live performance, emotion-driven audio effects, and experimental interactive products. If your project emphasizes creative atmosphere and real-time expression, this kind of design has a clear advantage over traditional feature stacking.
That said, Face AR depends on real device capabilities. The immersive multi-window experience also depends on the HarmonyOS PC window model. If your target hardware is limited, start with immersive material effects and floating navigation first, then add AR only when needed.
FAQ
1. Why is Face AR a good fit for a music workstation instead of just entertainment effects?
Because it can convert facial expressions into continuous control signals for parameters such as reverb, filtering, and distortion. That makes it naturally suitable for real-time audio interaction rather than staying at the level of visual overlays.
2. Why does the multi-window solution use AppStorage for state synchronization?
Because ArkUI components and subwindows need lightweight shared state. AppStorage is sufficient for synchronizing theme colors, focus states, and window actions globally, without introducing a heavier state management layer too early.
3. What should you optimize first when implementing this solution?
Prioritize AR frame rate, lazy window loading, and audio buffering. These three factors directly determine interaction latency, frame-rate stability, and multi-window resource consumption, so they are critical to the overall experience.
AI Readability Summary: This article reconstructs a PC music creation workstation built on HarmonyOS 6 API 23. It focuses on floating navigation, immersive material effects, Face AR emotion mapping, and multi-window collaboration, and distills the core architecture, dependency setup, key component implementation, and performance optimization strategies.