Audio files controls not working on android and iPhones

[Wal-Wal-2]

I have php code that uses mp3 audio files stored in a database for the user to listen to. The page loads and the audio controls work and the files play on a desktop and laptop just fine. When trying to play a file on an android or IPhone, when you press the play (or any other control) nothing happens. It acts like the page is static. There is a home button on the webpage and it works so I know the page is interactive. Below is the code. I would appreciate any help. Thank you.

<?php
  $sermons = $database->select("sermon","*");;
  foreach( $sermons as $sermon )
  {
    $audio_file = 'http://xxxxxxx.com/sermons/'.$sermon['file_name'];
    $player = "<audio id='sermon_'$sermon[id] controls>
                <source src='$audio_file' type='audio/mpeg'>
                <source src='$audio_file' type='audio/mp3'>
                Your browser does not support the audio element.
              </audio>";
    echo "<tr>
          <td>$sermon[sermon_date]</td>
          <td>$sermon[title]</td>
          <td>$sermon[speaker]</td>
          <td>$player</td>
          </tr>";
  }
  ?>