GADGET MP3 Player2

M DZAKY AFRIZAN MP3

CODE HTML :
 <link crossorigin="anonymous" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=VT323" rel="stylesheet" />
<div id="mp3Player">
<div id="lcd">
M DZAKY AFRIZAN MP3</div>
<audio id="audio">
  <source id="source" src="" type="audio/mpeg"></source>
  </audio>
  <br />
<div class="controls">
<button id="back" onclick="backAudio()"><i aria-hidden="true" class="fa fa-step-backward"></i></button>
    <button id="play" onclick="playAudio()"><i aria-hidden="true" class="fa fa-play"></i></button>
    <button id="pause" onclick="pauseAudio()"><i aria-hidden="true" class="fa fa-pause"></i></button>
    <button id="next" onclick="nextAudio()"><i aria-hidden="true" class="fa fa-step-forward"></i></button>
  </div>
</div>


CSS
*{
    box-sizing: border-box;
    outline: none;
}

#mp3Player{
  width:100%;
  max-width:500px;
  margin: 50px auto;
}

#lcd{
  width:100%;
  height: 60px;
  font-family: 'VT323', monospace;
  background-image: url(https://www.toptal.com/designers/subtlepatterns/patterns/px_by_Gre3g.png);
  color: #00ff00;
  font-size: 2em;
  padding: 10px;
  overflow: hidden;
  border: 3px ridge #8d9da6;
  box-shadow: inset 0px 0px 10px black;
  border-bottom: 0px;
}

#lcd p{
  margin: 0px;
  paddding: 0px;
}

.controls{
  text-align: center;
  padding: 10px;
  background-color: grey;
  border-radius: 5px;
  border-top-right-radius: 0px;
  border-top-left-radius: 0px;
  border: 2px groove #8d9da6;

  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#cedce7+0,596a72+100;Grey+3D+%231 */
background: #cedce7; /* Old browsers */
background: -moz-linear-gradient(top, #cedce7 0%, #596a72 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #cedce7 0%,#596a72 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #cedce7 0%,#596a72 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cedce7', endColorstr='#596a72',GradientType=0 ); /* IE6-9 */
}

.controls button{
  height: 35px;
  width: 35px;
  cursor: pointer;
  border-radius:100px;
  margin: 0px 5px;
  border: 1px solid #c0d3e2;
  color: #2c3236;
  box-shadow: 0px 1px 1px 0px #404040;
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#dce8f4+0,7c8d9e+100 */
background: #dce8f4; /* Old browsers */
background: -moz-linear-gradient(top, #dce8f4 0%, #7c8d9e 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #dce8f4 0%,#7c8d9e 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #dce8f4 0%,#7c8d9e 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#dce8f4', endColorstr='#7c8d9e',GradientType=0 ); /* IE6-9 */
}

.controls button:hover{
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#e5f1fc+0,b1c8e0+100 */
background: #e5f1fc; /* Old browsers */
background: -moz-linear-gradient(top, #e5f1fc 0%, #b1c8e0 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #e5f1fc 0%,#b1c8e0 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #e5f1fc 0%,#b1c8e0 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e5f1fc', endColorstr='#b1c8e0',GradientType=0 ); /* IE6-9 */
}

.controls button:active{
  background: #84949d;
  box-shadow: 0px 0px 0px;
  border: 1px solid #454d52;
}

JS
var songs = ["https://sites.google.com/site/dzakynetmusik/audio/BURUNG%20DOANG%20VERSI%20AKUSTIK%20Mp3", "https://sites.google.com/site/dzakynetmusik/audio/AKUSTIK%20TEBILIN%20BESIDANG%20-%20MP3","https://sites.google.com/site/dzakynetmusik/audio/BAU%20KENYAMEN","https://sites.google.com/site/dzakynetmusik/audio/BERINAQ%20TEREQ","https://sites.google.com/site/dzakynetmusik/audio/LAGU%20RUDAT%201","https://sites.google.com/site/dzakynetmusik/audio/SELINGKUH%20TKTK%2005","https://sites.google.com/site/dzakynetmusik/audio/SUBAHNALE"];

var currentSong = 0;

var audio = document.getElementById("audio");

function backAudio(){
  audio.pause();
  currentSong = currentSong - 1;
  if (currentSong < 0){
      currentSong = songs.length - 1;
  };
  audio.src = songs[currentSong];
  audio.play();
  mostrar();
}

function playAudio() {
   audio.src = songs[currentSong];
   audio.play();
   mostrar();
}

function pauseAudio() {
    audio.pause();
}

function nextAudio() {
    audio.pause();
    currentSong = currentSong + 1;
    if (currentSong > songs.length - 1){
      currentSong = 0;
    };
    audio.src = songs[currentSong];
    audio.play();
    mostrar();
}

function mostrar(){
  var texto = songs[currentSong];
  var texto = decodeURIComponent(texto)
  var pos = texto.lastIndexOf('/');
  var texto = texto.substring(pos+1);
  lcd.textContent = texto.replace('.mp3', '');
 }

function limpiaNombre(texto){

}

Share this

Author : admin

Related Posts