Rails link_to и audio_tag

Question

Я пытаюсь найти лучший способ воспроизвести wav-файл в фоновом режиме (HTML5-подобный), когда я использую тег link_to в Rails.

Вот пример link_to от одного из моих взглядов:

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

Я хотел бы, чтобы выяснить, как использовать audio_tag, чтобы вызвать звук при нажатии кнопки. Я попытался объединить audio_tag в link_to ERB, но получить всевозможные синтаксические ошибки.

Любые примеры были бы весьма признательны.

Обновлено 01/04/14-10: 18am CT: Звуки срабатывают один раз и правильно. Однако, так как добавление: идентификатор в link_to ссылки больше не вызывают путь рельсы, чтобы изменить объект, только воспроизводит звук

Просмотр кода:

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

Как о чем-то вроде этого ...

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.

Answer 3

Я делаю несколько предположений в этом ответе:

1. Вы используете HTML5 разметку
2. Вы хотите стилизованную ссылку «кнопку», чтобы вызвать звук,
3. Вы не хотите для отображения по умолчанию HTML5 аудиоплеер в
4. звуковые файлы хранятся в public/audios
5. звуковой файл с предварительно загруженным на странице

К сожалению, исправлена ​​ошибка в Rails 3.2: audio_tag (https://github.com/rails/rails/issues/9373). Поэтому, если вы не используете Rails 4, вам лучше использовать фактическую разметку HTML.

В этом примере мы загружаем mp3-файл в аудиоплеер HTML5 по умолчанию. Следующий фрагмент должен быть в вашем файле вида.

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