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
2
3
4
5
VISITORS
Online Users: 12
Recent Members: carfaoui, Ali7hry, alexnicola, Adam20, Prashanthcs11
advertisement 2