Rails link_to 和 audio_tag

Question

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

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

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

我想知道如何使用 audio_tag 在按下按钮时触发声音。我尝试在 link_to ERB 中组合 audio_tag，但出现各种语法错误。

任何示例将不胜感激。

更新于 01/04/14-10:18am CT：声音一次正确地触发。但是，由于将 :id 添加到 link_to 链接不再触发 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>

Answer 1

这是一个播放 wav 文件的简单示例：

http://jsfiddle.net/84pav/

HTML：

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

JavaScript：

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

我在播放前设置了currentTime = 0，让它总是从头开始播放。

它在 IE 上不起作用，因为 IE 不支持 wav 文件。

Answer 2

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

1. 您正在使用 HTML5 标记
2. 您想要一个样式化的链接“按钮”来触发声音
3. 您不想显示默认的 HTML5 音频播放器
4. 声音文件存储在public/audios
5. 声音文件已预加载到页面上

不幸的是，audio_tag 的 Rails 3.2 实现已损坏 (https://github.com/rails/rails/issues/9373)。因此，除非您使用的是 Rails 4，否则最好使用实际的 HTML 标记。

在这个例子中，我们在默认的 HTML5 音频播放器中加载一个 mp3 文件。以下 sn-p 应该在您的视图文件中。

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

由于 HTML5 音频播放器带有“内置”显示镶边，您可能希望使用 css 将其放置在页面之外。在此示例中，您将在您的 css 文件中添加以下内容：

.audio_player {
  position: absolute;
  top: -999em;
{

您的 link_to 标记看起来像：

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

实际播放声音的 javascript 看起来类似于这个 jQuery 示例：

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

通过对 link_to 标记和 javascript 进行小的更改，可以轻松扩展此示例以支持多个文件。

Answer 3

这样的事情怎么样...

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
});

然后将playsound id 添加到您的链接中。