---
title: "Pocket Piano — Free Framer component · Best of Framer"
description: "Free Framer component · by Seiten mit Herz · Players. Pocket Piano adds a keyboard to your website that actually plays."
canonical: "https://framer.elliotli.dev/component/pocket-piano"
---

[Home](/)/[Components](/components)/[Players](/components/category/players)/Pocket Piano

# Pocket Piano

Playable one octave keyboard

[View on Framer](https://framer.com/marketplace/components/pocket-piano/?via=elliot-li)

![Pocket Piano preview image 1](https://framer.elliotli.dev/og/component/pocket-piano/fae807fca5ac727a/1600x1017.jpg)

## Summary

Pocket Piano adds a keyboard to your website that actually plays.

## Description

Pocket Piano adds a keyboard to your website that actually plays. Click or tap a key and it sounds a soft tone generated live in the browser. There are no audio files to host and nothing to load, so it stays fast on mobile.

It covers one full octave C4 to C5.

You can customize the colors to your design or leave it classic black and white. You can also decide how loud each note sounds and how long it lingers.

Fits websites for music schools, therapy and coaching practices, kids' learning pages, bands and anywhere a small interactive piano beats a static image.

Properties

White keys, white active, black keys, black active, border: the colours for resting and pressed keys

Volume: 00,5 to 0,5

Tone Length: 0,4 to 2,5s

Good to know

Resizes the piano freely, it grows with its frame. The keys carry aria labels for screen leaders. On iOS the hardware silent switch mutes the sound, which is expected browser behaviour and not a bug.

Have fun! 😄

## Rank history [How rankings work →](/terms#rankings)

-   All · #5426

## Details

- **Author**: Seiten mit Herz
- **Published**: 2026-09-02
- **Updated**: 2026-09-02
- **Added**: 2026-09-02
- **Categories**: Players

## More like this

-   [Cozy Video Card](/component/cozy-video-card) — 日香理 / hikari · $1 — A cozy card for your YouTube video
-   [A/B Audio Player Pro](/component/a-b-audio-player-pro) — Injamul Haque Somrat · $24 — Master Audio Comparison Player
-   [Reelflow](/component/reelflow) — Quaders · Free — An auto video ticker for reels
-   [Mux Video](/component/mux-video) — NorthGarden · $3 — Drop Mux video into any Framer site with full control over playback, UI, and interaction.