HTML CSS JS Audio Video

Audio

Have you ever thought about creating audio with the play/pause button on your website? Great! here's how to make it.

Demo :

Follow the code below

<!DOCTYPE html>
<html>
    <head>
        <title>Guide Audio | CusMeDroid<title>
        <link rel='stylesheet' type='text/css' href='https://cusmedroid.github.io/css/style.css'>
    </head>
    <body>
        // myAudio is key id in tag audio
        <audio id='myAudio' class='martobo' controls loop>
            // Source your audio, on this sample audio embed by sites google
           <source src='myaudio.mp3' type='audio/mp3'>
        </audio>
        <p class='Trirong marbo animate-right'>
                <button onclick='playAudio()' class='radius-20 padd-10 blue-bg white'>Play</button> <button onclick='pauseAudio()' class='radius-20 padd-10 red-bg white'>Pause</button>
        </p>
        <script type='text/javascript'>
                    // Call id #myAudio for audio listener
                    var meaudio = document.getElementById('myAudio'); 
                    // Function onclick on button Play
                    function playAudio() { 
                        meaudio.play(); // Audio function play
                    } 
                    // Function onclick on button Pause
                    function pauseAudio() { 
                        meaudio.pause(); // Audio function pause
                    }
        </script>
    </body>
</html>