Javascript 使用Ruby on Rails单击图像时添加声音

我试图在点击我网站上的图像（或按钮）时添加一个嘟嘟声。我尝试了两种不同的方法，但都不管用。我使用的是Rails 5.2和Ruby 2.6.3

因此，我的mp3音频位于

我的项目名称/app/assets/audios/sound.mp3

在

my project name/config/application.rb

中，我有以下代码：

class Application < Rails::Application
  config.load_defaults 5.2
  config.assets.precompile << "audios/*"
end

我第二次尝试时使用了以下代码（仍在

我的项目名称/app/views/pages/home.html.erb

）：

点击我！
const boutton=document.querySelector（“clickme”）；
boutton.addEventListener（“单击”，（事件）=>{
boutton.classList.toggle（“禁用”）；
boutton.innerText=“宾果！”；
const audio=新音频（'/app/assets/audios/sound.mp3'）；
音频播放（）；
});

---

我也试过了，但没有找到答案。我做错什么了吗？

您可以创建一个委托事件处理程序，该处理程序将与TurboLink一起正常工作，而不是使用内联脚本标记

//app/assets/javascripts/beeper.js
const audio=新音频文件http://soundbible.com/grab.php?id=1815&type=mp3');
document.addEventListener（'单击'，（事件）=>{
设el=event.target；
如果（el.匹配（'.蜂鸣器'））{
console.log（“嘟嘟！”）；
音频播放（）；
el.classList.toggle（“禁用”）；
}
});
单击我
而不是使用内联脚本标记，您可以创建一个委托事件处理程序，它将与TurboLink一起正常工作


//app/assets/javascripts/beeper.js
const audio=新音频文件http://soundbible.com/grab.php?id=1815&type=mp3');
document.addEventListener（'单击'，（事件）=>{
设el=event.target；
如果（el.匹配（'.蜂鸣器'））{
console.log（“嘟嘟！”）；
音频播放（）；
el.classList.toggle（“禁用”）；
}
});
单击我
谢谢，您的代码正在运行！但我的不是，我想我的相对路径有问题吗？我有：
const audio=new audio（'../../assets/audios/sound.mp3'）
是的，您希望将文件的扩展名更改为
.js.erb
，并使用资产路径帮助程序链接到该文件<代码>新音频（“”
而不是硬编码。请参阅Thx以获得您的快速答案！现在我有一个错误：“资产”audios/sound.mp3“不在资产管道中。”。我尝试了
raketmp:clear
和
rakeassets:precompile
，但仍然不起作用。您尝试过重新启动吗？不过，您不应该在开发过程中进行任何预编译。这是否也适用于
资产
中的其他文件夹？例如，如果为了消除bug而将文件放入
/assets
或
/assets/images
？谢谢，您的代码正在工作！但我的不是，我想我的相对路径有问题吗？我有：
const audio=new audio（'../../assets/audios/sound.mp3'）
是的，您希望将文件的扩展名更改为
.js.erb
，并使用资产路径帮助程序链接到该文件<代码>新音频（“”

而不是硬编码。请参阅Thx以获得您的快速答案！现在我有一个错误：“资产”audios/sound.mp3“不在资产管道中。”。我尝试了

raketmp:clear

和

rakeassets:precompile

，但仍然不起作用。您尝试过重新启动吗？不过，您不应该在开发过程中进行任何预编译。这是否也适用于

资产

中的其他文件夹？例如，如果为了消除bug而将文件放入

/assets

或

/assets/images

？

<!-- First attempt -->
<a href="#" onmousedown="bleep.play()">
   <%= image_tag('mypicture.jpg') %>
</a>

<script>
  var bleep = new Audio();
  bleep.src = "../../assets/audios/sound.mp3";
</script>

<!-- Second attempt -->
<button id="clickme" class="btn btn-primary btn-lg">
   Click me!
</button>

<script>    
   const boutton = document.querySelector("#clickme");
   boutton.addEventListener("click", (event) => {
      boutton.classList.toggle("disabled");
      boutton.innerText = "Bingo!";
      const audio = new Audio('/app/assets/audios/sound.mp3');
      audio.play();
   });
</script>