HTML and jQuery audio player

Question

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>

Answer 1

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);
})