Ismael Martínez
Add UI sounds effects to your prototypes.
Note: It works better in Framer Web.
You can easily include Facebook and Google Material Design sounds to your frames and trigger them on events. You can use your own sounds files too. You don’t necessarily need to write code.
Connect the Sound component to any frame and choose the event trigger and the sound to play from the Sound property select.
playSound
function and sounds
object.import { playSound, sounds } from "@framer/ismael.sounds/code/Sounds"
sounds
is an object of HTML audio elements.playSound(string | HTMLAudioElement)
can play an audio from a path file.export function YourOverride(): Override {
return {
onTapStart() {
playSound(sounds.uiLock)
}
}
}
or
export function YourOverride(): Override {
return {
onTapStart() {
playSound('https://your-sound.com/file.mp3')
}
}
}
NOTE: onTapStart
event responds before onTap
event. It’s recommended if you want a faster feedback.
onTapStart
to events listplaySound
to work with the installed packageurl
helper is usedsounds
to assets
folder.m4a
🙄.caf
sounds
object is a collection of HTML audio instancesimport
to use with OverridesplaySound
function to work with OverridesBugs & help: @ismamz