根据图像名称播放 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 的图像并播放名为 a.mp3 的 mp3 单击名为 b.png 的图像并播放名为 b.mp3 的 mp3

上面的代码显示了我测试 echo $soundToPlay3 的所有图像，只是为了检查我得到了正确的文件名，我做到了。

如果我尝试更换它就会停止工作

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

和

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

这必须很简单。 我有这么多的图像，我不能一个一个地手工完成。

我认为这与混合 javascript 和 php 有关。 我已经有一段时间没有联系了。

提前感谢达兹

Answer 1

正如@CBroe 所说，我需要交换

onclick="bleep.play()"

对于另一个 function。

经过一番谷歌搜索后，我从这个页面https://www.codespeedy.com/change-html5-audio-player-src-file-in-javascript/找到了 function

这是工作代码

谢谢大家！

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