Toggle with SVG

by o0chris0o

HTML

<ul class="playlist">
          <li>
            <span class="play" id="1">
              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 32 32">
                <g fill="none">
                  <circle cx="16" cy="16" r="16" fill="#000"/>
                  <polygon id="play-btn-1" class="play-button" fill="#FFF" points="4.5 0 9 9 0 9" transform="rotate(90 6.5 16.5)"/>
                </g>
              </svg>
            </span>
            <span class="titre-chanson">Sound1</span>
          </li>
          <li>
            <span class="play" id="2">
              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 32 32">
                <g fill="none">
                  <circle cx="16" cy="16" r="16" fill="#000"/>
                  <polygon id="play-btn-2" class="play-button" fill="#FFF" points="4.5 0 9 9 0 9" transform="rotate(90 6.5 16.5)"/>
                </g>
              </svg>
            </span>
            <span class="titre-chanson">Sound2</span>
          </li>
          </ul>
          
          <audio src="http://www.bigsoundbank.com/sounds/ogg/0595.ogg" preload id="trk1" type="audio/ogg"></audio>
        <audio src="http://www.bigsoundbank.com/sounds/ogg/0595.ogg" id="trk2" type="audio/ogg"></audio>

CSS

.playlist {
  width: 80%;
  list-style: none;
  font-family: "Montserrat";
  font-weight: 400;
  font-size: 0.6rem;
  letter-spacing: 0.1rem;
  word-spacing: 0.3rem;
  text-transform: uppercase;
  margin: 45px;
}

.playlist li{
  height: 30px;
}

.play {
  float: left;
  margin: 3px 10px 0 0;
}


.play-button {
  fill: #fff;
}
svg:hover .play-button {
  fill: #a9021a;
}
.play-button.active {
  fill:#a9021a;
}

.titre-chanson {
float: left;
margin-top: 8px;
}

.titre-trk-plain {
  float: left;
  margin: 8px 0 0 34px;
}

JavaScript

$('.play').click(function () {
    var $this = $(this)
    var audioId = 'trk' + $(this).attr('id')
    $this.toggleClass('active')
    chgStatePlay()
    // $('#play-button' + audioId).toggleClass('active');
    // $('.play-button').toggleClass('active');
    if ($this.hasClass('active')) {
      $('#' + audioId).trigger('play')
    } else {
      $('#' + audioId).trigger('pause')
    }
  })

  function chgStatePlay () {
    $('svg .play-button').click(function () {
      var $this = $(this)
      $this.toggleClass('active')
    })
  }