---
title: "Shoji Audio Player — Framer component · Best of Framer"
description: "$15.00 · Framer component · by Joshua Roberts · Players. Pro audio player with EQ & auto-fade."
canonical: "https://framer.elliotli.dev/component/shoji-audio-player"
---

[Home](/)/[Components](/components)/[Players](/components/category/players)/Shoji Audio Player

# Shoji Audio Player

Pro audio player with EQ & auto-fade.

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

![Shoji Audio Player preview image 1](https://framer.elliotli.dev/og/component/shoji-audio-player/c206b90d2404db98/1600x1200.jpg)

## Summary

Pro audio player with EQ & auto-fade.

## Description

**A drag and drop audio player that brings a professional Web Audio engine to your Framer site. Built with a 5-band equalizer, smart playlist queuing, auto-fade transitions, and viewport-aware menus.**

## Pro Music & Audio Player 🎛️

Elevate your site's audio experience. Whether you are selling beats, hosting a podcast, or showcasing sound design, this component gives your visitors an immersive, app-like listening experience directly on the page.

### Best use cases:

Beat stores, podcast landing pages, sound design portfolios, ambient background tracks, and musician link-in-bio sites.

### How to Use:

1.  Drag and drop the component onto your canvas.
    
2.  Upload your audio files (MP3, WAV, FLAC, etc.) directly in the Framer properties panel to build your playlist.
    
3.  Choose your layout (Full, Medium, Small, Miniscule) and tweak the colors, padding, and UI settings to perfectly match your brand.
    
4.  Preview to test the EQ, volume, and auto-fade features.
    

### Highlights:

-   True Web Audio API integration
    
-   Working 5-band Equalizer (EQ)
    
-   Auto-fade & crossfading between tracks
    
-   Smart playlist queuing with Shuffle & Repeat
    
-   4 responsive layout modes
    
-   Viewport-aware collision detection for the settings menu
    
-   Custom playback speed controls
    
-   Smooth drag-to-seek progress bar
    
-   Native Framer padding controls (FusedNumbers)
    
-   Highly customizable colors, radii, and fonts
    
-   Autoplay support with adjustable delays
    

_Crafted by:_ [_Joshua Roberts_](https://joshuaroberts.design/)

![Four Different Layout Options](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-lteyk35b-52Jo5ijtg9fKpOyk7sBDL4opJF39Ps)Four Different Layout Options![Layout & Style Design Examples](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-soqpzanc-yjPSu649qjji3nl3X6CaFXY0LaOoTs)Layout & Style Design Examples![Comprehensive Property Customizations](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-lteyk35b-nXUg0bPy0b66vp8HYLswXBz0lOZOLj)Comprehensive Property Customizations

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

-   All · #8090

## Details

- **Author**: Joshua Roberts
- **Price**: $15.00
- **Published**: 2026-05-27
- **Updated**: 2026-05-27
- **Added**: 2026-05-22
- **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.