确保导航链接在重定向到页面之前播放声音(rails 7)
确保导航链接在重定向到页面之前播放声音(rails 7)
提问于 2022-07-31 22:15:02
我正在为我的非语言女儿开发一个AAC应用程序。这个想法是，她会点击一个类别(图像)导航链接，然后她将得到一个页面的其他图像基于该类别。每一幅图像都与一个声音相连。声音在索引和类别过滤图像正确的工作，但是当我点击导航链接页面加载结果和重定向之前，导航链接播放过快。我试着让JS慢下来但没成功。谁能给我指出正确的方向吗？
posts/_header.html.erb
<% if !@categoriez.nil? %>
<% @categoriez.each do |category| %>
<ul class="navbar-nav me-auto mb-2">
<li class="nav-item">
<%= audio_tag(polymorphic_path(category.sound), class: "audio-play", id: "#{category.category}") %>
<%= link_to image_tag(category.image, class:"category-pic"), posts_path(:cate => category.id), :onclick =>"play(\"#{category.category}\")", class:"p-1 audioButton" %>
</li>
</ul>
<% end %>
<% end %>
<script>
function play(element){
var audio = document.getElementById(element);
var isPlaying = audio.currentTime > 0 && !audio.paused && !audio.ended && audio.readyState > audio.HAVE_CURRENT_DATA;
setTimeout(function(){
if (!isPlaying) {
audio.play();
}
}, 5000);
}
</script>回答 1
Stack Overflow用户
回答已采纳
发布于 2022-08-01 02:38:32
当声音在单击事件之后播放时，它不会停止实际事件的传播。您可以捕捉事件并停止它，然后当音频播放完毕后，导航到链接的URL。
<%= link_to "category 1", "/category/1",
onclick: "play(event)",
data: { audio: audio_path("sound.mp3") } %>
<script type="text/javascript">
function play(event){
event.preventDefault(); // stop the click
const link = event.target; // get the clicked link tag
const audio =
new Audio(link.dataset.audio); // create a new audio element
audio.onended = function() {
window.location = link.href; // navigate to clicked link when audio stops playing
};
audio.play();
}
</script>或者如果您需要将标签保留在页面上：
<div>
<%= link_to "category 1", "/category/1",
onclick: "play(event)",
data: { audio: "category_1_sound" } %>
<%= audio_tag("sound.mp3", id: "category_1_sound") %>
</div>
<script type="text/javascript">
function play(event){
event.preventDefault();
const link = event.target;
const audio = document.getElementById(link.dataset.audio)
// you could add an event listener, instead, for "ended" event.
audio.onended = function() { window.location = link.href };
audio.play();
}
</script>更新
如果你想使用Turbo
<%= link_to "category 1", "/category/1",
onclick: "play(event)",
data: { audio: audio_path("sound.mp3") } %>
<script type="text/javascript">
function play(event) {
// Create audio element when clicking a link
const audio = new Audio(event.target.dataset.audio);
// Start playing the audio
audio.play();
// Let the click event propagate.
// Turbo will navigate without refreshing the page,
// which means audio won't be interrupted.
}
</script>将上述内容纳入刺激方案
# app/helpers/application_helper.rb
module ApplicationHelper
# I mean, even I got tired of typing these data options while
# testing for this answer.
def audio_link_to name = nil, options = nil, html_options = nil, &block
html_options ||= options
html_options["data"] ||= {}
html_options["data"].merge!({
controller: "audio-link",
action: "click->audio-link#playSound",
audio_link_audio_url_value: audio_path(html_options.delete(:play))
})
link_to name, options, html_options, &block
end
end# view
<%= audio_link_to "Category 1", "category/1", play: "audio.mp3" %>// app/javascript/controller/audio_link_controller.js
import { Controller } from "@hotwired/stimulus"
export default class extends Controller {
static values = {
audioUrl: String
}
playSound() {
const audio = new Audio(this.audioUrlValue);
audio.play();
}
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/73187279
复制相关文章
相似问题
腾讯云开发者
