CSS ve jQuery ile özelleştirilmiş audio örneği

Bu makalede CSS ve jQuery kullanılarak özelleştirilmiş audio playerin nasıl yapıldığını ele alacağız. CSS ile audio playeri biçimlendirip, jQuery ile player kontrolünü sağlayacağız. Bir örnek ile açıklayalım;

HTML yapısı şu şekilde olsun;

<div class = "content">
    <div class = "player_box_wrapper">
      <span class = "title">Calvin Harris ft Disciples - How Deep Is </span>
      <div class="player_box">
        <audio src="http://www.ansradio.ws/uploads/list/calvin-harris-how-deep-is-your-love-disciples-1439633118.mp3"></audio>
        <div class="play">
          <em class = "fa fa-play"></em>
        </div>
        <div class = "progress">
          <div class="buffer">
            <span></span>
          </div>
        </div>
        <div class="time"><span>00:00</span></div>
      </div>
    </div>
    <div class = "player_box_wrapper">
      <span class = "title">DJ SNAKE - YOU KNOW YOU LIKE IT (ft. AlunaGeorge)</span>
      <div class="player_box">
        <audio src="http://www.ansradio.ws/uploads/list/dj-snake-you-know-you-like-it-ft-alunageorge-xdc-moomb-1443269896.mp3"></audio>
        <div class="play">
          <em class = "fa fa-play"></em>
        </div>
        <div class = "progress">
          <div class="buffer">
            <span></span>
          </div>
        </div>
        <div class="time"><span>00:00</span></div>
      </div>
    </div>
    <div class = "player_box_wrapper">
      <span class = "title">Imany - DON'T BE SO SHY (FT. FILATOV & KARAS)</span>
      <div class="player_box">
        <audio src="http://www.ansradio.ws/uploads/list/imany-don-t-be-so-shy-ft-filatov-karas-1442240114.mp3"></audio>
        <div class="play">
          <em class = "fa fa-play"></em>
        </div>
        <div class = "progress">
          <div class="buffer">
            <span></span>
          </div>
        </div>
        <div class="time"><span>00:00</span></div>
      </div>
    </div>
    <div class = "player_box_wrapper">
      <span class = "title">REALITY - REALITY</span>
      <div class="player_box">
        <audio src="http://www.ansradio.ws/uploads/list/lost-frequencies-reality-ft-janieck-devy-1442813253.mp3"></audio>
        <div class="play">
          <em class = "fa fa-play"></em>
        </div>
        <div class = "progress">
          <div class="buffer">
            <span></span>
          </div>
        </div>
        <div class="time"><span>00:00</span></div>
      </div>
    </div>
    <div class = "player_box_wrapper">
      <span class = "title">Ricky Martin ft. Pitbull - Mr. Put It Down</span>
      <div class="player_box">
        <audio src="http://www.ansradio.ws/uploads/list/ricky-martin-feat-pitbull-mr-put-it-down-primemusic-ru-1426585594.mp3"></audio>
        <div class="play">
          <em class = "fa fa-play"></em>
        </div>
        <div class = "progress">
          <div class="buffer">
            <span></span>
          </div>
        </div>
        <div class="time"><span>00:00</span></div>
      </div>
    </div>
  </div>

CSS yapınız şu şekilde olsun;

@import url('https://fonts.googleapis.com/css?family=Roboto');
  @import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css');
    html, body, div, span, applet, object, iframe,
  h1, h2, h3, h4, h5, h6, p, blockquote, pre,
  a, abbr, acronym, address, big, cite, code,
  del, dfn, em, img, ins, kbd, q, s, samp,
  small, strike, strong, sub, sup, tt, var,
  b, u, i, center,
  dl, dt, dd, ol, ul, li,
  fieldset, form, label, legend,
  table, caption, tbody, tfoot, thead, tr, th, td,
  article, aside, canvas, details, embed, 
  figure, figcaption, footer, header, hgroup, 
  menu, nav, output, ruby, section, summary,
  time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
  }
  /* HTML5 display-role reset for older browsers */
  article, aside, details, figcaption, figure, 
  footer, header, hgroup, menu, nav, section {
    display: block;
  }
  body {
    line-height: 1;
  }
  ol, ul {
    list-style: none;
  }
  blockquote, q {
    quotes: none;
  }
  blockquote:before, blockquote:after,
  q:before, q:after {
    content: '';
    content: none;
  }
  table {
    border-collapse: collapse;
    border-spacing: 0;
  }
  * {margin:0;padding:0;list-style:none;box-sizing:border-box;font-family: 'Roboto', sans-serif;}
  a {text-decoration: none;}


  .content {
    padding:25px;
    width:1170px;
    margin:50px auto;
    font-size:15px;
    font-family: tahoma;
    color:#565656;
    line-height:22px;
  }

  .content:after {
    content:'';
    display:block;
    clear:both;
  }

  .player_box_wrapper {
    margin-bottom: 30px;
  }

  .title {
    display: block;
    margin-bottom: 14px;
    font-size:14px;
    color:#565656;
  }

  .player_box {
    height:50px;
    border:1px solid #ededed;
    box-shadow:0 0 10px #ededed;
    line-height: 50px;
    position: relative;
  }

  .player_box:after {
    content:'';
    display: block;
    clear: both;
  }

  .play,.progress,.time {
    float:left;
    font-size:15px;
    color:#565656;
  }

  .play {
    width:10%;
    text-align: center;
    cursor: pointer;
  }

  .progress {
    width:80%;
    height:50px;
  }

  .progress .buffer {
    display: inline-block;
    width:100%;
    height:7px;
    background:#ededed;
    cursor: pointer;
  }

  .progress .buffer span {
    display:block;
    width:0%;
    height:100%;
    background:skyblue;
  }

  .time {
    width:10%;
    text-align: center;
  }

Javascript kodlarınız ise;

function readableDuration(seconds) {
      sec = Math.floor( seconds );    
      min = Math.floor( sec / 60 );
      min = min >= 10 ? min : '0' + min;    
      sec = Math.floor( sec % 60 );
      sec = sec >= 10 ? sec : '0' + sec;    
      return min + ':' + sec;
  }

  $(function(){
    var audio,time,buffer;
    $(".play").on("click",function(){

      audio = $(this).prev();
      time = $(this).parent().find('.time');
      buffer = $(this).parent().find('.progress').find('span');

      $("audio").not(audio).each(function(){
        $(this)[0].pause();
        $(this).parent().find('.play').find('em').removeClass('fa-pause');
      });

      if(audio[0].paused) {
        audio[0].play();
        $(this).find('em').addClass('fa-pause');
      }else{
        audio[0].pause();
        $(this).find('em').removeClass('fa-pause');
      }

      audio.bind('timeupdate', function(){
          var current = audio[0].currentTime;
          time.text( readableDuration(current) );

          duration = audio[0].duration;
          var progress = Math.ceil( (current / duration) * 100 );
          buffer.css({
          	"width" : progress + "%"
          });
      });

    });

    $(".buffer").on('click', function(e){

      var audio = $(this).parent().prev().prev('audio');

      $("audio").not(audio).each(function(){
        $(this)[0].pause();
        $(this).parent().find('.play').find('em').removeClass('fa-pause');
      });

      $(this).parent().prev().find('em').addClass('fa-pause');

      var time = $(this).parent().parent().find('.time');

      var buffer = $(this).find('span');

      var duration = audio[0].duration;

        var posX = $(this).offset().left;
        
        var totalWidth = $(this).width(),
        
        currentWidth = e.pageX - posX;
        
        var clicked = (currentWidth / totalWidth) * 100;

        var resultSecond = (duration * clicked) / 100;

        $(this).find('span').width(clicked + '%');

        audio[0].currentTime = resultSecond;

        audio[0].play();

        audio.bind('timeupdate', function(){

          var current = audio[0].currentTime;
          time.text( readableDuration(current) );

          var progress = Math.ceil( (current / duration) * 100 );

          buffer.css({
          	"width" : progress + "%"
          });

      });
        
    });

  });

Örneğin canlı hali için buraya tıklayınız.

Not: Örnek hazırlanırken http://www.erbilen.net/ websitesindeki http://www.erbilen.net/html5-audio-ses-ozelligi/ konusundan faydalanılmıştır.

Bir Cevap Yazın