Enhance audio and UI interactions for improved user experience
- Added a prebuild script in package.json to copy audio assets for smoother audio playback. - Updated App.vue to ensure the router is ready before displaying content, addressing issues with hard refreshes. - Introduced a "Tap to start" feature in SplashScreen.vue to comply with browser autoplay policies for audio. - Enhanced playLoopStart function in useLoginSounds.ts to utilize the Web Audio API for better audio control. - Removed unnecessary redirect in router index.ts for cleaner routing logic. - Improved Dashboard.vue and Login.vue styles for better visual hierarchy and user engagement during transitions.
This commit is contained in:
@@ -41,15 +41,29 @@ function playTone(
|
||||
const INTRO_AUDIO_URL = '/assets/audio/cosmic-updrift.mp3'
|
||||
const LOOP_START_URL = '/assets/audio/loop-start.mp3'
|
||||
|
||||
/** Play loop-start when transitioning from typing intro to Welcome Noderunner, as the intro music comes in */
|
||||
/** Play loop-start when transitioning from typing intro to Welcome Noderunner, as the intro music comes in.
|
||||
* Uses Web Audio API so it plays after context is resumed (user gesture). */
|
||||
export function playLoopStart() {
|
||||
const ctx = getContext()
|
||||
if (!ctx) return
|
||||
try {
|
||||
const audio = new Audio(LOOP_START_URL)
|
||||
audio.volume = 0.5
|
||||
audio.play().catch(() => {})
|
||||
if (ctx.state === 'suspended') ctx.resume()
|
||||
} catch {
|
||||
// ignore
|
||||
return
|
||||
}
|
||||
fetch(LOOP_START_URL)
|
||||
.then((res) => res.arrayBuffer())
|
||||
.then((buf) => ctx.decodeAudioData(buf))
|
||||
.then((decoded) => {
|
||||
const src = ctx.createBufferSource()
|
||||
src.buffer = decoded
|
||||
const gain = ctx.createGain()
|
||||
gain.gain.value = 0.5
|
||||
src.connect(gain)
|
||||
gain.connect(ctx.destination)
|
||||
src.start(0)
|
||||
})
|
||||
.catch(() => {})
|
||||
}
|
||||
|
||||
/** Resume audio context (call on first user interaction to unlock autoplay) */
|
||||
|
||||
Reference in New Issue
Block a user