Trigger Audio onClick Event for MP3

A simple alternative to using HTML5 audio controls. Link directly to an audio file in the page, or use this method within a loop.

Original source with demo.

<!DOCTYPE html>



      <script type="text/javascript">

          function playSound(el,soundfile) {

              if (el.mp3) {


                  else el.mp3.pause();

              } else {

                  el.mp3 = new Audio(soundfile);







    <span id="dummy" onclick="playSound(this, '');">

      <img src="short_a/bat.jpg" name="Bottom-1" width="115" height="45" border="0" id="Bottom-1"/>




Example with loop:

foreach($audio as $post) : setup_postdata($post); 
	$audio_file = get_post_meta(get_the_ID(),'audio_file',true);
        if($audio_file) :  // show list item if audio field is not empty ?>

		<h3><?php the_title(); ?></h3>
		<div class="about" onclick="playSound(this, '<?php echo $audio_file['url']; ?>');">
		    <p>Audio Clip</p>
	<?php endif; ?>
<?php endforeach; wp_reset_postdata(); ?>


Leave a Reply

katherine as a flat graphic icon

About Me

I’m an African / Ojibwe First Nations Web Developer living in Winnipeg, Manitoba.

Visit the Tips and Blog to see what I’m working on.