HTML and jQuery audio player 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;
}
&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"&gt;&lt;/script&gt;
&lt;div class="player"&gt;
  &lt;div class="cover"&gt;
    &lt;img src="http://res.cloudinary.com/wired/image/upload/v1475688832/pine-273826_640_wylrrc.jpg" alt="img" class="cover__img" /&gt;
  &lt;/div&gt;
  &lt;div class="container"&gt;
    &lt;div class="info"&gt;
       &lt;ul class="song"&gt;
        &lt;li class="song__info__artist"&gt;forest&lt;/li&gt;
        &lt;li class="song__info__song"&gt;rain&lt;/li&gt;
       &lt;/ul&gt;
      &lt;div class="rate"&gt;
        &lt;a href="#" class="button button__rate"&gt;rate&lt;/a&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="progress"&gt;
      &lt;div class="progress__bar"&gt;&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="ctrl"&gt;
      &lt;a href="#" class="button button__play"&gt;play&lt;/a&gt;
      &lt;a href="#" class="button button__pause"&gt;pause&lt;/a&gt;
      &lt;a href="#" class="button button__stop"&gt;stop&lt;/a&gt;
      &lt;a href="#" class="button button__repeat"&gt;repeat&lt;/a&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;
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);
})