Using an audio HTML 5 preview clip with small buttons

If you are using <audio> tag to allow viewers to hear audio clips but you want just a simple small button rather than the default
button, then this describes a method using jquery.

One issue with the <audio> display is that it does look different according to the browser and also the size can be different as well.  This
may be a particular problem with responsive design layouts.  Using a smaller button may be helpful in those circumstances.

This is the required HTML:

 

<audio id="the-audio" preload="auto">
 <source src="https://www.withinweb.com/demographics/mp3clips/mp3_01.mp3" type="audio/mpeg" />Your browser does not support the audio element.
 </audio>
 <button id="pvg-play-button" class="btn"><i class="fa fa-play" aria-hidden="true"></i></button>
 <button id="pvg-pause-button" class="btn hide"><i class="fa fa-pause" aria-hidden="true"></i></button>

 

The first part is the standard <audio> tag followed by two buttons, one for play and one for pause.  In this example I am using font awsesome to display the Play and Pause icons.  The play button uses the class “btn” and the pause button uses the class “btn hide”.  The two classes btn and hide are taken from the bootstrap css.

We use jquery for the click functions so we need the jQuery JavaScript in the web page and we need some jquery code to control what happens when the play button and the pause button are clicked.

NOTE that you need font awesome and a reference to jQuery for this code to work.

 

<!doctype html>
 <html>
 <head>
 <meta charset="utf-8">
 <title>Example of a simple HTML 5 Audio Button</title>
 </head>

<link rel="stylesheet" href="font-awesome/css/font-awesome.min.css">

<style type="text/css">
 .btn {
 display: inline-block;padding: 6px 12px;margin-bottom: 0;font-size: 14px;
 font-weight: normal;line-height: 1.42857143;text-align: center;white-space: nowrap;
 vertical-align: middle;-ms-touch-action: manipulation;touch-action: manipulation;
 cursor: pointer;
 -webkit-user-select: none;
 -moz-user-select: none;
 -ms-user-select: none;
 user-select: none;
 background-image: none;border: 1px solid transparent;border-radius: 4px;
 }
 .btn-xs {
 padding: 1px 5px;font-size: 12px;
 line-height: 1.5;border-radius: 3px;
 }
 .hide {
 display: none !important;
 }
 </style>

<script src="js/jquery-3.1.1.min.js"></script>

<script language="javascript" type="text/javascript">
 $(document).ready(function () {
 $('#pvg-play-button').click(function () {
 document.getElementById('the-audio').play();
 $('#pvg-play-button').addClass('hide');
 $('#pvg-pause-button').removeClass('hide');
 });
 $('#pvg-pause-button').click(function () {
 document.getElementById('the-audio').pause();
 $('#pvg-pause-button').addClass('hide');
 $('#pvg-play-button').removeClass('hide');
 });
 $('#the-audio').on('ended', function() {
 $('#pvg-pause-button').addClass('hide');
 $('#pvg-play-button').removeClass('hide');
 $('#the-audio').load();
 });
 });
 </script>

<body>

<audio id="the-audio" preload="auto">
 <source src="https://www.withinweb.com/demographics/mp3clips/mp3_01.mp3" type="audio/mpeg" />Your browser does not support the audio element.
 </audio>
 <button id="pvg-play-button" class="btn"><i class="fa fa-play" aria-hidden="true"></i></button>
 <button id="pvg-pause-button" class="btn hide"><i class="fa fa-pause" aria-hidden="true"></i></button>

</body>
 </html>

Leave a Reply