DEV Community

loading...
Cover image for Awesome ๐ŸŽง Music Player + tutorial

Awesome ๐ŸŽง Music Player + tutorial

Roden
Frontend developer from Russia
ใƒป4 min read

Introduction

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.

Calculator

Music Player

Full Page Demo

Functional

01. Switching tracks

Alt Text

  • 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.

02. Switching tracks

Alt Text

  • While the music is playing, the animation of scrolling the image of the song will be started.

03. Rewind the song time

Alt Text

  • 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.

04. Random launch of a track

Alt Text

  • When you click the lower right button, the tracks will start in random order, and not in order as specified in the array.

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

05. Repeat an album or track

Alt Text

  • 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.

Responsive

Phone:
Alt Text

The site is adapted for screen resolutions such as:
@media 414px
@media 375px
@media 320px

Desktop:
Alt Text

I also decided to adapt the site to different screen heights so that there would be no problems with the display.

Alt Text

Code

You can add your own tracks through the array.
Here it is:

    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"
    }
];
Enter fullscreen mode Exit fullscreen mode
  • 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.

@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');
Enter fullscreen mode Exit fullscreen mode

GitHub

You can also download this project from the GitHub repository.

GitHub logo Kerthin / musicPlayer-templateSait

A music player made in the style of neomorphism.

Kerthin logo

Build Status completion Status Version
Version Size Version

Description

The project is a working music player made in the style of neomorphism.

  • In the player it is possible:

    • to switch tracks;
    • rewind a track for 5 seconds forward and back;
    • use the music bar to scroll the track in more detail;
    • to enable repeat track;
    • to enable repeat playlist;
    • you can enable random track launch mode.
  • Demo

Use technology.

The following technologies were used to create this project:

Task-Manager

Software platform

Preprocessors

Package manager

Languages


Plugins

To develop the project through gulp, I used the following types of NPM plugins:

Plugin Status Description
gulp-sourcemaps gulp-sourcemaps-status Intended for generation of css source maps which will be necessary at debugging of a code.
gulp-imagemin gulp-imagemin-status Minify PNG, JPEG, GIF and SVG images with imagemin
gulp-autoprefixer gulp-autoprefixer-status Prefix CSS with Autoprefixer
imagemin-pngquant imagemin-pngquant-status Pngquant imagemin plugin
gulp-uglify gulp-uglify-status Minify JavaScript with UglifyJS3.
gulp-rigger gulp-rigger-status Rigger is a build time include engine for Javascript,
โ€ฆ



Full Page Demo


The End

Thank you for giving your precious time to my post. See you soon.
I can advise you to subscribe to my Twitter, I also post my work there.

Goodbye
Alt Text

Discussion (15)

Collapse
madza profile image
Madza • Edited

Looks really good ๐Ÿ‘๐Ÿ˜‰
Also made a player, with tags and playlist a while ago ๐Ÿ˜ƒ๐Ÿ˜ƒ

Collapse
kerthin profile image
Roden Author

Cool. Your player is much better in terms of functionality than mine. ๐Ÿ‘

Collapse
madza profile image
Madza • Edited

If you want to look behind building principles, I also made an open source package of it, so community can benefit as well ๐Ÿ˜‰ Plus I added search functionality, comes in handy if there are a lot of tracks ๐Ÿ˜ƒ๐Ÿ˜ƒ

Thread Thread
kerthin profile image
Roden Author

Thanks. I will definitely use it. I have already planned for the future that I want to make a more functional player, and your audio-player package will help me a lot in this.

Collapse
chris00walker profile image
Christopher Walker

Great aesthetics.

Collapse
kerthin profile image
Roden Author

Thank you, the aesthetics of neomorphism has always impressed me.

Collapse
hugekontrast profile image
Ashish Khare๐Ÿ˜Ž

Great.

Collapse
kerthin profile image
Roden Author

Thanks ๐ŸŽ‰

Collapse
shreyazz profile image
Shreyas Pahune

The neumorphism design looks amazing!

Collapse
vladimirschneider profile image
vladimirschneider

The music is great ๐ŸŽถ
Your music player awesome too ๐Ÿ˜Š

Collapse
millsdar profile image
millsdar

It looks very nice. Nice design, dude.

Collapse
kerthin profile image
Roden Author

Thank you for your high rating

Collapse
shreyazz profile image
Shreyas Pahune

The neumorphism design looks amazing!

Collapse
shreyazz profile image
Shreyas Pahune

The neumorphism design looks amazing

Collapse
kerthin profile image
Roden Author

Thanks ๐ŸŽ‰