0

I have created dynamic boostrap card which record player. I am a beginner with Jquery and CSS/scss.

I have will have multiple boostrap cards generated depending on the data in DB. For sake of simplicity, I have written only 2 boostrap cards in example below. I have a music-container class which has 1)control-play and 2)vinyl(record player) for each card. My question is how do I allow only 1 control-play to play at any time,say if 1 control-play is already playing and if i click another control-play,the previous control-play with stop and that vinyl will flip back to album cover. In other words, only 1 record player is allowed to play at any given time with vinly animation. The ToggleClass is not working nor is removeClass. And sometimes, the click event is being called for both control-play items even if i click once (I used proxy to avoid this, but it doesn't seem to work)

Error: When I run the fiddle, and first time click on control-play1, vinyl of both music-player-containers are shown instead of first one only, and they closes when control-play1 is clicked again. If you click on 2nd control-play, it shows only 2nd vinly. Its an unusual behavior.

JS

          function MusicPlayer(mp, id) {
        this.mpc = mp;
        this.initEvents(id);

      }

      MusicPlayer.prototype = {
        initEvents: function(id) {
          var obj = this;
          obj.mpc.on('click', function(event) {

            var others = $("div.music-player-container").not($(this));

            $.each(others, function(index, value) {
              alert("other non-clicked players :" + $(value).attr("id") + " ; is it playing?" + $(value).is('.is-playing .vinyl'));
              if ($(value).is('.is-playing .vinyl')) {
                // $(value).removeClass('is-playing');
                //$(value).toggleClass('is-playing', false);
                $(value).removeClass('is-playing');
                $(value).addClass('is-not-playing');

                $(value).toggleClass('is-not-playing', true);

              }

            });
            alert("Current clicked music-Player-Container being toggled :" + $(this).attr("id"));
            $(this).toggleClass('is-playing');

            event.stopPropagation();

          });
        }
      }

      $(function() {

        var $div = $('#content');
        $(".control-play").bind('click', $.proxy(function(event) {
          //Get Control-Play clicked
          var cplay_clicked = $(event.target).attr('id');
          alert("control-player-clicked:" + cplay_clicked);
          //Get Music-Player-Container that has clicked Control-Play inside it
          var $musiPlayerContainer = $div.find('#' + event.target.dataset.id + 'mpc');
          var mpc = new MusicPlayer($musiPlayerContainer, event.target.dataset.id);
          $('div.music-player-container').removeClass('is-playing');
        }, this));
      });

CSS

      /* CSS used here will be applied after bootstrap.css */


  /* CSS used here will be applied after bootstrap.css */


  /*@import '../../bourbon/_bourbon.scss';*/


  /*@import "../../bourbon-bitters/_bitters.scss";*/

  @import url(https://fonts.googleapis.com/css?family=Raleway:400,300,500);
  * {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    box-sizing: border-box;
  }

  *:before,
  *:after {
    box-sizing: border-box;
  }


  /*@import "compass/css3";*/


  /*@import "../../bourbon-bitters/mixins/_base.scss";*/


  /*@mixin filter($function: none) {
   //   @warn "This old mixin is deprecated!";

      @include _bourbon-deprecate-for-prefixing("filter");
      // <filter-function> [<filter-function]* | none
      @include prefixer(filter, $function, webkit spec);
  }*/

  body {
    background-color: #fff;
    color: #515044;
    font-family: 'Raleway', sans-serif;
  }

  .music-player-container {
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    display: inline-block;
    height: 220px;
    position: relative;
    max-width: 130px;
    margin-left: 70px;
    margin-top: 170px;
  }

  .music-player {
    background-color: #fff;
    height: 120px;
    padding: 40px 200px 40px 40px;
    position: absolute;
    text-align: right;
    width: 125px;
    z-index: 3;
  }

  .player-content-container {
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
    top: 50%;
    position: relative;
  }

  .artist-name {
    font-size: 28px;
    font-weight: normal;
    margin: 0 0 0.75em 0;
  }

  .album-title {
    font-weight: 200;
    font-size: 24px;
    margin: 0 0 1.75em 0;
  }

  .song-title {
    font-size: 18px;
    font-weight: 200;
    margin: 0 0 1.5em 0;
  }

  .album {
    box-shadow: 3px 3px 15px rgba(0, 0, 0, 0.65);
    height: 120px;
    /*margin-left: 250px;
    margin-top: 27px;*/
    position: relative;
    width: 125px;
    z-index: 10;
  }

  .album-art {
    background: #fff center no-repeat;
    height: 120px;
    position: relative;
    width: 125px;
    z-index: 10;
  }

  .card-img {
    background: #fff center no-repeat;
    height: 120px;
    position: relative;
    width: 125px;
    z-index: 10;
  }

  .card-img > .card-img-overlay {
    background: #e0eaec center no-repeat;
    z-index: 10;
  }

  .vinyl {
    -webkit-animation: spin 2s linear infinite;
    -moz-animation: spin 2s linear infinite;
    animation: spin 2s linear infinite;
    -webkit-transition: all 500ms;
    -moz-transition: all 500ms;
    transition: all 500ms;
    background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/83141/vinyl.png"), url("https://localhost:49544/Albums/The_Beatles/Greatest_Hits/Album_Cover/IMG_Greatest_Hits.jpg");
    background-position: center, center;
    background-size: cover, 40% auto;
    background-repeat: no-repeat;
    border-radius: 100%;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.8);
    height: 110px;
    left: 10px;
    position: absolute;
    top: 10px;
    width: 105px;
    z-index: 5;
    will-change: transform, left;
  }

  .is-playing .vinyl {
    left: 52%;
  }


  /*
  .is-not-playing .vinyl {}
  */

  .is-not-playing .vinyl {
    left: 1%;
    animation: none;
    transition: none;
  }

  .i-2x {
    text-align: center;
    font-size: 2em;
  }

  [class^="control-"] {
    border-radius: 100%;
    display: inline-block;
    height: 44px;
    margin: 0 3px;
    width: 44px;
  }

  [class^="control-"]:hover {
    cursor: pointer;
  }

  .card-img-overlay > .control-play {
    background: url("https://png.icons8.com/circled-play/androidL/64");
    height: 64px;
    width: 64px;
    margin-left: 20px;
    background-repeat: no-repeat;
  }

  .control-forwards {
    background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/83141/forwards.ico") center/cover no-repeat;
  }

  .control-back {
    background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/83141/backwards.ico") center/cover no-repeat;
  }

  @-webkit-keyframes spin {
    0% {
      -webkit-transform: rotate(0deg);
      -moz-transform: rotate(0deg);
      -ms-transform: rotate(0deg);
      -o-transform: rotate(0deg);
      transform: rotate(0deg);
    }
    100% {
      -webkit-transform: rotate(360deg);
      -moz-transform: rotate(360deg);
      -ms-transform: rotate(360deg);
      -o-transform: rotate(360deg);
      transform: rotate(360deg);
    }
  }

  @-moz-keyframes spin {
    0% {
      -webkit-transform: rotate(0deg);
      -moz-transform: rotate(0deg);
      -ms-transform: rotate(0deg);
      -o-transform: rotate(0deg);
      transform: rotate(0deg);
    }
    100% {
      -webkit-transform: rotate(360deg);
      -moz-transform: rotate(360deg);
      -ms-transform: rotate(360deg);
      -o-transform: rotate(360deg);
      transform: rotate(360deg);
    }
  }

  @-o-keyframes spin {
    0% {
      -webkit-transform: rotate(0deg);
      -moz-transform: rotate(0deg);
      -ms-transform: rotate(0deg);
      -o-transform: rotate(0deg);
      transform: rotate(0deg);
    }
    100% {
      -webkit-transform: rotate(360deg);
      -moz-transform: rotate(360deg);
      -ms-transform: rotate(360deg);
      -o-transform: rotate(360deg);
      transform: rotate(360deg);
    }
  }

  @keyframes spin {
    0% {
      -webkit-transform: rotate(0deg);
      -moz-transform: rotate(0deg);
      -ms-transform: rotate(0deg);
      -o-transform: rotate(0deg);
      transform: rotate(0deg);
    }
    100% {
      -webkit-transform: rotate(360deg);
      -moz-transform: rotate(360deg);
      -ms-transform: rotate(360deg);
      -o-transform: rotate(360deg);
      transform: rotate(360deg);
    }
  }

HTML

      <div class="container-fluid">
    <div id="content">
      <div class="music-player-container" id="1mpc">
        <div class="card card-inverse" id="1card">
          <div class="card-header" id="1cardHeader">
            <div class="top">
              <i id="1fav" class="favtoggle fa not-liked"></i>
              <i id="1pl" class="fa fa-plus-circle"></i>
            </div>
          </div>
          <div id="1album" class="album">
            <div class="album-art">
              <img class="card-img-top" src="https://images-na.ssl-images-amazon.com/images/I/81kZdGYO%2ByL._SL1500_.jpg" alt="Card image cap">
              <div class="card-img-overlay h-100 d-flex flex-column justify-content-center text-center">
                <span class="control-play" id="1control-play" data-id="1" data-ctype="audio/mp3" data-src="http://localhost:49544/Albums/The_Beatles/Greatest_Hits/hey jude.mp3" title="Play"></span>
              </div>
            </div>
            <div class="vinyl" id="1vinyl"></div>
          </div>
          <div class="card-footer">
            <span class="text-ellipsis text-left">hey jude</span>
            <small class=" text-left text-ellipsis text-xs text-muted">Abbey Road</small>
          </div>
        </div>
        <!-2nd one->


        <div class="music-player-container" id="2mpc">
          <div class="card card-inverse" id="2card">
            <div class="card-header" id="2cardHeader">
              <div class="top">
                <i id="2fav" class="favtoggle fa not-liked"></i>
                <i id="2pl" class="fa fa-plus-circle"></i>
              </div>
            </div>
            <div id="2album" class="album">
              <div class="album-art">
                <img class="card-img-top" src="https://images-na.ssl-images-amazon.com/images/I/81kZdGYO%2ByL._SL1500_.jpg" alt="Card image cap">
                <div class="card-img-overlay h-100 d-flex flex-column justify-content-center text-center">
                  <span class="control-play" name="CP2" id="2control-play" data-id="2" data-ctype="audio/mp3" data-src="http://localhost:49544/Albums/The_Beatles/Greatest_Hits/hey jude.mp3" title="Play"></span>
                </div>
              </div>
              <div class="vinyl" id="2vinyl"></div>
            </div>
            <div class="card-footer">
              <span class="text-ellipsis text-left">hey jude</span>
              <small class=" text-left text-ellipsis text-xs text-muted">Abbey Road</small>
            </div>
          </div>
          <div style="clear:both"></div>

        </div>

      </div>

JS Fiddle Here

If i don't create object of MusicPlayerContainer or use bind() as suggested, in the fiddle, it doesnt work.

$(function() {

        var $div = $('#content');
                    $(".control-play").on('click', function (event) {

          //Get Control-Play clicked
          var cplay_clicked = $(event.target).attr('id');
          alert("control-player-clicked:" + cplay_clicked);
          //Get Music-Player-Container that has clicked Control-Play inside it
          var $musiPlayerContainer = $div.find('#' + event.target.dataset.id + 'mpc');

            var others = $("div.music-player-container").not($(this));

            $.each(others, function(index, value) {
              alert("other non-clicked players :" + $(value).attr("id") + " ; is it playing?" + $(value).is('.is-playing .vinyl'));
              if ($(value).is('.is-playing .vinyl')) {
                // $(value).removeClass('is-playing');
                //$(value).toggleClass('is-playing', false);
                $(value).removeClass('is-playing');
                $(value).addClass('is-not-playing');

                $(value).toggleClass('is-not-playing', true);

              }

            });

            alert("Current clicked music-Player-Container being toggled :" + $(this).attr("id"));
            $(this).toggleClass('is-playing');

            event.stopPropagation();
         $('div.music-player-container').removeClass('is-playing');
        }, 
        );
      });
dan joe
  • 3
  • 4
  • The unusual behavior here is caused by you call `new MusicPlayer` each time you click in play. This is attaching many events, making the function be executed more than one time. Be sure of add just one event. Tip: bind is deprecated, use `on` instead – Gabriel Chiquini Oct 20 '17 at 18:04
  • The unusual behavior is not due to new Music Player nor due to bind(). If I remove the code of creating new MusicPlayer and don't use bind(), it wont work. I replace above code with a single function without objects and bind(), dont work – dan joe Oct 20 '17 at 19:33
  • FYI - you will not want to use `$.each()` with `others`. You will want to use `.each()`. For example, you would use: `others.each(function(index, elem){});`. `$.each()` is best suited for arrays and objects; whereas, `.each()` is best suited for selected jQuery Objects. – Twisty Oct 21 '17 at 17:39
  • The first thing I have found is that you have a missing `` before the "2nd one" comment. This was causing some button click confusion. – Twisty Oct 21 '17 at 20:06
  • You can see thatthis one change may have fixed it: https://jsfiddle.net/Twisty/ysLmyzb7/1/ Am also looking at making this a ui widget. – Twisty Oct 21 '17 at 20:07

1 Answers1

0

As I mentioned in my comment, lines 24 to 28 of your HTML in your fiddle read:

</div>
<!-2nd one->


<div class="music-player-container" id="2mpc">

This fails to close the previous <div> with class of 'music-player-container'. You will want to add another </div>, like so:

  </div>
</div>
<!-2nd one->
<div class="music-player-container" id="2mpc">

You're also missing a </div> toward the end of your code. Corrections can be seen here: https://jsfiddle.net/Twisty/ysLmyzb7/1/

In regards to the second part of my comment, you may want to consider making use of the jQuery UI Widget Factory ($.widget()).

Create stateful jQuery plugins using the same abstraction as all jQuery UI widgets.

An example of this:

$(function() {
  $.widget("custom.musicPlayer", {
    options: {
      autoPlay: false,
      singlePlayer: true
    },
    playing: false,
    id: null,
    playButton: null,
    source: null,
    _create: function() {
      this.id = this.element.attr("id");
      console.log("New MPC: ", this.id);
      this.element.addClass("ui-mp");
      this.playButton = this.element.find(".control-play");
      this.source = this.element.find(".control-play").data("src");
      this._on(this.playButton, {
        click: "togglePlay"
      });
      if (this.options.autoPlay) {
        console.log(this.id + ": AutoPlay Enabled.");
        this.play();
      }
      console.log(this);
    },
    togglePlay: function() {
      if (this.playing) {
        this.stop();
      } else {
        this.play()
      }
    },
    play: function() {
      console.log(this.id + ": event, play");
      if (this.options.singlePlayer) {
        // Stop all other players
        $(".ui-mp").not(this.element).musicPlayer("stop");
      }
      this.playing = true;
      $(this.element).addClass("is-playing");
    },
    stop: function() {
      console.log(this.id + ": event, stop");
      this.playing = false;
      $(this.element).removeClass("is-playing");
    }
  });
  $(".music-player-container").musicPlayer();
});
/* CSS used here will be applied after bootstrap.css */


/* CSS used here will be applied after bootstrap.css */


/*@import '../../bourbon/_bourbon.scss';*/


/*@import "../../bourbon-bitters/_bitters.scss";*/

@import url(https://fonts.googleapis.com/css?family=Raleway:400,300,500);
* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  box-sizing: border-box;
}

*:before,
*:after {
  box-sizing: border-box;
}


/*@import "compass/css3";*/


/*@import "../../bourbon-bitters/mixins/_base.scss";*/


/*@mixin filter($function: none) {
 //   @warn "This old mixin is deprecated!";

    @include _bourbon-deprecate-for-prefixing("filter");
    // <filter-function> [<filter-function]* | none
    @include prefixer(filter, $function, webkit spec);
}*/

body {
  background-color: #fff;
  color: #515044;
  font-family: 'Raleway', sans-serif;
}

.music-player-container {
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  display: inline-block;
  height: 220px;
  position: relative;
  max-width: 130px;
  margin-left: 70px;
  margin-top: 170px;
}

.music-player {
  background-color: #fff;
  height: 120px;
  padding: 40px 200px 40px 40px;
  position: absolute;
  text-align: right;
  width: 125px;
  z-index: 3;
}

.player-content-container {
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
  top: 50%;
  position: relative;
}

.artist-name {
  font-size: 28px;
  font-weight: normal;
  margin: 0 0 0.75em 0;
}

.album-title {
  font-weight: 200;
  font-size: 24px;
  margin: 0 0 1.75em 0;
}

.song-title {
  font-size: 18px;
  font-weight: 200;
  margin: 0 0 1.5em 0;
}

.album {
  box-shadow: 3px 3px 15px rgba(0, 0, 0, 0.65);
  height: 120px;
  /*margin-left: 250px;
  margin-top: 27px;*/
  position: relative;
  width: 125px;
  z-index: 10;
}

.album-art {
  background: #fff center no-repeat;
  height: 120px;
  position: relative;
  width: 125px;
  z-index: 10;
}

.card-img {
  background: #fff center no-repeat;
  height: 120px;
  position: relative;
  width: 125px;
  z-index: 10;
}

.card-img>.card-img-overlay {
  background: #e0eaec center no-repeat;
  z-index: 10;
}

.vinyl {
  -webkit-animation: spin 2s linear infinite;
  -moz-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
  -webkit-transition: all 500ms;
  -moz-transition: all 500ms;
  transition: all 500ms;
  background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/83141/vinyl.png"), url("https://localhost:49544/Albums/The_Beatles/Greatest_Hits/Album_Cover/IMG_Greatest_Hits.jpg");
  background-position: center, center;
  background-size: cover, 40% auto;
  background-repeat: no-repeat;
  border-radius: 100%;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.8);
  height: 110px;
  left: 10px;
  position: absolute;
  top: 10px;
  width: 105px;
  z-index: 5;
  will-change: transform, left;
}

.is-playing .vinyl {
  left: 52%;
}


/*
.is-not-playing .vinyl {}
*/

.is-not-playing .vinyl {
  left: 1%;
  animation: none;
  transition: none;
}

.i-2x {
  text-align: center;
  font-size: 2em;
}

[class^="control-"] {
  border-radius: 100%;
  display: inline-block;
  height: 44px;
  margin: 0 3px;
  width: 44px;
}

[class^="control-"]:hover {
  cursor: pointer;
}

.card-img-overlay>.control-play {
  background: url("https://png.icons8.com/circled-play/androidL/64");
  height: 64px;
  width: 64px;
  margin-left: 20px;
  background-repeat: no-repeat;
}

.control-forwards {
  background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/83141/forwards.ico") center/cover no-repeat;
}

.control-back {
  background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/83141/backwards.ico") center/cover no-repeat;
}

@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@-moz-keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@-o-keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script>
<div class="container-fluid">
  <div id="content">
    <div class="music-player-container" id="mpc-1">
      <div class="card card-inverse" id="card-1">
        <div class="card-header" id="cardHeader-1">
          <div class="top">
            <i id="1fav" class="favtoggle fa not-liked"></i>
            <i id="1pl" class="fa fa-plus-circle"></i>
          </div>
        </div>
        <div id="album-1" class="album">
          <div class="album-art">
            <img class="card-img-top" src="https://images-na.ssl-images-amazon.com/images/I/81kZdGYO%2ByL._SL1500_.jpg" alt="Card image cap">
            <div class="card-img-overlay h-100 d-flex flex-column justify-content-center text-center">
              <span class="control-play" id="control-play-1" data-ctype="audio/mp3" data-src="http://localhost:49544/Albums/The_Beatles/Greatest_Hits/hey jude.mp3" title="Play"></span>
            </div>
          </div>
          <div class="vinyl" id="vinyl-1"></div>
        </div>
        <div class="card-footer">
          <span class="text-ellipsis text-left">hey jude</span>
          <small class="text-left text-ellipsis text-xs text-muted">Abbey Road</small>
        </div>
      </div>
    </div>
    <!-2nd one->
    <div class="music-player-container" id="mpc-2">
      <div class="card card-inverse" id="card-2">
        <div class="card-header" id="cardHeader-2">
          <div class="top">
            <i id="2fav" class="favtoggle fa not-liked"></i>
            <i id="2pl" class="fa fa-plus-circle"></i>
          </div>
        </div>
        <div id="album-2" class="album">
          <div class="album-art">
            <img class="card-img-top" src="https://images-na.ssl-images-amazon.com/images/I/81kZdGYO%2ByL._SL1500_.jpg" alt="Card image cap">
            <div class="card-img-overlay h-100 d-flex flex-column justify-content-center text-center">
              <span class="control-play" name="CP2" id="control-play-2" data-ctype="audio/mp3" data-src="http://localhost:49544/Albums/The_Beatles/Greatest_Hits/hey jude.mp3" title="Play"></span>
            </div>
          </div>
          <div class="vinyl" id="vinyl-2"></div>
        </div>
        <div class="card-footer">
          <span class="text-ellipsis text-left">hey jude</span>
          <small class="text-left text-ellipsis text-xs text-muted">Abbey Road</small>
        </div>
      </div>
      <div style="clear:both"></div>
    </div>
    <!--3rd one-->
    <div class="music-player-container" id="mpc-3">
      <div class="card card-inverse" id="card-3">
        <div class="card-header" id="cardHeader-3">
          <div class="top">
            <i id="2fav" class="favtoggle fa not-liked"></i>
            <i id="2pl" class="fa fa-plus-circle"></i>
          </div>
        </div>
        <div id="album-3" class="album">
          <div class="album-art">
            <img class="card-img-top" src="https://images-na.ssl-images-amazon.com/images/I/81kZdGYO%2ByL._SL1500_.jpg" alt="Card image cap">
            <div class="card-img-overlay h-100 d-flex flex-column justify-content-center text-center">
              <span class="control-play" name="CP2" id="control-play-3" data-ctype="audio/mp3" data-src="http://localhost:49544/Albums/The_Beatles/Greatest_Hits/hey jude.mp3" title="Play"></span>
            </div>
          </div>
          <div class="vinyl" id="vinyl-3"></div>
        </div>
        <div class="card-footer">
          <span class="text-ellipsis text-left">hey jude</span>
          <small class="text-left text-ellipsis text-xs text-muted">Abbey Road</small>
        </div>
      </div>
      <div style="clear:both"></div>
    </div>
  </div>
</div>

External Fiddle: https://jsfiddle.net/Twisty/ynmepyec/

It may be a little more work yet it makes it easier to deal with overall and gives you more options and control.

Twisty
  • 30,304
  • 2
  • 26
  • 45
  • Thanks a lot, Twisty. I am a beginner in jquery and bootstrap and have no idea about Jquery UI as I have never used jqueryUI before. Thanks a lot. Is there any good to learn about jqueryui or how to create jquery widget for beginners? – dan joe Oct 23 '17 at 14:08