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>

<html>

  <head>

      <script type="text/javascript">

          function playSound(el,soundfile) {

              if (el.mp3) {

                  if(el.mp3.paused) el.mp3.play();

                  else el.mp3.pause();

              } else {

                  el.mp3 = new Audio(soundfile);

                  el.mp3.play();

              }

          }

      </script>

  </head>

<body>

    <span id="dummy" onclick="playSound(this, 'https://dl.dropbox.com/u/39640025/MP3/Waves.mp3');">

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

    </span>

</body>

</html>

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 ?>

		<li>
		<h3><?php the_title(); ?></h3>
		<div class="about" onclick="playSound(this, '<?php echo $audio_file['url']; ?>');">
		    <p>Audio Clip</p>
		</div>
		</li>
		
	<?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.