https://github.com/matheus1714/01-music-player

https://github.com/matheus1714/01-music-player

audio html javascript rocketseat scss

Last synced: 27 days ago
JSON representation

• Host: GitHub
• URL: https://github.com/matheus1714/01-music-player
• Owner: Matheus1714
• Created: 2023-12-29T13:01:55.000Z (about 1 year ago)
• Default Branch: master
• Last Pushed: 2023-12-29T13:20:01.000Z (about 1 year ago)
• Last Synced: 2023-12-30T14:23:53.505Z (about 1 year ago)
• Topics: audio, html, javascript, rocketseat, scss
• Language: SCSS
• Homepage: https://matheus1714.github.io/01-music-player/
• Size: 12.3 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# [Music Player](https://matheus1714.github.io/01-music-player/) 🚀

![](.github/banner.gif)

This repository is the solution to [#boraCodar um player de música](https://www.rocketseat.com.br/boracodar#) by [Rocketseat](https://www.rocketseat.com.br/). 

The objective of this project was the development of a music player!

## Design

This Front-end project was developed based on the design proposed in [Figma](https://www.figma.com/file/toCNbYGd4RjuIxvU8MXtk1/Player-de-M%C3%BAsica-%E2%80%A2-Desafio-01-(Community)?type=design&node-id=1%3A62&mode=dev).

![](.github/animation.gif)

## Technologies

This project was developed using HTML, CSS and Javascript

## Run Project

Click on `index.html`and 😝 Enjoy!!

## What I Learned with This Project?

### Audio Controls

This project help me to learn about audio controls in Javascript. My control functions were:

```js

const updateProgressBar = () => {

    const progressPercentage = (audioPlayer.currentTime / audioPlayer.duration) * 100

    progress.style.width = `${progressPercentage}%`;

}

const updateMusicProgress = () => {

    const progressInSeconds = audioPlayer.currentTime;

    const durationInSeconds = audioPlayer.duration

    timeProgress.textContent = formatTimeProgress(progressInSeconds)

    timeEnd.textContent = formatTimeProgress(durationInSeconds - progressInSeconds)

    updateProgressBar()

}

const playAudio = () => {

    if(audioPlayer.paused){

        audioPlayer.play()

        setInterval(updateMusicProgress, 500);

    }else{

        audioPlayer.pause()

    }   

}

```

## Acknowledgment

Thanks to [Rocketseat](https://www.rocketseat.com.br/) for this challenge and initiatives it provides.🚀