时间戳

首页 > 解决方案 > 使用 Ruby on Rails 单击图像时添加声音

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

问题描述

单击我网站上的图像（或按钮）时，我正在尝试添加哔声。我尝试了两种不同的方法来做到这一点，但都没有奏效。我正在使用 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但没有弄清楚。难道我做错了什么 ？

标签： javascripthtmlruby-on-railsruby-on-rails-5

解决方案

您可以创建一个委托事件处理程序，而不是使用内联脚本标签，该处理程序将与 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>

推荐阅读