JSFiddle - React, Tailwind, and code Playground

html5 audio

by web-nfo.com

HTML

<audio id="audio" controls>
	<source src="http://compufirm.nl/demo/html5/audio/guitarloop.mp3">
    <source src="http://compufirm.nl/demo/html5/audio/jazzloop.mp3">
</audio>
        
        <p id="progress">...</p>
        
        <button id="play">Play</button>
         <button id="pause">Pause</button>
        
        <button id="volumePlus">+</button>
         <button id="volumeMin">-</button>

CSS

audio {
    border:10px solid #FF0000;
    border-radius:5px;
    background:#333;
    height:100px;
}

button {
    font-size:20px;
}

JavaScript

var $audio = $('#audio')[0];

$('#play').click(function(){
    $audio.play();
});

$('#pause').click(function(){
    $audio.pause();
});

$('#volumePlus').click(function(){
    $audio.volume+=0.1;
});

$('#volumeMin').click(function(){
    $audio.volume-=0.1;
});

function duration()
{
    $('#progress').html( $audio.currentTime + ' - ' + $audio.duration );
    
    setTimeout(function(){
        duration();
    }, 400);
}
duration();