Untitled

<html>
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">
    <style>
        audio {
            background: red;
        }
        .time-stripe {
            height: 10px;
            background: black;
            width: 0;
        }

        button {
            width: 30px;
            height: 30px;
            border-radius: 50%;
        }
    </style>
</head>
<body>
<audio controls src="sample.mp3" class="audio-player">
    update your browser
</audio><br/>
<input type="checkbox" class="player-mute" checked><br/>
<button class="button-play"><i class="fa fa-play"></i></button>
<button class="button-pause"><i class="fa fa-pause"></i></button>
<button class="button-stop"><i class="fa fa-stop"></i></button>
<input class="volume" type="range" min="0" max="1" step="0.1" value=1>
<div class="time-stripe"></div>
<script>
    const player = document.getElementsByClassName('audio-player')[0];
    const stripe = document.getElementsByClassName('time-stripe')[0];

    document.getElementsByClassName('button-play')[0].onclick = function() {
        player.play();
    }

    document.getElementsByClassName('button-pause')[0].onclick = function() {
        player.pause();
    }

    document.getElementsByClassName('button-stop')[0].onclick = function() {
        player.pause();
        player.currentTime = 0;
    }

    document.getElementsByClassName('volume')[0].oninput = function() {
        player.volume = this.value;
    }

    player.ontimeupdate = function() {
        stripe.style.width = (player.currentTime / player.duration * 100) + '%';
    }
</script>
</body>
</html>