Ruby on rails 3 Rails链接到和音频标签

当我在Rails中使用link_标记时，我试图找出在后台播放wav文件（类似HTML5）的最佳方式

以下是我的一个观点的链接示例：

<%= link_to 'At Station', at_station_mdt_index_path, :class => 'btn btn-success btn-medium', :method => :put, :remote => true %>

'btn btn成功btn中等'，：方法=>:put，：远程=>true%>

我想知道当按下按钮时如何使用音频标签触发声音。我尝试将链接中的audio_标记组合到ERB中，但出现了各种语法错误

任何例子都将不胜感激

更新时间：美国东部时间01/04/14-10:18：声音发出一次且正确。但是，由于将：id添加到链接中，链接不再触发rails路径来更改对象，因此只播放声音

查看代码：

    <%= link_to 'En Route', en_route_mdt_index_path(:call_id => call.id), :class => 'btn btn-warning btn-medium', :method => :put, :remote => true, :id => "er" %>
            <%= link_to 'On Scene', on_scene_mdt_index_path(:call_id => call.id), :id => 'to', :class => 'btn btn-primary btn-medium', :method => :put, :remote => true, :id => "os"  %>
            <%= link_to 'To Hospital', to_hospital_mdt_index_path(:call_id => call.id), :class => 'btn btn-warning btn-medium', :method => :put, :remote => true, :id => "to" %>

 <audio id="en-route" class="audio_player" preload="true">
    <source src="audios/en-route.wav" type="audio/wav">
</audio>

<audio id="on-scene" class="audio_player" preload="true">
    <source src="audios/on-scene.wav" type="audio/wav">
</audio>

<audio id="to-hospital" class="audio_player" preload="true">
    <source src="audios/to-hospital.wav" type="audio/wav">
</audio>

<script>
$('#er').click(function (e) {
    e.preventDefault();
    $('#en-route')[0].currentTime = 0;
    $('#en-route')[0].play();
    return true;

});

$('#os').click(function (e) {
    e.preventDefault();
    $('#on-scene')[0].currentTime = 0;
    $('#on-scene')[0].play();
    return true;

});

$('#to').click(function (e) {
    e.preventDefault();
    $('#to-hospital')[0].currentTime = 0;
    $('#to-hospital')[0].play();
    return true;

});
</script>

call.id），：class=>'btn-btn-warning-btn-medium'，：method=>:put，：remote=>true，：id=>“er”%>
call.id），：id=>'to'，：class=>'btn btn主btn媒体'，：method=>:put，：remote=>true，：id=>“os”%>
call.id），：class=>'btn btn warning btn medium'，：method=>：put，：remote=>true，：id=>“到”%>
$（'#er'）。单击（函数（e）{
e、 预防默认值（）；
$（'#在途中'）[0].currentTime=0；
$（“#在途中”）[0]。播放（）；
返回true；
});
$（'#os'）。单击（函数（e）{
e、 预防默认值（）；
$（'现场'）[0].currentTime=0；
$（“#现场”）[0]。播放（）；
返回true；
});
$（'#to'）。单击（函数（e）{
e、 预防默认值（）；
$（“#到医院”）[0].currentTime=0；
$（“#到医院”）[0]。播放（）；
返回true；
});

像这样的东西怎么样

function playSound(soundfile) {
  document.getElementById("playsound").innerHTML=
  "<embed src=\""+soundfile+"\" hidden=\"true\" autostart=\"true\" loop=\"false\" />";
}

$('#playsound').observe('click', function (event) {
  playSound('URL to soundfile');
  event.stop(); // Prevent link from following through to its given href
});

功能播放声音（声音文件）{
document.getElementById（“playsound”）.innerHTML=
"";
}
$（“#播放声音”）。观察（'click'，函数（事件）{
播放声音（“声音文件的URL”）；
event.stop（）；//阻止链接一直到其给定href
});

---

然后将

playsound

id添加到链接中。

我在这个答案中做了一些假设：

您正在使用HTML5标记

您需要一个样式化的链接“按钮”来触发声音

您不想显示默认的HTML5音频播放器

声音文件存储在

public/audios

声音文件已预加载到页面上

不幸的是，

audio\u标签的Rails 3.2实现被破坏（）。因此，除非您使用的是Rails 4，否则最好使用实际的HTML标记

在本例中，我们在默认的HTML5音频播放器中加载一个mp3文件。以下代码段应位于视图文件中

<audio id="sound_effect" class="audio_player" controls="false" preload="true">
  <source src="/audios/TrainWhistle.mp3" type="audio/mpeg">
</audio>

您指向标记的链接将类似于：

<%= link_to 'At Station', '#', class: 'btn btn-success btn-medium', id: 'playsound' %>

通过对
link\u to
标记和javascript进行小的更改，可以轻松扩展此示例以支持多个文件。
以下是播放wav文件的简单示例：


HTML:

我在播放之前设置了
currentTime=0
，使其始终从一开始播放

它不适用于IE，因为IE不支持wav文件。
感谢JS。我已经尝试过了，但是我得到了未捕获的TypeError:Object[Object Object]在浏览器控制台中没有“observe”方法，并且它不会触发soundbyte。我已经更新了我的代码，以反映您的建议，以防我的语法错误。我无法在本地尝试它，该示例主要是为了展示这个概念，您可能需要对它进行一些调整才能为您工作。我正在研究它，但我是一个JS/jQuery新手。我需要找到更多的例子，这样我才能更好地理解它，并能得到一些工作。拔出我的头发谢谢，这是正确的路线。我编辑了代码以反映我的设置（我正在使用public/audios目录中的wav文件）。CSS确实隐藏了音频播放器，这很好。我将其取消隐藏，以查看当我单击链接时发生的情况，它不会播放任何内容。它只是快速地跳过文件。有什么想法吗？我已经编辑了上面的代码示例以反映我的配置。当我取消隐藏audio_player类并尝试播放时，什么都不会发生。它只是快速跳过文件。另外，无论我是否启用控件，卷的图标都有一条斜线。顺便说一句，我使用的是chrome。虽然这项功能将用于iOS Safari。你能发布链接吗？可能有助于调试。我只有在开发环境中才有。它没有部署到生产环境中。抱歉这么麻烦。强制声音从一开始就一直播放不是个坏主意。我也会用这个更新我的答案。它可能负责“高速”播放。这实际上是可行的。但是，在通过Javascript刷新我的分区后，链接不再工作。它将只工作，一旦我重新加载整个页面。我的JS函数每10秒刷新一次片段，以获取新数据，这导致音频标签无法加载。仅在页面刷新中。在您的问题中，您从application.js中得到了错误。这意味着您将脚本放在资产中的一个js文件中。我猜您应该在布局中加载application.js。通过部分重新加载，将替换DOM元素。click事件需要再次绑定到新的DOM元素。但是您的脚本只加载了一次，因此无法工作。有两种方法可以解决这个问题：（1）将脚本放在部分中，以便在每次重新加载页面时重新运行脚本，或者（2）在重新加载页面后，您自己调用函数绑定事件。我尝试将音频元素和javascript移到部分中。即使使用适当的ID元素区分两个链接，页面上的任何链接都会触发两种声音。另外，当index.html.erb javascript每10秒重新加载一次时，它会同时播放两种声音。我已经粘贴了我当前的代码供您查看。@teknull，如果您想建议编辑代码，请使用注释，以便Tyler Nguyen可以在他们愿意的情况下影响他们，如何？请注意不要在编辑中更改代码。@teknull，您应该删除音频标记中的autoplay=“false”。它会导致音频文件被删除
<%= link_to 'At Station', '#', class: 'btn btn-success btn-medium', id: 'playsound' %>

$('#playsound').on('click', function (e) {
  e.preventDefault();
  $('#sound_effect').currentTime = 0;
  $('#sound_effect').play();
  return false;
});

<a href="javascript:void(0)" id="playsound">At Station</a>

<audio id="sound_effect" class="audio_player" preload="auto">
    <source src="http://www.villagegeek.com/downloads/webwavs/alrighty.wav" type="audio/wav">
</audio>

$('#playsound').click(function (e) {
    $('#sound_effect')[0].currentTime = 0;
    $('#sound_effect')[0].play();
    return false;
});