javascript - 根据图像名称播放 mp3 文件
问题描述
让我们从代码开始。
$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>
";
}
?>
我想做的是
- 搜索文件夹 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 有关。我已经有一段时间没有联系了。
提前感谢达兹
解决方案
正如@CBroe 所说,我需要交换
onclick="bleep.play()"
用于另一个功能。
经过一番谷歌搜索后,我从这个页面找到了一个函数 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>
';
}
?>
推荐阅读
- parameters - Blazor 3.1 组件标记帮助程序参数
- java - 如何显示LinkedList的所有元素?
- javascript - 如何防止内部 div 的事件处理程序在外部 div 的事件处理程序中执行?
- firebase - 从 Firebase 存储中提取图像的 React-Native
- reporting-services - 如何切换 SSRS 子报表标题的可见性?
- forms - 联系表格中的 ReCapatcha v3 - 防止误报的最佳实践
- android - 如何在android中使用Retrofit将json对象发送到另一个json对象中?
- python - 使用列表中的字符串动态创建嵌套字典
- ios - 在 Xcode 11 中分组时无法创建类的实例
- r - Suppress line breaks created by RMarkdown