Rails link_to and audio_tag

Question

I'm trying to figure out the best way to play a wav file in the background (HTML5-like) when I use a link_to tag in Rails.

Here's a sample link_to from one of my views:

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

I'd like to figure out how to use the audio_tag to trigger a sound when the button is pressed. I've tried combining the audio_tag in the link_to ERB but get all sort of syntax errors.

Any examples would be greatly appreciated.

Updated 01/04/14-10:18am CT: The sounds fire once and properly. However since adding the :id to the link_to the links no longer trigger the rails path to change the object, only plays the sound

View code:

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

Here's a simple example for playing a wav file:

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

I set currentTime = 0 before playing to make it always plays from the beginning.

It does not work on IE because IE does not support wav file.

Answer 2

I'm making a few assumptions in this answer:

1. You're using HTML5 markup
2. You want a styled link "button" to trigger a sound
3. You don't want to display the default HTML5 audio player
4. The sound files are stored in public/audios
5. The sound file is pre-loaded on the page

Unfortunately, the Rails 3.2 implementation of audio_tag is broken (https://github.com/rails/rails/issues/9373). So unless you're using Rails 4, you're better off using the actual HTML markup.

In this example, we're loading an mp3 file in the the default HTML5 audio player. The following snippet should be in your view file.

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

Since the HTML5 audio player comes with "built-in" display chrome, you may want to position it off the page with css. In this example, you would add the following to your css file:

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

Your link_to markup would look something like:

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

The javascript to actually play the sound will look similar to this jQuery example:

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

This example can easily be extended to support multiple files by small changes to the link_to tag and javascript.