Воспроизвести mp3 файл на основе имени изображения

Question

Давайте начнем с кода.

$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" height="300px" src="'.$image.'"
    onclick="bleep.play()";></input>';
    
    echo $soundToPlay3;
    echo "
    <script>
    var bleep = new Audio();
    bleep.src = 'http://webaddress/pages/bleep.mp3';
    </script>
         ";

}
?>

Я пытаюсь сделать

1. поиск в папке 2. отобразить все изображения
2. щелкнуть по изображению для воспроизведения .mp3 с именем изображения

например

щелкните изображение с именем a.png и воспроизведите mp3 с именем a.mp3 щелкните изображение с именем b.png и воспроизведите mp3 с именем b.mp3

Приведенный выше код показывает все изображения, которые у меня есть тестовое echo $ soundToPlay3, просто чтобы проверить, я получаю правильное имя файла, и я это делаю.

он перестает работать, если я пытаюсь заменить

bleep.src = 'http://webaddress/pages/bleep.mp3';

с

bleep.src = 'http://webaddress/pages/$soundToPlay3.mp3';

Это должно быть просто. У меня так много изображений, что я не могу сделать все вручную, один за другим.

Полагаю, это как-то связано со смешиванием javascript и php. Некоторое время я был вне связи.

Заранее спасибо Daz

Answer 1

Как сказал @CBroe, мне нужно поменять

onclick="bleep.play()"

на другую функцию.

После небольшого поиска в Google et c я нашел функцию из эта страница https://www.codespeedy.com/change-html5-audio-player-src-file-in-javascript/

А вот и рабочий код

Всем спасибо!

<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>
        ';
  
}
?>