Create an Account

It's free and you have access to premium codes!

Password must be a minimum length of 8, with at least one uppercase, one lowercase, one number, and one special character.

Login

Welcome back! Please login to your account.

Recover Account

Don't worry, we'll send you a message to help you to recover your acount.

Message Received!

We will get back to you as soon as possible.

Account Created!

Please check your email for instructions to activate your account.

All
Hello
Popular Sites
JavaScript Best Codes
Html5 Free Codes
Html Best Codes
Php Best Codes
Developer Codes
Free Frontend
Social Media
Twitter
Instagram
Support
Contact Us
About Html Free Codes
Not a member? Sign Up

Music Player

Written by @m_k_amin 10 December 2012

Using music on websites will create more excitement and attract more attention from your website visitors. In the following code, in addition to just playing music, there is a beautiful music player with the ability to increase or decrease the volume, stop or play music, as well as the ability to download music. This code is especially useful on websites that put music for download because users first want to listen to the music and download it if they wish. A beautiful music bar has been also included in this code, which moves when the music is played.

Code Snippet:

                                                
                                                <!-- this script is provided by https://www.htmlfreecode.com coded by: Kerixa Inc. -->
<style>
/* Global Reset */
* {
    font-family: 'Allerta', arial, Tahoma;
    box-sizing: border-box;
}

body {
    background: linear-gradient(to left, #7700aa, #8800ff);
    text-align: center;
    color: #fff;
}

h3 {
    text-shadow: 1px 1px 1px #fff;
}
/* Start  styling the page */
.container-audio {
    width: 66%;
    height: auto;
    padding: 20px;
    border-radius: 5px;
    background-color: #eee;
    color: #444;
    margin: 20px auto;
    overflow: hidden;
}

audio {
    width: 100%;
}

audio:nth-child(2), audio:nth-child(4), audio:nth-child(6) {
    margin: 0;
}

.container-audio .colum1 {
    width: 23px;
    height: 5em;
    border-radius: 5px;
    margin: 0 10px 0 0;
    display: inline-block;
    position: relative;
}

.container-audio .colum1:last-child {
    margin: 0;
}

.container-audio .colum1 .row {
    width: 100%;
    height: 100%;
    border-radius: 5px;
    background: linear-gradient(to up, #7700aa, #8800ff);
    position: absolute;
    -webkit-animation: Rofa 10s infinite ease-in-out;
    animation: Rofa 10s infinite ease-in-out;
    bottom: 0;
}

.container-audio .colum1:nth-of-type(1) .row {
    -webkit-animation-delay: 3.99s;
    animation-delay: 3.99s;
}

.container-audio .colum1:nth-of-type(2) .row {
    -webkit-animation-delay: 3.80s;
    animation-delay: 3.80s;
}

.container-audio .colum1:nth-of-type(3) .row {
    -webkit-animation-delay: 3.70s;
    animation-delay: 3.70s;
}

.container-audio .colum1:nth-of-type(4) .row {
    -webkit-animation-delay: 3.60s;
    animation-delay: 3.60s;
}

.container-audio .colum1:nth-of-type(5) .row {
    -webkit-animation-delay: 3.50s;
    animation-delay: 3.50s;
}

.container-audio .colum1:nth-of-type(6) .row {
    -webkit-animation-delay: 3.40s;
    animation-delay: 3.40s;
}

.container-audio .colum1:nth-of-type(7) .row {
    -webkit-animation-delay: 3.30s;
    animation-delay: 3.30s;
}

.container-audio .colum1:nth-of-type(8) .row {
    -webkit-animation-delay: 3.20s;
    animation-delay: 3.20s;
}

.container-audio .colum1:nth-of-type(9) .row {
    -webkit-animation-delay: 3.10s;
    animation-delay: 3.10s;
}

.container-audio .colum1:nth-of-type(10) .row {
    -webkit-animation-delay: 2.1s;
    animation-delay: 2.1s;
}

.container-audio .colum1:nth-of-type(11) .row {
    -webkit-animation-delay: 2.1s;
    animation-delay: 2.1s;
}

.container-audio .colum1:nth-of-type(12) .row {
    -webkit-animation-delay: 2.10s;
    animation-delay: 2.10s;
}

.container-audio .colum1:nth-of-type(13) .row {
    -webkit-animation-delay: 2.20s;
    animation-delay: 2.20s;
}

.container-audio .colum1:nth-of-type(14) .row {
    -webkit-animation-delay: 1.30s;
    animation-delay: 1.30s;
}

.container-audio .colum1:nth-of-type(15) .row {
    -webkit-animation-delay: 1.40s;
    animation-delay: 1.40s;
}

.container-audio .colum1:nth-of-type(16) .row {
    -webkit-animation-delay: 1.50s;
    animation-delay: 1.50s;
}

.container-audio .colum1:nth-of-type(17) .row {
    -webkit-animation-delay: 1.60s;
    animation-delay: 1.60s;
}

.container-audio .colum1:nth-of-type(18) .row {
    -webkit-animation-delay: 1.70s;
    animation-delay: 1.70s;
}

.container-audio .colum1:nth-of-type(19) .row {
    -webkit-animation-delay: 1.80s;
    animation-delay: 1.80s;
}

.container-audio .colum1:nth-of-type(20) .row {
    -webkit-animation-delay: 2s;
    animation-delay: 2s;
}

@-webkit-keyframes Rofa {
0% {
    height: 0%;
    transform: translatey(0);
    background-color: yellow;
}

5% {
    height: 100%;
    transform: translatey(15px);
    background-color: fuchsia;
}

10% {
    height: 90%;
    transform: translatey(0);
    -webkit-transform: translatey(0);
    background-color: bisque;
}

15% {
    height: 80%;
    transform: translatey(0);
    background-color: cornflowerblue;
}

20% {
    height: 70%;
    transform: translatey(0);
    background-color: cornflowerblue;
}

25% {
    height: 0%;
    transform: translatey(0);
    background-color: cornflowerblue;
}

30% {
    height: 70%;
    transform: translatey(0);
    background-color: cornflowerblue;
}

35% {
    height: 0%;
    transform: translatey(0);
    background-color: cornflowerblue;
}

40% {
    height: 60%;
    transform: translatey(0);
    background-color: cornflowerblue;
}

45% {
    height: 0%;
    transform: translatey(0);
    background-color: cornflowerblue;
}

50% {
    height: 50%;
    transform: translatey(0);
    background-color: cornflowerblue;
}

55% {
    height: 0%;
    transform: translatey(0);
    background-color: cornflowerblue;
}

60% {
    height: 40%;
    transform: translatey(0);
    background-color: cornflowerblue;
}

65% {
    height: 0%;
    transform: translatey(0);
    background-color: cornflowerblue;
}

70% {
    height: 30%;
    transform: translatey(0);
    background-color: cornflowerblue;
}

75% {
    height: 0%;
    transform: translatey(0);
    background-color: cornflowerblue;
}

80% {
    height: 20%;
    transform: translatey(0);
    background-color: cornflowerblue;
}

85% {
    height: 0%;
    transform: translatey(0);
    background-color: cornflowerblue;
}

90% {
    height: 10%;
    transform: translatey(0);
    background-color: cornflowerblue;
}

95% {
    height: 5%;
    transform: translatey(0);
    background-color: cornflowerblue;
}

100% {
    height: 0;
    transform: translatey(0);
    background-color: cornflowerblue;
}
}
</style>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link href='https://fonts.googleapis.com/css?family=Allerta' rel='stylesheet'>
<h2>Wellcome to Music Player</h2>
<div class="container-audio">
    <audio controls  loop autoplay>
                <source src="http://www.htmlfreecode.com/files/track601.mp3" type="audio/ogg">
                Your browser dose not Support the audio Tag
    </audio>
</div>
<div class="container-audio">
    <div class="colum1">
        <div class="row"></div>
    </div>
    <div class="colum1">
        <div class="row"></div>
    </div>
    <div class="colum1">
        <div class="row"></div>
    </div>
    <div class="colum1">
        <div class="row"></div>
    </div>
    <div class="colum1">
        <div class="row"></div>
    </div>
    <div class="colum1">
        <div class="row"></div>
    </div>
    <div class="colum1">
        <div class="row"></div>
    </div>
    <div class="colum1">
        <div class="row"></div>
    </div>
    <div class="colum1">
        <div class="row"></div>
    </div>
    <div class="colum1">
        <div class="row"></div>
    </div>
    <div class="colum1">
        <div class="row"></div>
    </div>
    <div class="colum1">
        <div class="row"></div>
    </div>
    <div class="colum1">
        <div class="row"></div>
    </div>
    <div class="colum1">
        <div class="row"></div>
    </div>
    <div class="colum1">
        <div class="row"></div>
    </div>
    <div class="colum1">
        <div class="row"></div>
    </div>
    <div class="colum1">
        <div class="row"></div>
    </div>
    <div class="colum1">
        <div class="row"></div>
    </div>
    <div class="colum1">
        <div class="row"></div>
    </div>
    <div class="colum1">
        <div class="row"></div>
    </div>
    <div class="colum1">
        <div class="row"></div>
    </div>
    <div class="colum1">
        <div class="row"></div>
    </div>
    <div class="colum1">
        <div class="row"></div>
    </div>
</div>
<a target='_blank' href='https://www.htmlfreecode.com' style='font-size: 8pt; text-decoration: none'>Html Free Codes</a>

Example:

About @m_k_amin

This user is pending a biography.

M

Comments

Here you can leave us commments. Let us know what you think about this code tutorial!

0 / 300
TRENDING POST
1
Sliding Radio Button with Emojis
2
HTML Dynamic Todo List
3
Numeric List Icons
4
HTML Card List
5
3D HTML Folded List
VISITORS
Online Users: 12
Recent Members: carfaoui, Ali7hry, alexnicola, Adam20, Prashanthcs11
advertisement 2