Make Your Own Ringtone Web App with full control using Javascript, HTML5 ,Css3.

we have make a ringtone music player using javascript.All controls is in music player like play,pause.

source code are here.

CSS CODE

______________________

margin:0px;

padding:0px;

box-sizeing:border-box;

}

h3,h4,h5,h6{

padding:10px;

}

body{

font-family: 'Nunito', sans-serif!important;

background-color: rgb(85 88 229);

color: rgb(255 255 255);

}

.myNavItem>ul{

padding:10px;

}

nav{

padding:10px;

}

.searchBar{

padding:2rem;

}

input{

border-radius: 37px!important;

}

header{

background-image: linear-gradient(to right, rgb(218 34 255 / 20%), rgb(151 51 238 / 45%));

color: rgb(255 255 255);

position: sticky;

top: 0px;

z-index: 999999999;

backdrop-filter: blur(15px);

border-bottom: 1px solid rgb(255 255 255 / 49%);

}

nav{

text-align:center;

}

ul{

list-style:none;

}

ul>li{

display:inline;

margin:10px 20px;

}

ul>li>a{

font-size:18px!important;

color:white;

}

audio{

padding: 15px 14px;

text-align: center;

position: relative;

margin: 0 auto;

display: none;

}

.cntrls>a{

margin: 10px;

padding: 10px;

font-size: 23px;

color:black;

cursor:pointer;

}

.main{

margin: 10px 20px;

padding: 10px;

background-color: rgb(92 123 231);

box-shadow: 0px 9px 47px 12px #8080801c;

border-radius: 17px;

}

.blur{

back-filter:blur(20px);

}

.rinImg{

width: 100%!important;

border-radius: 100%;

object-fit: cover;

height: 191px;

}

.anim{

animation:round 4s infinite;

}

.whatstapp {

position: fixed;

width: 6%!important;

right: 10px;

bottom: 39px;

}

.logo>img{

width: 132px;

padding: 10px;

margin-top: 2px;

}

footer{

border-top: 1px solid rgb(255 255 255 / 49%);

}

@media(max-width:1200px){

ul{

display: inline-flex;

width: 100%;

overflow: scroll!important;

scroll-behavior: smooth;

-webkit-overflow-scrolling: touch;

overflow: auto;

scroll-snap-align: start;

flex-shrink: 1;

transform-origin: center center;

scroll-snap-type: x mandatory;

text-align: center;

}

ul>li{

display: inline;

border: 1px solid rgb(211 211 211 / 0%);

padding: 15px;

margin: 10px 10px;

box-shadow: 0 1px 3px rgb(36 39 44 / 15%);

border-radius: 2px;

line-height: 13px;

box-shadow: 0px 25px 48px 23px #80808017;

border-radius: 11px;

background-image: linear-gradient(to right, rgb(106, 17, 203) 0%, rgb(37, 117, 252) 100%);

}

ul>li>a{

line-height: 29px;

color:white;

}

.toneData{

display:flex;

}

.col-md-3{

display:flex;

}

h4{

padding: 10px 39px;

margin: 0 auto;

margin-left: 69px;

}

.rinImg{

width: 20%!important;

border-radius: 100%;

object-fit: cover;

height: 74px;

position: absolute;

}

.main {

padding:15px;

width: 100%;

}

.col-md-6{

width:50%;

float:left;

}

.cntrls>a {

padding: 20px;

font-size: 23px;

position: relative;

margin: 0 auto;

left: 31px;

}

.whatstapp{

position: fixed;

width: 16%!important;

right: 10px;

bottom: 39px;

}

@keyframes round {

from{

transform: rotate(0deg);

}

to{

transform: rotate(359deg);

}

......................................................................

INDEX.HTML CODE

___________________

<!DOCTYPE html>

<html lang="">

<head>

<meta charset="utf-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1">

<title>R-Tune App</title>

<link rel="icon" href="images/logo.png" type="image/gif" sizes="16x16">

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

<link href="style.css" rel="stylesheet">

<link rel="preconnect" href="https://fonts.gstatic.com">

<link href="https://fonts.googleapis.com/css2?family=Nunito:wght@300&display=swap" rel="stylesheet">

</head>

<body>

<header>

<div class="container">

<div class="row">

<div class="col-md-6">

<div class="logo">

<img src="images/logo.png">

</div>

<div class="col-md-6">

<div class="searchBar">

<input type="Search" value="" placeholder="Search your movie name for ringtone" id="myInput" name="" class="form-control">

</div>

</header>

<nav>

<div class="container">

<div class="row">

<div class="col-md-12">

<div class="myNavItem">

<ul>

<li>

<a href="#album">Ringtones By Albums</a>

</li>

<li>

<a href="#movie">Ringtones By Movies</a>

</li>

<li>

<a href="#theme">Ringtones By Themes</a>

</li>

</ul>

</div>

</nav>

<section class="movies" id="movie">

<div class="container">

<div class="row">

<div class="col-md-12">

<h1><strong>Movies Ringtone</strong></h1>

<h3 class="total01">Total Ringtone: </h3>

</div>

</section>

<section class="albums" id="album">

<div class="container">

<div class="row">

<div class="col-md-12">

<h1><strong>Albums Ringtone</strong></h1>

<h3 class="total02">Total Ringtone: </h3>

</div>

</section>

<section class="music" id="theme">

<div class="container">

<div class="row">

<div class="col-md-12">

<h1><strong>Themes Ringtone</strong></h1>

<h3 class="total03">Total Ringtone: </h3>

</div>

</section>

<h2 class="default"><strong></strong></h2>

<footer>

<div class="container">

<div class="row">

<div class="col-md-12">

<div class="footer_content text-center">

<h1><strong>Download The Best Ringtones </strong></h1>

<p>Thanx for visit</p>

<span><strong>Made By Avenue Design (Ayushmann)</strong></span>

</div>

</footer>

<script src="app.js"></script>

</body>

</html>

...................................................................................

JAVASCRIPT CODE

____________________________________

//START R-TONE APP

alert("Refrash the page after 15 min")

//CREATE OBJECT MOVIES

var ringtonsData =[{

rName :"Kabir Singh Theme",

rImg:"images/kabirsingh01.jpg",

rAudio:"tones/kabir01.mp3",

id01:"kabir01",

id02:"movieimg01",

evt:"playMusic(event,'kabir01','movieimg01')"

},{

rName :"Kabir Singh flute",

rImg:"images/kabir_flute.jpg",

rAudio:"tones/kabir_singh_flute.mp3",

id01:"kabir02",

id02:"movieimg02",

evt:"playMusic(event,'kabir02','movieimg02')"

},{

rName :"Tujhe kitna Chahne",

rImg:"images/tujheKitna.jpg",

rAudio:"tones/tujhe_kitna_chahne.mp3",

id01:"kabir03",

id02:"movieimg03",

evt:"playMusic(event,'kabir03','movieimg03')"

},{

rName :"Tera Ban Jaunga",

rImg:"images/terabanjaunga.jpg",

rAudio:"tones/tera_ban_jauga.mp3",

id01:"kabir04",

id02:"movieimg04",

evt:"playMusic(event,'kabir04','movieimg04')"

},{

rName :"Kaise Hua",

rImg:"images/kaisehua.jpg",

rAudio:"tones/kaise_hua_ringtone.mp3",

id01:"kabir05",

id02:"movieimg05",

evt:"playMusic(event,'kabir05','movieimg05')"

},{

rName :"Tere Bin Ab Na..",

rImg:"images/terebinabna.jpg",

rAudio:"tones/terebin.mp3",

id01:"kabir06",

id02:"movieimg06",

evt:"playMusic(event,'kabir06','movieimg06')"

},{

rName :"Kaise Hua",

rImg:"images/Kaisehua.jpg",

rAudio:"tones/kaise_hua_ringtone.mp3",

id01:"kabir07",

id02:"movieimg07",

evt:"playMusic(event,'kabir07','movieimg07')"

},]

//CREATE OBJECT ALBUM

var ringtonsAlbum =[{

rName :"Vaaste (male)",

rImg:"images/vaaste.png",

rAudio:"tones/vaaste_love_song.mp3",

id01:"album01",

id02:'albumimg01',

evt:"playMusic(event,'album01','albumimg01')"

},{

rName :"Romantic Ringtone",

rImg:"images/romantic.jpg",

rAudio:"tones/romantic__ringtone.mp3",

id01:"album02",

id02:'albumimg02',

evt:"playMusic(event,'album02','albumimg02')"

},{

rName :"Pal Pal Dil K Pass",

rImg:"images/palpal.jpg",

rAudio:"tones/pal_pal_dil_k_pass.mp3",

id01:"album03",

id02:'albumimg03',

evt:"playMusic(event,'album03','albumimg03')"

},{

rName :"Meri Aashiqui",

rImg:"images/meri_ashiqui.jpg",

rAudio:"tones/meri_aashiqui.mp3",

id01:"album04",

id02:'albumimg04',

evt:"playMusic(event,'album04','albumimg04')"

},{

rName :"Taaron ke Shehar",

rImg:"images/tarokashahar.jpg",

rAudio:"tones/taaron_ke_shehar.mp3",

id01:"album05",

id02:'albumimg05',

evt:"playMusic(event,'album05','albumimg05')"

},{

rName :"Lut Gaye",

rImg:"images/lut_gaye.jpg",

rAudio:"tones/lut_gaye.mp3",

id01:"album06",

id02:'albumimg06',

evt:"playMusic(event,'album06','albumimg06')"

},]

//CREATE OBJECT THEMES

var ringtonstheme =[{

rName :"Music Box Tone",

rImg:"images/music_box.jpg",

rAudio:"tones/music_box_tone.mp3",

id01:"theme01",

id02:'themeimg01',

evt:"playMusic(event,'theme01','themeimg01')",

},{

rName :"Soft Theme",

rImg:"images/music_theme.jpg",

rAudio:"tones/theme.mp3",

id01:"theme02",

id02:'themeimg02',

evt:"playMusic(event,'theme02','themeimg02')"

},{

rName :"wkuk theme",

rImg:"images/crop.jpg",

rAudio:"tones/wkuk_theme_song.mp3",

id01:"theme03",

id02:'themeimg03',

evt:"playMusic(event,'theme03','themeimg03')"

},{

rName :"Super Mario Theme",

rImg:"images/super_mario_theme.jpg",

rAudio:"tones/super_mario_theme.mp3",

id01:"theme04",

id02:'themeimg04',

evt:"playMusic(event,'theme04','themeimg04')"

},{

rName :"Theme F Flm Ordinary",

rImg:"images/romantic-theme-fz11.jpg",

rAudio:"tones/theme_f_flm_ordinary.mp3",

id01:"theme05",

id02:'themeimg05',

evt:"playMusic(event,'theme05','themeimg05')"

},{

rName :"Run Theme",

rImg:"images/run.jpg",

rAudio:"tones/run_theme.mp3",

id01:"theme06",

id02:'themeimg06',

evt:"playMusic(event,'theme06','themeimg06')"

},]

//SHOWING ITEMS LENGTH

document.querySelector('.total01').innerHTML+=`

${ringtonsData.length}

document.querySelector('.total02').innerHTML+=`

${ringtonsAlbum.length}

document.querySelector('.total03').innerHTML+=`

${ringtonsAlbum.length}

//INTRIGATION WITH JASON OBJECTS ADD VALUE

//ADD VALUE IN MOVIES SECTION

for(var i in ringtonsData){

document.querySelector('.movies>.container>.row').innerHTML+=`

<div class="col-md-3">

<div class="main">

<div class="toneData text-center">

<img src="${ringtonsData[i].rImg}" class="rinImg" id="${ringtonsData[i].id02}">

<h4>${ringtonsData[i].rName}</h4>

</div>

<div class="data">

<audio src="${ringtonsData[i].rAudio}" class="audio" id="${ringtonsData[i].id01}" controls></audio>

</div>

<div class="cntrls text-center">

<a class="pause" onclick="pauseSong()"><i class="fas fa-pause"></i></a>

<a class="play" onclick="${ringtonsData[i].evt}"><i class="fas fa-play"></i></a>

<a href="${ringtonsData[i].rAudio}" class="download" download><i class="far fa-arrow-alt-circle-down"></i></a>

</div>

}

//ADD VALUE IN ALBUMS SECTION

for(var i in ringtonsAlbum){

document.querySelector('.albums>.container>.row').innerHTML+=`

<div class="col-md-3">

<div class="main">

<div class="toneData text-center">

<img src="${ringtonsAlbum[i].rImg}" class="rinImg" id="${ringtonsAlbum[i].id02}">

<h4>${ringtonsAlbum[i].rName}</h4>

</div>

<div class="data">

<audio src="${ringtonsAlbum[i].rAudio}" class="audio" id="${ringtonsAlbum[i].id01}" controls></audio>

</div>

<div class="cntrls text-center">

<a class="pause" onclick="pauseSong()"><i class="fas fa-pause"></i></a>

<a class="play" onclick="${ringtonsAlbum[i].evt}"><i class="fas fa-play"></i></a>

<a href="${ringtonsAlbum[i].rAudio}" class="download" download><i class="far fa-arrow-alt-circle-down"></i></a>

</div>

}

//ADD VALUE IN THEMES SECTION

for(var i in ringtonstheme){

document.querySelector('.music>.container>.row').innerHTML+=`

<div class="col-md-3">

<div class="main">

<div class="toneData text-center">

<img src="${ringtonstheme[i].rImg}" class="rinImg" id="${ringtonstheme[i].id02}">

<h4>${ringtonstheme[i].rName}</h4>

</div>

<div class="data">

<audio src="${ringtonstheme[i].rAudio}" class="audio" id="${ringtonstheme[i].id01}" controls></audio>

</div>

<div class="cntrls text-center">

<a class="pause" onclick="pauseSong()"><i class="fas fa-pause"></i></a>

<a class="play" onclick="${ringtonstheme[i].evt}"><i class="fas fa-play"></i></a>

<a href="${ringtonstheme[i].rAudio}" class="download" download><i class="far fa-arrow-alt-circle-down"></i></a>

</div>

}

//CODE FOR PLAY SONG

playMusic=(evt,playrRigtone,circle)=>{

var audio = document.querySelector('audio');

var play = document.querySelector('.play');

for(var i in play){

}

document.getElementById(playrRigtone).play();

document.getElementById(circle).classList.add('anim');

//CODE FOR PAUSE SONG

pauseSong = () => {

var audio = document.getElementsByClassName('audio');

for (var i in audio) {

audio[i].pause();

document.getElementById(circle).classList.remove('anim');

}

//SEARCH FILTER WITH FULL SECTION

var input = document.getElementById('myInput').onkeyup = function(){

var i,input,filter,section,txtValue;

input = document.getElementById('myInput');

filter = input.value.toUpperCase();

section = document.querySelectorAll('section');

for(var i in section){

if(section[i]){

txtValue = section[i].textContent;

if(txtValue.toUpperCase().indexOf(filter) > -1){

section[i].style.display = "";

document.querySelector('.default').innerHTML=`Nothing Items founds`;

}

else{

section[i].style.display = "none";

document.querySelector('.default').innerHTML=`Nothing Items founds`;

}

__________________________________________________

Thursday, April 29, 2021

Make Your Own Ringtone Web App with full control using Javascript, HTML5 ,Css3.