Play List

by Lazaro Contreras

HTML

<section>
  <div id="o1"></div>
  <div id="o2"></div>
  <div id="o3"></div>
</section>
<canvas class="visualizer" width="1000" height="300"></canvas>
<ul id="list"></ul>
<input type="file" id="files" name="files[]" multiple />
<audio autoplay></audio>
<div class="cargaBack">
  <div class="carga"></div>
</div>
<div class="content">
  <button class="play">Pause</button>
  <button class="prev">Prev</button>
  <button class="next">Next</button>
  <div class="volumeBack">
    <div class="volume"></div>
  </div>

CSS

* {
  margin: 0;
  padding: 0;
  overflow: hidden
}

#list {
  /*position: fixed;*/
  display: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin-top: 10px;
  margin-bottom: 150px;
  /*margin-left: 200px;*/
  background: #555;
  overflow: auto;
  z-index: 10;
}

a {
  display: block;
  cursor: pointer;
  background: #555;
  border-bottom: 2px solid #444;
  font-family: helvetica;
  height: 40px;
  color: white;
  overflow: hidden;
  padding: 10px;
  box-sizing: border-box;
  z-index: 10;
}

.a {
  border-left: 3px solid #0074d9;
  background: #444;
  z-index: 10;
}

a:hover {
  background: #666;
}

body {
  background: black;
}

input {
  position: fixed;
  top: 0;
  right: 0;
  /*background: rgb(76, 142, 250);*/
  border: 0;
  box-sizing: border-box;
  color: #fff;
  cursor: pointer;
  height: 45px;
}

section {
  position: fixed;
  display: none;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin-top: 45px;
  margin-bottom: 150px;
}

#o1 {
  position: absolute;
  display: block;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100px;
  width: 100px;
  background: #333;
  margin: auto 50px;
  border-radius: 50%;
}

#o2 {
  position: absolute;
  display: block;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100px;
  width: 100px;
  margin: auto 50px;
  background: #0074d9;
  border-radius: 50%;
}

#o3 {
  position: absolute;
  display: block;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100px;
  width: 100px;
  margin: auto 50px;
  background: #fff;
  border-radius: 50%;
}

/*carga*/

div.carga {
  position: absolute;
  display: block;
  bottom: 0;
  left: 0;
  right: 0;
  width: 0;
  height: 10px;
  background-color: #0074d9;
}

div.cargaBack {
  position: absolute;
  display: block;
  bottom: 140px;
  left: 0;
  right: 0;
  width: 100%;
  height: 10px;
  background-color: #cdcdcd;
  z-index: 10;
}

/*content*/

.content {
  position: fixed;
  display: block;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height:...

JavaScript

var audio = document.querySelector('audio');
audio.onended = function() {
  var a = document.getElementsByTagName('a');
  var pista = document.querySelector('.a');
  var lista = document.querySelector('#list');
  var pistas = a.length - 1;
  console.log(index(pista));
  if (index(pista) < pistas) {
    pista.className = '';
    var i = index(pista) + 1;
    a[i].click();
    a[i].className = 'a';
  } else {
    a[pistas].className = '';
    a[0].click();
    a[0].className = 'a';
  }
}
var play = document.querySelector('.play');
var next = document.querySelector('.next');
var prev = document.querySelector('.prev');
var barr = document.querySelector('.cargaBack');
audio.ontimeupdate = function() {
  var carga = document.querySelector('.carga');
  var total = (audio.currentTime * 100 / audio.duration);
  if (total > 0 & total < 100) {
    carga.style.width = total + '%';
  } else if (total <= 0) {
    carga.style.width = 0 + '%';
  } else {
    carga.style.width = 100 + '%';
  }
}
barr.onmousedown = function() {
  MoveOn()
}
play.onclick = function() {
  if (audio.paused) {
    audio.play()
    play.innerHTML = 'Pause';
  } else {
    audio.pause()
    play.innerHTML = 'Play';
  }
}
next.onclick = function() {
  var a = document.getElementsByTagName('a');
  var pista = document.querySelector('.a');
  var lista = document.querySelector('#list');
  var pistas = a.length - 1;
  console.log(index(pista));
  if (index(pista) < pistas) {
    pista.className = '';
    var i = index(pista) + 1;
    a[i].click();
    a[i].className = 'a';
  } else {
    a[pistas].className = '';
    a[0].click();
    a[0].className = 'a';
  }
}
prev.onclick = function() {
  var a = document.getElementsByTagName('a');
  var pista = document.querySelector('.a');
  var lista = document.querySelector('#list');
  var pistas = a.length - 1;
  console.log(index(pista));
  if (index(pista) <= pistas & index(pista) > 0) {
    pista.className = '';
    var i = index(pista) - 1;
    a[i].click();
   ...