https://github.com/sizzlebop/midi-player

A modern web-based audio player with a sleek, customizable interface and comprehensive playback controls. Features include real-time progress tracking, dynamic song selection, and extensive theme customization options including colors, gradients, and fonts. Built with vanilla JavaScript and designed to be lightweight and responsive, the player inc
https://github.com/sizzlebop/midi-player

midi midi-player music music-player notion widget widgets

Last synced: 2 days ago
JSON representation

A modern web-based audio player with a sleek, customizable interface and comprehensive playback controls. Features include real-time progress tracking, dynamic song selection, and extensive theme customization options including colors, gradients, and fonts. Built with vanilla JavaScript and designed to be lightweight and responsive, the player inc

• Host: GitHub
• URL: https://github.com/sizzlebop/midi-player
• Owner: sizzlebop
• Created: 2025-01-18T08:45:30.000Z (3 days ago)
• Default Branch: main
• Last Pushed: 2025-01-18T09:12:54.000Z (3 days ago)
• Last Synced: 2025-01-18T10:23:13.170Z (3 days ago)
• Topics: midi, midi-player, music, music-player, notion, widget, widgets
• Language: JavaScript
• Homepage: https://pinkpixel.dev
• Size: 1.21 MB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        


  



# MIDI Player

A sophisticated web-based MIDI player implementation featuring a modern, customizable interface and robust playback capabilities. This player offers an intuitive user experience while providing extensive customization options for seamless integration into any web project.

![MIDI Player Preview](https://res.cloudinary.com/di7ctlowx/image/upload/v1737190570/screenshot_lvib76.png)

## Features

### Core Functionality

- Comprehensive MIDI file playback controls (play, pause, stop)

- Real-time progress tracking with interactive progress bar

- Dynamic song selection interface

- Current time and duration display

### Customization Options

- Extensive theme customization:

  - Configurable primary, secondary, and accent colors

  - Optional gradient background with customizable color stops

  - Wide selection of professional fonts

  - Flexible text color adjustment

- Responsive design ensuring optimal display across all devices

- Customizable player dimensions and layout

### Integration Capabilities

- One-click embed code generation

- Seamless integration with existing web projects

- Lightweight implementation with minimal dependencies

## Installation

1. Clone the repository:

```bash

git clone https://github.com/yourusername/midi-player.git

cd midi-player

```

2. No additional installation steps required - the player runs directly in the browser.

## Usage

### Basic Implementation

1. Open `index.html` in your web browser

2. Use the song selector to choose a MIDI file

3. Utilize the intuitive control interface for playback

### Customization

1. Access the customization panel to modify the player's appearance

2. Adjust colors using the color pickers:

   - Primary color: Sets the main theme

   - Secondary color: Defines secondary elements

   - Accent color: Highlights interactive elements

   - Text color: Controls all text elements

3. Enable and configure gradient backgrounds as desired

4. Select from multiple professional font options

### Embedding

1. Customize the player to match your website's theme

2. Click "Get Embed Code" to generate the implementation code

3. Copy and paste the generated code into your website

## Technical Requirements

### Browser Support

- Chrome 49+

- Firefox 52+

- Safari 11+

- Edge 79+

### Dependencies

- MIDI.js (v1.12.0 or higher) - Handles MIDI file parsing and playback

- Modern web browser with Web Audio API support

## Contributing

We welcome contributions to the MIDI Player project. Please follow these steps:

1. Fork the repository

2. Create a feature branch (`git checkout -b feature/AmazingFeature`)

3. Commit your changes (`git commit -m 'Add some AmazingFeature'`)

4. Push to the branch (`git push origin feature/AmazingFeature`)

5. Open a Pull Request

## License

This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.

## Acknowledgments

- MIDI.js team for their excellent MIDI processing library

- All contributors who have helped shape this project

- The open-source community for continuous inspiration and support

## Support

For support, feature requests, or bug reports, please open an issue in the GitHub repository.