/ch-music-player

devChallenges リポジトリ（出典：[devChallenge - JavaScript Developer - Music Player](https://devchallenges.io/challenge/music-player)

Primary LanguageJavaScript

Music Player

Solution for a challenge from Devchallenges.io.

Demo | Solution | Challenge

Table of Contents

Overview

Desktop

overview - desktop

Mobile

overview - mobile

Built With

Base

Other major libraries

Features

This application/site was created as a submission to a DevChallenges challenge. The challenge was to build an application to complete the given user stories.

  • Create a music player app that matches the given design.
  • Use HTML to create the basic structure.
  • Add image, title, author, progress bar, player button,... according to the design.
  • Use vanilla JavaScript to add interactivity.
  • Users should be able to play and stop the current song.
  • Users should be able to go to next and previous songs.
  • Users should be able to change play time with the progress bar.
  • The page should be responsive on different screen sizes.
  • Deploy the solution and submit Repository URL and Demo URL.

How To Use

To clone and run this application, you'll need Git and Node.js (which comes with npm) installed on your computer. From your command line:

# Clone this repository
git clone https://github.com/h-yoshikawa44/ch-music-player.git
# or
git clone git@github.com:h-yoshikawa44/ch-music-player.git

# Install dependencies
npm install

# Run the Vite
npm run dev

learned/improved

The music player functionality could be implemented more cleanly if implemented in a class...

  • Basic usage of web audio api.
  • How to customize input type=range to create a music playback seek bar mechanism.
    • The system of updating the color of the seek bar with JavaScript according to the song playback position was particularly impressive.

Acknowledgements

Contact