Awesome 🎧 Music Player + tutorial
Tags: webdev, tutorial, javascript, css
Published: 2021-07-09 18:04:47

<h1>Introduction</h1>
Last week I posted my calculator made in the style of Neomorphism. Today I decided to continue posting my similar works. Therefore, I want to present to you my music player, also made in the style of neomorphism.

> <strong>Calculator</strong>
{% link https://dev.to/kerthin/beautiful-neomorphic-calculator-dark-mode-6jm %}

<h1>Music Player</h1>
{% codepen https://codepen.io/Astap/pen/JjNKQVB %}

<a href="https://kerthin.github.io/musicPlayer-templateSait/" target="_blank"><h1>Full Page Demo</h1></a>

<h2>Functional</h2>
<h3>01. Switching tracks</h3>
![Alt Text](https://media.giphy.com/media/lJbn4bUGj0Y0iMKlij/giphy.gif)
- It is possible to switch your tracks. If you switch a track while playing music, the next track will start by clicking on the "Play" button.

<h3>02. Switching tracks</h3>
![Alt Text](https://media.giphy.com/media/oKQTrdWlog9x1adXZI/giphy.gif)
- While the music is playing, the animation of scrolling the image of the song will be started.

<h3>03. Rewind the song time</h3>
![Alt Text](https://media.giphy.com/media/wl7ZtMykFiyGi0BRwc/giphy.gif)
- You can also rewind the song. The song can be rewound manually using the timeline or using the buttons that scroll the song forward or backward for 5 seconds.

<h3>04. Random launch of a track</h3>
![Alt Text](https://media.giphy.com/media/PSMeyymgM6T4UNGWx4/giphy.gif)
- When you click the lower right button, the tracks will start in random order, and not in order as specified in the array.
<br/>

> <strong>This only works if the track ended on its own, and you didn't switch it.</strong>

<h3>05. Repeat an album or track</h3>
![Alt Text](https://media.giphy.com/media/4pqwXuuFjyEZiM6v72/giphy.gif)

- If there is a number 1 in the button, it means that the track will be played again at the end (`Repeat`).
- If the button is highlighted, but there are no numbers in it, it means that when the last track is played, the album will automatically start playing again from the first track.
- If the button is pale, it means that after playing the last track, the first one will not start.

<h1>Responsive</h1>
<strong>Phone:</strong>
![Alt Text](https://media.giphy.com/media/X8nWIy4uweQ8bWMKZD/giphy.gif)

<strong>The site is adapted for screen resolutions such as:</strong>
`@media 414px`
`@media 375px`
`@media 320px`

<strong>Desktop:</strong>
![Alt Text](https://media.giphy.com/media/AzLe0fp2wtW0rwuQX4/giphy.gif)
> I also decided to adapt the site to different screen heights so that there would be no problems with the display.

![Alt Text](https://media.giphy.com/media/51qP2B2ZHFGY8/giphy.gif)

<h1>Code</h1>
You can add your own tracks through the array.
Here it is:
```javascript
	const list = [
	{
		id: 1,
		class: 'jerryHerman',
		url: "music/JerryHerman_PutOnYourSundayClothes.mp3",
		author: "Jerry Herman",
		title: "Put On Your Sunday"
	},
	{
		id: 2,
		class: 'elvisPresley',
		url: "music/ElvisPresley_CantHelpFallingInLove.mp3",
		author: "Elvis Presley",
		title: "Can't Falling In Love"
	},
	{
		id: 3,
		class: 'royOrbison',
		url: "music/RoyOrbison_OhPrettyWoman.mp3",
		author: "Roy Orbison",
		title: "Oh, Pretty Woman"
	},
	{
		id: 4,
		class: 'frankSinatra',
		url: "music/FrankSinatra_ThatsLife.mp3",
		author: "Frank Sinatra",
		title: "That's Life"
	},
	{
		id: 5,
		class: 'jimCroce',
		url: "music/JimCroce_TimeInABottle.mp3",
		author: "Jim Croce",
		title: "Time In A Bottle"
	},
	{
		id: 6,
		class: 'redHotChiliPeppers',
		url: "music/RedHotChiliPeppers_DarkNecessities.mp3",
		author: "Red Hot Chili Peppers",
		title: "Dark Necessities"
	},
	{
		id: 7,
		class: 'stephaneGrappelli',
		url: "music/StephaneGrappelli_laMer.mp3",
		author: "Stephane Grappelli",
		title: "La Mer"
	},
	{
		id: 8,
		class: 'evanKing',
		url: "music/EvanKing_Overwatch.mp3",
		author: "Evan King",
		title: "Overwatch"
	},
	{
		id: 9,
		class: 'JR',
		url: "music/JR_SouthSac.mp3",
		author: "JR",
		title: "SouthSac"
	},
	{
		id: 10,
		class: 'theDeli',
		url: "music/TheDeli_Sun.mp3",
		author: "The Deli",
		title: "Sun"
	}
];
```
- It displays information about the track, changes the class for changing the image, and adds the track. 

- To add an image, you need to create a line in the mixin. The image class must be the same as in the array specified above.
```javascript
@mixin albumBgMix($albumBgName, $bgPath) {
	.#{$albumBgName} {
		.album:before {
			background-image: url(#{$bgPath});
		}
	}
}

@include albumBgMix('jerryHerman', 'https://rawcdn.githack.com/Kerthin/musicPlayer-templateSait/4df6444e97123a39d036f1f9b57973858f70bae5/docs/image/albumBg/jerryHerman.jpg');
@include albumBgMix('elvisPresley', 'https://rawcdn.githack.com/Kerthin/musicPlayer-templateSait/4df6444e97123a39d036f1f9b57973858f70bae5/docs/image/albumBg/elvisPresley.jpg');
@include albumBgMix('royOrbison', 'https://rawcdn.githack.com/Kerthin/musicPlayer-templateSait/4df6444e97123a39d036f1f9b57973858f70bae5/docs/image/albumBg/royOrbison.jpg');
@include albumBgMix('frankSinatra', 'https://rawcdn.githack.com/Kerthin/musicPlayer-templateSait/4df6444e97123a39d036f1f9b57973858f70bae5/docs/image/albumBg/frankSinatra.jpg');
@include albumBgMix('jimCroce', 'https://rawcdn.githack.com/Kerthin/musicPlayer-templateSait/4df6444e97123a39d036f1f9b57973858f70bae5/docs/image/albumBg/jimCroce.jpg');
@include albumBgMix('redHotChiliPeppers', 'https://rawcdn.githack.com/Kerthin/musicPlayer-templateSait/4df6444e97123a39d036f1f9b57973858f70bae5/docs/image/albumBg/redHotChiliPeppers.jpg');
@include albumBgMix('stephaneGrappelli', 'https://rawcdn.githack.com/Kerthin/musicPlayer-templateSait/4df6444e97123a39d036f1f9b57973858f70bae5/docs/image/albumBg/stephaneGrappelli.jpg');
@include albumBgMix('evanKing', 'https://rawcdn.githack.com/Kerthin/musicPlayer-templateSait/4df6444e97123a39d036f1f9b57973858f70bae5/docs/image/albumBg/evanKing.jpg');
@include albumBgMix('JR', 'https://rawcdn.githack.com/Kerthin/musicPlayer-templateSait/4df6444e97123a39d036f1f9b57973858f70bae5/docs/image/albumBg/JR.jpg');
@include albumBgMix('theDeli', 'https://rawcdn.githack.com/Kerthin/musicPlayer-templateSait/4df6444e97123a39d036f1f9b57973858f70bae5/docs/image/albumBg/theDeli.png');
```

<h1>GitHub</h1>
> You can also download this project from the GitHub repository.
{% github Kerthin/musicPlayer-templateSait %}
<a href="https://kerthin.github.io/musicPlayer-templateSait/" target="_blank"><h1>Full Page Demo</h1></a>

<h1>The End</h1>
Thank you for giving your precious time to my post. See you soon.
I can advise you to subscribe to my <a href="https://twitter.com/BelichenkoRoden"><strong>Twitter</strong></a>, I also post my work there.
<br/> 

<strong>Goodbye</strong>
![Alt Text](https://media.giphy.com/media/1iTQdNvyJyja66fS/giphy.gif)