September 28, 2016
A simple alternative to using HTML5 audio controls. Link directly to an audio file in the page, or use this method within a loop.
<!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(); ?>