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

Question

我正在尝试在我的网站上单击图像（或按钮）时添加提示音。我尝试了两种不同的方法来执行此操作，但是没有一种有效。我正在使用Rails 5.2和Ruby 2.6.3。

所以我的mp3音频在my-project-name/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

在my-project-name/app/views/pages/home.html.erb中，我第一次尝试使用此代码：

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

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

而且我有第二次尝试的代码（仍在my-project-name/app/views/pages/home.html.erb中：

<!-- 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>

我也尝试过audio_tag，但没有弄清楚。我做错什么了吗？

Answer 1

代替使用内联脚本标签，您可以创建将与Turbolinks一起正常使用的委托事件处理程序。

// app/assets/javascripts/beeper.js
const audio = new Audio('http://soundbible.com/grab.php?id=1815&type=mp3');
document.addEventListener('click', (event)=>{
  let el = event.target;
  if (el.matches('.beeper')) {
    console.log("beep!");
    audio.play();
    el.classList.toggle("disabled");
  }
});

<button class="beeper">Click me</button>