https://github.com/miltonchung/musicloud

Simple Music Player website that allows the user to choose and play music from the library.
https://github.com/miltonchung/musicloud

css html music-player react reacthooks sass

Last synced: 4 days ago
JSON representation

Simple Music Player website that allows the user to choose and play music from the library.

• Host: GitHub
• URL: https://github.com/miltonchung/musicloud
• Owner: MiltonChung
• Created: 2020-12-29T07:43:37.000Z (almost 4 years ago)
• Default Branch: main
• Last Pushed: 2022-03-15T04:29:12.000Z (over 2 years ago)
• Last Synced: 2023-03-04T18:32:24.827Z (over 1 year ago)
• Topics: css, html, music-player, react, reacthooks, sass
• Language: JavaScript
• Homepage: https://musicloudr.netlify.app/
• Size: 34.7 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# MusiCloud

Simple Music Player website that allows the user to choose and play music from the library.

Link: https://musicloudr.netlify.app/

## Table of contents

-  [About](#about)

-  [Technologies](#technologies)

-  [Features](#features)

-  [Challenges](#challenges)

-  [Setup](#setup)

-  [Inspiration](#inspiration)

## About

This react project utilizes the basics of react like useEffect, useState, useRef while building out a music player app. It allows users to select any song from the library and play the song, skip forward/backward to another song, play/pause, autoplay, and more! I learned many things like how to structure a react codebase, how components work, how to pass props, and more.

## Technologies

Project is created with:

-  React

-  React Hooks (useEffect, useState, useRef)

-  Sass

-  HTML/CSS

## Features

-  Play/pause music

-  Click the music track to go to a certain time in the song

-  Skip forward/backward songs

-  Adjust volume using the volume slider

-  Dark mode

-  Music visualizer

-  Mobile friendly

## Challenges

-  The visualizer was hard to work with because it uses the HTML canvas property and making it responsive.

-  Customizing the input sliders to look more elegant was a challenge especially making it look the same in different browsers

-  First time implementing the audio tag in HTML and React respond to user input

## Setup

To run this project, install it locally using npm and go into the root folder:

```

$ npm install

$ npm start

```

## Inspiration

This app is built on top of Dev Ed's React tutorial.