javascript - Play mp3 file based upon name of image

one text

Solution:

As @CBroe said i needed to swap

onclick="bleep.play()"

for another function.

After a bit of googling etc i found a function from this page https://www.codespeedy.com/change-html5-audio-player-src-file-in-javascript/

And here is the working code

Thanks to everyone!

<audio id="my-audio" >
<source src="http://website/pages/bleep.mp3" type="audio/mpeg">
</audio>

<script type="text/javascript">
  
   function cs_change_music(music)
   {
      
     document.getElementById("my-audio").pause();
     document.getElementById("my-audio").setAttribute('src', music);
     document.getElementById("my-audio").load();
     document.getElementById("my-audio").play();
   }
</script>

<?php
$sound=$_GET['sound'];
$dir = "..//images/alphabet/";

$dirname = $dir;
$images = glob($dirname."*.{jpg,gif,png}",GLOB_BRACE);

foreach($images as $image) {
    
    $soundToPlay = explode (".",$image);
    $soundToPlay1 = $soundToPlay[2];
    $soundToPlay2 = explode ("/",$soundToPlay1);
    $soundToPlay3 = $soundToPlay2[4];
        

    echo '<input type="image" value="Play" alt="new" height="200px" src="'.$image.'" 
        onclick="cs_change_music(\'http://website/sounds/'.$soundToPlay3.'.mp3\');"></input>
        ';
  
}
?>

Source