Demonstrates how to show a uploaded audio file in an audio element

pdb-audio-element.php

<?php
/**
 * Plugin Name: PDB Audio Element
 * Description: Demonstrates how to show an uploaded audio file in an audio element
 * 
 */
add_filter( 'pdb-before_display_form_element','pdb_audio_element_display_function', 10, 2);

/**
 * displays the audio element
 *
 * @param array $value the raw value of the field
 * @param PDb_Field_Item object $field
 * @return string HTML
 */
function pdb_audio_element_display_function( $value, $field )
{
  if ( $field->form_element === 'file-upload' &&  preg_match( '/\.(aif|ogg|mp3|wav)$/', $field->value, $matches ) > 0) {
    $value = '
<div class="pdb-audio-container ' . $field->name . '-audio">
  <audio controls>
    <source src="' . esc_attr( $field->value ) . '" type="audio/' . $matches[1] . '">
    Your browser does not support the audio element.
  </audio>
</div>
';
  }
  return $value;
}