Sounds

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.

Usage

Sound component (without writing code)

Connect the Sound component to any frame and choose the event trigger and the sound to play from the Sound property select.

With Overrides

Import 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.

Add in the override:

export function YourOverride(): Override {
    return {
        onTapStart() {
            playSound(sounds.uiLock)
        }
    }
}

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.

Future

Add more kits.
Add more events.
Add your own audio file.

Changelog

v.1.10.0

Add onTapStart to events list

v1.9.0

Fix playSound to work with the installed package

v1.8.0

Change the way the url helper is used

v1.7.0

Move sounds to assets folder

v1.6.0

Change Google Material Design audio file format to .m4a 🙄

v1.5.0

Change Google Material Design audio file format to .caf

v1.4.0

sounds object is a collection of HTML audio instances
Fix import to use with Overrides

v1.3.0

Fix Material Design sounds path and file extension

v1.2.0

Simplify playSound function to work with Overrides
Add component instance and override examples

v1.1.0

Fix sounds base path

v1.0.0

First release