On Javascript (pause and play button)

 For the pause and play button

You create a button with 3 items inside

1. A span with a play text

2. A span with a pause text

3. A span with no text inside but has a class of "switch"

Now, the third empty span will be styled differently in the stylesheet.

And can be placed as an absolute of 50% of the button container. It can also have a different colour

What happens is that it covers either the pause, and play span

Then you get to the JavaScript

You add an event listener, to when the button is clicked, then a new class will be added to the spans in the button. Or you can toggle it.

For instance - 

button.addEventListener('click', function ( ) {  

    if (span !contains('slide')) {

    span.classList.add('slide')

    } else {

    span.classList.remove('slide')

    }

})

Now, in your CSS file, the "slide" class to be added will be styled together with the "switch" class already in the third span, whereby it pushes the span from the left by 50%

So that when the class is being toggled on and off, the targeted elements on the stylesheet (which is only the third span) moves by 50%