I'm building a digital dictionary with audio files for each word saved in an "audio" folder on the disk and paths to those audio files stored in a data column in my MySQL table. I'm trying to query the path into the HTML audio tag like this:
$sql = "SELECT adl, ipa, audio FROM lexicon";
$result = mysqli_query($conn, $sql);
if (mysqli_num_rows($result) > 0) {
// output data of each row
while($row = mysqli_fetch_assoc($result)) {
echo "ADL: " . $row["adl"]. " IPA: " . $row["ipa"]. " Audio: <audio controls><source src=\"". $row["audio"]."\" type=\"audio/wav\"></audio><br>";
}
} else {
echo "0 results";
}
If you go to the page, the audio player seems to be reading the 1 second audio file: https://memoriaelinguagrumentina.org/audio/englishDictionary.php But the audio won't play. Why is that?
This webpage is stored in the same "audio" folder as the audio files. And the path in my data column is "/audio/a1.wav". Any suggestions?
Your <div class="nav> element is above your <audio> element.
You can see this easily by adding background: black to .nav in your styles - you will see that the audio controls disappear.
You can fix this in several ways, including adding margin-top to push your content below your header, or adding z-index to your <audio> element to raise it above the header elements. Then you will be able to click the Play button and it will work. (I tested this in the Chrome DevTools.)
However, it looks like your header has other design issues (make your window smaller for one example of how it breaks), so you probably want to make other changes to the header design too.