[cupoma58]

Привет.
Воздействуем на кнопку:

<span class="action"><span class="toggle icon-play" data-toggle-class="toggle icon-pause"></span></span>

Оформляем исполнение:

$('.action').on('click', function () {
    var toggle = $(this).find('.toggle'),
    toggleClass = toggle.data('toggle-class');
    toggle.data('toggle-class', toggle.prop('class')).removeClass().addClass(toggleClass); // 3
    ....

Всё - как обычно но, класс "многослойный":

.action {  
    display: flex;
    justify-content: center;
    align-items: center;  	
    background: #; 
    outline: none;
    cursor: pointer; 		
}
.toggle {	
    width: 30px;                  
    height: 30px;	
}	  
.action:active {background: #;}	
.icon-play {background-image: url(path/to/play.svg);}
.icon-pause {background-image: url(path/to/pause.svg);}

По клику - всё работает, а вот, по "ended" - нет. Бро возвращает два img-изображения - одно по верх другого, без фона, от "action". По логике класс, который заменяется, хранится в data-togle-class. Как его, оттуда, вытащить, без клика?