如何在键盘击键上播放音频文件?

时间:2014-05-25 13:43:10

标签: ruby-on-rails html5-audio

我正在Rails 4中开发一个基于空间的环境,并且每次在用户填写表单时按下一个键时都想播放一个小的声音文件。换句话说,每次击键都会在打字时发出微小的咔哒声。

我也希望将此解决方案远程托管在资产文件夹中,因此用户无需安装某些第三方应用程序或软件即可实现。

使用导轨是否可以实现?或者,我需要将哪些其他框架/库/技术合并到Rails中,并且可以理解任何示例或示例链接。感谢。

1 个答案:

答案 0 :(得分:1)

<!-- Sound Manager -->  
<link rel="stylesheet" type="text/css" href="/soundman/demo/360-player/360player.css" />
<link rel="stylesheet" type="text/css" href="/soundman/demo/flashblock/flashblock.css" />       
<!--[if IE]><script type="text/javascript" src="/soundman/demo/360-player/script/excanvas.js"></script><![endif]-->                 


<!-- I'm not certain which of the following .js includes are actually required, I included them all and it works, however, some of these includes may not be necessary for the most basic of implementations. Please update if you find the minimal required includes -->

<script type="text/javascript" src="/soundman/demo/360-player/script/berniecode-animator.js"></script>          
<script type="text/javascript" src="/soundman/script/soundmanager2.js"></script>
<script type="text/javascript" src="/soundman/demo/360-player/script/360player.js"></script>
<script type="text/javascript">soundManager.setup({url: '/soundman/swf/'});</script>

<script type="text/javascript">
    function hoverCategory() {
    soundManager.setup({
      url: '/soundman/demo/_mp3/hover01.wav',
      onready: function() {
        var mySound = soundManager.createSound({
          id: "a2", // <----------- Make this unique or you might run into conflicts
          url: '/soundman/demo/_mp3/hover01.wav'    //  <------- mp3's work as well 
        });
        mySound.play(); // <------------- lots of cool options on mySound, play() being just one of them
      },
      ontimeout: function() {
      }
    });
}

</script>

<!-- Onclick -->
<%= f.check_box :radial, :onclick => "Javascript:hoverCategory()" %> 

<!-- Onmouseover -->
<%= f.submit :onmouseover => "Javascript:hoverCategory()" %>

<!-- Onkeypress -->
<%= f.text_field :status, :onkeypress => "Javascript:hoverCategory()" %>