在 Rails 上使用 Ruby 单击图像时添加声音

Question

我正在尝试在我的网站上单击图像（或按钮）时添加提示音。我尝试了两种不同的方法来做到这一点，但 none 正在工作。我正在使用 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>

在 Rails 上使用 Ruby 单击图像时添加声音

Add sound when click on image with Ruby on Rails

html

javascript

ruby-on-rails

ruby-on-rails-5