//JavaScript $(document).ready(function() { var playing = false; // Add file names. $('.audio-button').each(function() { var $button = $(this); var $audio = $button.find('audio'); $($('<span>').text($audio.attr('src'))).insertBefore($audio); }); // Add click listener. $('.audio-button').click(function() { var $button = $(this); var audio = $button.find('audio')[0]; // <-- Interact with this! // Toggle play/pause if (playing !== true) { audio.play(); } else { audio.pause(); } // Flip state $button.toggleClass('playing'); playing = !playing }); }); // CSS .fa.audio-button { position: relative; display: block; width: 12em; height: 2.25em; margin-bottom: 0.125em; text-align: left; } .fa.audio-button:after { position: absolute; right: 0.8em; content: "\f04b"; } .fa.audio-button.playing:after { content:"\f04c"; } // HTML <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button class="fa audio-button"> <audio src="media/test.mp3"></audio> </button> <button class="fa audio-button"> <audio src="media/test2.mp3"></audio> </button> <button class="fa audio-button"> <audio src="media/test3.mp3"></audio> </button> <button class="fa audio-button"> <audio src="media/test4.mp3"></audio> </button>