Audio Player - Real Helper

md.shakil hossain

1565

Audio Player

 <div id='container'>
  <canvas id='albumCover'></canvas>
  <div id='header'>
    <div id='artistImg'>
      <img src='http://www.wzip88.com/wp-content/uploads/2010/10/Bruno-Mars-150x150.jpg'></img>
    </div>
    <div id='songInfo'>
      <span id='songInfoArtist'>Bruno Mars</span>
      <span id='songInfoAlbum'>Doo - Wops & Hooligans</span>
    </div>
  </div>
  <div id='player'>
    <span id='playerPlayingSong'>The Lazy Song</span>
    <div id='slider'>
      <div id='progressSlider'>
        <div id='progressCurrent'></div>
      </div>
    </div>
    <br />
    <div id='controls'>
      <span id='reload' class='apBtn fa fa-refresh'></span>
      <div id='songControl'>
        <span id='prevSong' class='apBtn fa fa-caret-left'></span>
        <span id='playToggle' class='apBtn fa fa-play'></span>
        <span id='nextSong' class='apBtn fa fa-caret-right'></span>
      </div>
      <span id='shuffle' class='apBtn fa fa-random'></span>
    </div>
  </div>
</div>

<audio id='audioPlayer' preload>
  <source src='//geoffstorbeck.com/assets/audio/bruno.ogg' id='ogg' type='audio/ogg' />
  <source src='//http://budi12.wapka.mobi/music/down/8417729/2261902/NmNjY0pNaVJQVGdVbk1XVG5ZNG9PdUN5UEh4bDFhVVFnVTFqV0RORC9JUjRHY0JX/Bruno+Mars+-+The+Lazy+Song.mp3' id='mp3' type='audio/mpeg' />
</audio>

<script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

Try it Yourself >>

 @import url('http://fonts.googleapis.com/css?family=Roboto+Condensed');
@import url('//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css');

#container {
    width: 450px;
    height: 450px;
    background-color: #EBEBEB;
    font-family: 'Roboto Condensed';
  }

  #albumCover {
    background: url('http://1or4letdoen1lyct2h940tcz3.wpengine.netdna-cdn.com/wp-content/imagescaler/48e165b59ddc8ce6cd5af6dd64b79246.jpg');
    width: 100%;
    height: 200px;
  }

  #header {
    position: relative;
    top: -75px;
    margin-left: 20px;
    clear: both;
    display: block;
  }

  #artistImg {
    display: inline;
    clear: both;
    width: 150px;
    height: 150px;
  }

  #artistImg > img {
    border: 2px solid white;
  }

  /* Song Info */
  #songInfo {
    display: inline;
    position: relative;
    top: -80px;
    margin-left: 15px;
    clear: both;
  }

  #songInfo > span {
    display: block;
    margin-left: 170px;
    color: #7F7F7F;
  }

  #songInfo > #songInfoArtist {
    font-size: 2em;
  }

  #songInfo > #songInfoAlbum {
    font-size: 1em;
  }

  /* Player */
  #player{
    position: relative;
    top: -140px;
    text-align: center;
  }

  #player > #playerPlayingSong {
    display: block;
    font-size: 2em;
    color: #505050;
    margin-bottom: 10px;
  }

  /* Player Slider */

  #player > #slider > #startTime, #player > #slider > #progressSlider, #player > #slider > #endTime, #player > #slider > #progressCurrent {
    float: left;
    position: relative;
    overflow:auto;
  }

  #player > #slider > #progressSlider {
    width: 410px;
    margin-top: 5px;
    height: 10px;
    background-color: #505050;
    left: 20px;
  }

  #player > #slider > #progressSlider > #progressCurrent {
    background-color: #FAEBA6;
    z-index: -10px;
    margin-top: 0px;
    border: 1px solid #505050;
    box-sizing: border-box;
    height: 10px;
    width: 150px;
  }

  /* Player Controls */
  #player > #controls {
    display: inline;
    font-size: 30px;
    color: #7F7F7F;
  }

  #player > #controls > #reload {
    display: inline;
    transform: rotate(90deg);
    margin-left: 20px;
    padding-top: 10px;
    float: left;
  }

  #player > #controls > #songControl {
    display: inline;
    color: #505050;
  }


  #player > #controls > #songControl > #prevSong {
    display: inline;
    margin-right: 5px;
    color: #7F7F7F;
  }

  #player > #controls > #songControl > #nextSong {
    display: inline;
    margin-left: 5px;
    color: #7F7F7F;
  }

  #player > #controls > #shuffle {
    display: inline;
    margin-right: 20px;
    float: right;
    padding-top: 10px;
  }

  .apBtn {
    cursor: pointer;
  }

Try it Yourself >>

(function() {
  var audioCtx;
  var audio;
  var source;
  var analyser;
  var bufferLength;
  var dataArray;
  var canavs;
  var ctx;

  var startTime;
  var endTime;
  var progressBar;

  function init() {
    audioCtx = new (window.AudioContext || window.webkitAudioContext)();
    audio = document.querySelector('audio')
    source = audioCtx.createMediaElementSource(audio);

    analyser = audioCtx.createAnalyser();
    bufferLength = analyser.frequencyBinCount;
    dataArray = new Uint8Array(bufferLength);

    canvas = document.getElementById('albumCover');
    ctx = canvas.getContext('2d');

    progressBar = document.getElementById('progressCurrent');

    source.connect(analyser);
    analyser.connect(audioCtx.destination);
    play();
  }

  function play() {
    var seconds, totalSeconds;

    window.requestAnimationFrame(play);
    analyser.getByteFrequencyData(dataArray);

    // Set time
    seconds = Math.floor(audio.currentTime);
    totalSeconds = Math.floor(audio.duration);

    // Set progress width
    progressBar.style.width = ((seconds / totalSeconds) * 100) + '%';

    // Draw visualizer
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    var grd = ctx.createLinearGradient(0, canvas.height, 0, 0);
        grd.addColorStop(0, 'rgba(31, 244, 31, 0.6)');
        grd.addColorStop(.75, 'rgba(233, 21, 31, 0.8)');
    ctx.fillStyle = grd;

    var bars = 30;
    for (var i = 0; i < bars; i++) {
      var x = i * 10;
      var w = 9;
      var h = -(dataArray[i] / 2);
      ctx.fillRect(x, canvas.height, w, h);
    }
  }

  init()

  $('#playToggle').click(function() {
    var ap = $('#audioPlayer')[0];
    $('#playToggle').toggleClass('fa-play fa-pause');
    if (ap.paused) {
      ap.play();
    } else {
      ap.pause();
    }
  })
})();

Try it Yourself >>