This css makes the default play button larger, which improves accessibility. The first rule also turns the tracker bar the same color as the ‘accent’ color for your course.
.audio-player__tracker-bar {
background: var(--color-accent);
height: 2px;
}
.audio-player__tracker {
margin-left: 10px;
}
.audio-player__play:not(.audio-player__play--pause)::before {
border: 1.5rem solid transparent;
border-left: 2rem solid;
position: relative;
}
.audio-player__play--pause {
transform:scale(1.2);
position:relative;
left:8px;
}
.audio-player__play--pause::after,
.audio-player__play--pause::before {
height: 2rem;
width: .4rem;
}
.audio-player__play--pause::after {
position:relative;
right:5px
}
Disable audio scrubber
.audio-player__tracker {
pointer-events: none;
}
This limits the user’s ability to change the playhead position, they can only press play and stop.