5
\$\begingroup\$

I had a task to create simple audio player. So far I managed to do functionalities and all that is needed. Other part of same task was to make it semantic and modular.

I read some blog posts and articles about semantic but I am not sure how to do it in right way.

player();

  function player(){

    music = new Audio('http://www.w3schools.com/tags/horse.mp3');

  }

  $('.button__play').click(function(event){
    event.preventDefault();
    music.play();
  });
  $('.button__pause').click(function(event){
    event.preventDefault();
    music.pause();
  });
  $('.button__stop').click(function(event){
    event.preventDefault();
    music.pause();
    music.currentTime = 0;
  });

  $('.button__repeat, .button__rate').click(function(event){
    event.preventDefault();
    $(this).toggleClass('button__active');
  });
.player{
  background: #eaeaea;
  width: 360px;
  font-family: 'Arial', sans-serif;
  font-size: 16px;
}
.cover{
  width: 100%;
  height: 160px;
  overflow:hidden;
}
.cover__img{
  width: 100%;
  height: auto;
  display:block;
}
.container{
  padding: 0.500em;
}
.info{
  margin: 1em 0;
}
.info:after{
  content: '';
  clear: both;
  display: table;
}
.song{
  list-style: none;
  margin:0; 
  padding: 0;
  float: left;
  width: 75%;
}
.progress{
  height: 0.250em;
  width: 100%;
  background: orangered;
  margin: 1em 0;
  postion: relative;
}
.progress__bar{
  height: 0.250em;
  width: 20%;
  background: lightblue;
  
}
.button{
  display: inline-block;
  text-decoration: none;
  padding: 0.250em 0.500em;
}
.button__play{
  background: orangered;
  color: white;
}
.button__pause, .button__stop{
  font-size: 0.750em;
  background: gray;
  color: white;
}
.button__repeat, .button__rate{
  color: gray;
}
.button__active{
  color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="player">
  <div class="cover">
    <img src="http://res.cloudinary.com/wired/image/upload/v1475688832/pine-273826_640_wylrrc.jpg" alt="img" class="cover__img" />
  </div>
  <div class="container">
    <div class="info">
       <ul class="song">
        <li class="song__info__artist">forest</li>
        <li class="song__info__song">rain</li>
       </ul>
      <div class="rate">
        <a href="#" class="button button__rate">rate</a>
      </div>
    </div>
    <div class="progress">
      <div class="progress__bar"></div>
    </div>
    <div class="ctrl">
      <a href="#" class="button button__play">play</a>
      <a href="#" class="button button__pause">pause</a>
      <a href="#" class="button button__stop">stop</a>
      <a href="#" class="button button__repeat">repeat</a>
    </div>
  </div>
</div>

\$\endgroup\$
1
\$\begingroup\$

I don't know exactly what you mean about semantic and modular, but I usually like to use object oriented programming. You could create multiple and isolated players.

function AudioPlayer(src, $control) {

  var _this = this;

  this.src = src;
  this.music = new Audio(src);

  this.btnPlay = $control.find('.button__play');
  this.btnPause = $control.find('.button__pause');
  this.btnStop = $control.find('.button__stop');
  this.btnRepeat = $control.find('.button__repeat');
  this.btnRate = $control.find('.button__rate');

  this.btnPlay.click(function(event){
    event.preventDefault();
    _this.music.play();
  });

  this.btnPause.click(function(event){
    event.preventDefault();
    _this.music.pause();
  });

  this.btnStop.click(function(event){
    event.preventDefault();
    _this.music.pause();
    _this.music.currentTime = 0;
  });

  this.btnRepeat.click(function(event){
    event.preventDefault();
    $(this).toggleClass('button__active');
  });

  this.btnRate.click(function(event){
    event.preventDefault();
    $(this).toggleClass('button__active');
  });

}

AudioPlayer.prototype.play = function() {

  this.music.play();
}

AudioPlayer.prototype.pause = function() {
  this.music.pause();
}

$(document).ready(function() {

  //Here you could create more isolated audio controls and instantiate them

  var controlPlayer1 = $('.container');
  var player1 = new AudioPlayer('http://www.w3schools.com/tags/horse.mp3', controlPlayer1);
})
\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.