nul*_*tek 5 link-to html5-audio ruby-on-rails-3
当我在Rails中使用link_to标记时,我正试图找出在后台播放wav文件的最佳方法(类似HTML5).
这是我的一个观点的示例link_to:
<%= link_to 'At Station', at_station_mdt_index_path, :class => 'btn btn-success btn-medium', :method => :put, :remote => true %>
Run Code Online (Sandbox Code Playgroud)
我想弄清楚当按下按钮时如何使用audio_tag来触发声音.我尝试在link_to ERB中组合audio_tag,但得到各种语法错误.
任何例子都将非常感谢.
更新时间01/04/14-10:18am CT:声音一次正确发射.但是,由于将link添加到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>
Run Code Online (Sandbox Code Playgroud)
这是播放wav文件的简单示例:
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>
Run Code Online (Sandbox Code Playgroud)
JavaScript的:
$('#playsound').click(function (e) {
$('#sound_effect')[0].currentTime = 0;
$('#sound_effect')[0].play();
return false;
});
Run Code Online (Sandbox Code Playgroud)
我currentTime = 0在播放前设置使它始终从头开始播放.
它不适用于IE,因为IE不支持wav文件.
| 归档时间: |
|
| 查看次数: |
4583 次 |
| 最近记录: |