Skip to content

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

Notifications You must be signed in to change notification settings

sizzlebop/midi-player

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

5 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

MIDI Player Logo

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

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:
git clone https://github.com/yourusername/midi-player.git
cd midi-player
  1. 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 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.

About

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

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published