MusicPlayer

KO | EN

gitlite — search

#python #java #python3 #arduino #golang #machine-learning #rust #html #flask #javascript #seismology #nodejs

★ 13 Open GitHub ↗

Music Player design with HTML5, CSS3 and JavaScript

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# MusicPlayer - [HTML5]

Diseño de un reproductor de música que desplegará la carátula de un álbum junto con el artista del mismo y la lista de canciones que lo componen.
Puedes verlo [aquí](https://rominamartin.github.io/MusicPlayer/)

## Elementos que se usan

- HTML5
    - [Template](https://developer.mozilla.org/es/docs/Web/HTML/Element/template)

- CSS3
    - [Transform](https://developer.mozilla.org/es/docs/Web/CSS/transform)
    - [Animations](https://developer.mozilla.org/en-US/docs/Web/CSS/animation)
    - [Text-Shadow](https://developer.mozilla.org/es/docs/Web/CSS/text-shadow)
    - [FontAwesome](http://fontawesome.io/)
    - [From HEX to RGBA](http://hex2rgba.devoth.com/)
    - [Media queries](https://developer.mozilla.org/es/docs/CSS/Media_queries)

- JavaScript
    - [SetInterval](https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/setInterval)
    - [Match media queries](https://developer.mozilla.org/es/docs/Web/API/Window/matchMedia)
- Otros
    - SVG
        - [SVG to base64](https://www.base64-image.de/)
        - [SVG Optimizer](https://jakearchibald.github.io/svgomg/)
        - [Tutorial remove empty space from SVG](https://www.grobmeier.de/remove-white-space-from-svg-30102015.html)
    - [RoyaltyFreeMusic](http://incompetech.com/music/royalty-free/music.html)
        - [List:](http://incompetech.com/music/royalty-free/index.html?collection=18&Search=Search)
            - "Chillin Hard"
            - "Voice Over Under"
            - "What Is Love"

## Screenshots
### Inicial
![Inicial](https://raw.githubusercontent.com/ROMI-WEB/MusicPlayerHTML5/master/images/galaxyS5.PNG "Inicial")
### Reproduciendo
![Reproduciendo](https://raw.githubusercontent.com/ROMI-WEB/MusicPlayerHTML5/master/images/playing.PNG "Reproduciendo")
### Pausado
![Pausado](https://raw.githubusercontent.com/ROMI-WEB/MusicPlayerHTML5/master/images/paused.PNG "Pausado")

## Author
Romina Martín - [Página personal](http://rominamartin.github.io/)

MusicPlayer

Explore Similar Repositories

Was this content helpful?

Recent Feedback

Download README