info@webapphorizon.com
webapphorizon

Custom Audio Player and Judging Script for Rap Battles on lotusbattle.ru

lotusbattle.ru
lotusbattle.ru Project

For the rap battle platform lotusbattle.ru, I created a custom audio player for convenient track listening and a Google Sheets integration script to facilitate battle judging.

Brief Description

This project represented a comprehensive solution for automating processes on the rap battle platform. It included developing a modern web audio player with MP3 file support and a visual indicator system for synchronizing judging data with Google Sheets.

Audio Player Functionality

Core Features

  • Howler.js Web Audio Player - Using Howler.js v2.2.3 library for reliable sound control
  • Intuitive Interface - Play/pause buttons, volume control with Font Awesome icons
  • Interactive Controls - Volume slider and progress bar with seek functionality
  • Information Display - Track name and time display (current/total) in MM:SS format

Design and UX

  • Fixed Positioning - Player anchored at the bottom of the screen for easy access
  • Corporate Dark Theme - Using colors #17243C (background) and #2C7658 (active elements)
  • Responsive Design - Flexbox layout with 61% width and 360px left margin
  • Custom Control Elements - Styled sliders for WebKit and Mozilla browsers

Playback Automation

  • Smart Link Detection - Automatic search and processing of MP3 links from selstorage.ru domain
  • Visual Feedback - Highlighting active link with SeaGreen color
  • State Management - Automatic pause of current track when selecting a new one

Google Sheets Integration

Data Parsing and Processing

  • CSV Parsing - Using PapaParse library to load data from Google Sheets
  • Name Formatting - Extracting and cleaning participant names from numbers and extra spaces
  • Data Comparison - Matching information from Google Sheets with HTML form data

Visual Indicator System

  • Color Indication - Red dots for mismatched data, green for matched data
  • Precise Positioning - Absolute positioning of indicators in the top-right corner of elements
  • Numbering System - Using data-number attribute to link elements with data
  • Reverse Search - Element search algorithm in reverse order to prevent duplication

Technical Features

Architecture and Performance

  • Rendering Optimization - Using requestAnimationFrame for smooth playback progress updates
  • DOM Event Handling - Dynamic interaction with page elements through event listeners
  • State Management - Proper handling of track completion events and state reset

Cross-Browser Compatibility

  • Control Element Styling - Custom styles for WebKit (-webkit-appearance) and Mozilla (-moz-appearance)
  • Modern Web Standards - Using modern CSS properties and JavaScript APIs
  • Supported Libraries - Font Awesome v5.15.3 for icons with broad browser support

Work Stages

  1. Requirements Analysis - Studying rap battle platform specifics and automation needs
  2. Architecture Design - Planning audio player structure and Google Sheets integration
  3. Audio Player Development - Creating interface and playback logic using Howler.js
  4. Google Sheets Integration - Developing data parsing system and visual indicators
  5. Testing and Debugging - Verifying all components work in various usage scenarios
  6. Deployment and Optimization - Solution deployment and performance tuning

Final Result

  • Functional Audio Player - Modern interface with complete set of playback control functions
  • Judging Automation - Visual indicator system for tracking battle participant status
  • Real-time Integration - Google Sheets data synchronization with web interface
  • Enhanced UX - Significant simplification of processes for battle organizers and judges

Technologies Used

  • Howler.js v2.2.3 - Audio control library
  • Font Awesome v5.15.3 - Interface icons
  • PapaParse - CSV data parsing from Google Sheets
  • HTML5/CSS3 - Modern markup and styling
  • JavaScript (ES6+) - Application logic and DOM manipulation
  • Google Sheets API - Integration with spreadsheets for judging data
  • Flexbox - Responsive interface layout

Social Networks & Messengers

contacts

contacts
Links
UpworkFiverrContraFreelancerGumroad
KworkWeblancerAvito

prices

More prices
prices

Web Interface Design with Shadcn/UI

I create designs for Next.js with TailwindCSS and Shadcn/UI components. Emphasis is on exceptional user experience, easy transfer of design to code, simple style replacement, and clarity for the client.

от 100 usd

View Examples

Website and Web Application Development on Next.js

Development of modern websites and web applications on Next.js. Writing readable and easily maintainable code, serving as a reliable foundation for further business growth and expansion of services, products, and features.

от 100 usd

View Examples

SEO Optimization for Next.js Websites

Ensuring high loading speeds, configuring meta tags, and creating an XML sitemap. The website is tested in PageSpeed Insights, GTmetrix, and other tools. Metrics above 80 are achieved. High performance, accessibility, and basic search visibility are ensured.

от 20 usd

View Examples

Custom Scripts for Tilda

Development of custom scripts for Tilda websites, including the T123 block. Creation of tailored solutions for Tilda, enabling features unavailable in standard tools, such as quizzes, forms, timers, filters, sliders, modals, calculators, and API integrations (e.g., Google Sheets), as well as any additional enhancements based on your tasks. Enhance your website's functionality quickly and professionally.

от 20 usd

View Examples

Professional Landing Page Development with Next.js, React, TypeScript, and Tailwind CSS

As an experienced freelancer and solo developer, I offer professional development of modern and effective landing pages using cutting-edge technologies: Next.js for server-side rendering (SSR) and SEO optimization, React for creating interactive web applications and dynamic content, TypeScript for ensuring code reliability and improved maintainability, and Tailwind CSS for rapid styling and creating responsive design. I specialize in developing high-converting single-page websites focused on lead generation and effective customer acquisition. Each landing page I create features an appealing modern design, fast loading speeds, full mobile responsiveness (completely responsive design), comprehensive search engine optimization (SEO) to help improve website ranking on Google and other search engines, and an intuitive user interface (UI/UX) ensuring maximum visitor engagement.

от 100 usd

View Examples

E-commerce Store Development with Next.js, React, TypeScript, and Tailwind CSS

I offer professional development of modern and functional e-commerce stores using cutting-edge technologies: Next.js for high performance and SEO optimization, React for creating interactive user experiences and dynamic content, TypeScript for code reliability and maintainability, and Tailwind CSS for rapid styling and responsive design. As an experienced freelancer and solo developer, I specialize in creating effective online sales platforms. The e-commerce stores I develop feature appealing designs, fast page loading speeds, full responsiveness for mobile devices and tablets, and intuitive interfaces for customer convenience. They are also optimized for search engines, which helps increase organic traffic and drive sales.

от 500 usd

View Examples

Professional Full-Stack Web Application Development with Next.js, React, TypeScript

I am a solo developer specializing in building modern web applications using a cutting-edge technology stack: Next.js for server-side rendering and SEO, React for interactive user interfaces, and TypeScript for code reliability. I also utilize TailwindCSS for rapid and stylish design, PostgreSQL for data storage, and Supabase as a streamlined backend solution. Contact me for efficient and high-performing web development.

от 500 usd

View Examples