R Shiny 应用程序中的 HTML5 音频播放器在设置 currentTime 时转到曲目开头

Question

我使用 R闪亮创建了一个音频播放器，它创建了一个像这样的音频播放器：

  tags$audio(
    src = "song.mp3",  
    type = "audio/mp3",
    controls = "controls"         
  )

我还在应用程序中使用

runjs

更改播放位置的控件来设置音频播放器的

currentTime

属性，从而更改音频文件的播放时间。一般来说，它工作得很好，但有时，我将

currentTime

设置为轨道中间的一个点，但它只是返回到轨道的开头。一旦这种行为开始，它就不会停止（即每次我更改

currentTime

时，它都会继续返回到曲目的开头），直到我重新启动应用程序。这似乎是 HTML 音频对象的一个已知问题，如此处 here 和其他地方所述。解决方法似乎是将

response headers

设置如下：

accept-ranges: bytes
Content-Length: BYTE_LENGTH_OF_YOUR_FILE
Content-Range: bytes 0-BYTE_LENGTH_OF_YOUR_FILE/BYTE_LENGTH_OF_YOUR_FILE
content-type: audio/mp3

我的问题是，如何在 R Shiny 应用程序中设置响应标头。我不知道该将其添加到应用程序中的何处。我是在应用程序启动时还是创建音频播放器时设置它？

抱歉，我没有这方面的 REPREX。这并不是我真正想要的错误修复。我只是在寻找一种设置/指定上述响应标头的方法。此外，在上面的链接中，它提供了响应标头的图像。我不知道如何找到这些信息，如果能够查看和检查这些信息就好了。

编辑

我现在有一个针对这个问题的 REPREX。我已经在三台机器上尝试过（都是 Windows 11，在 Shiny 浏览器和 Chrome 上进行了测试）。其中两个的行为是一致的（按钮使曲目转到开头而不是 10 秒），第三个则在第一次运行时失败，然后开始使用所需的 bahviour。我从here下载了mp3并将其放在app.R文件旁边的www文件夹中。

library(shiny)

# Define the local audio file path
local_audio_file <- "audio_db6591201e.mp3"

ui <- fluidPage(
  tags$h2("Local Audio Player"),
  
  # Audio player
  tags$audio(id = "audioPlayer", 
             src = local_audio_file,  # Use the local file path
             type = "audio/mpeg", 
             controls = TRUE),
  
  # Progress bar
  tags$progress(id = "progressBar", value = 0, max = 100, style = "width: 100%;"),
  
  # Button to skip to 10 seconds
  actionButton("skipButton", "Skip to 10 seconds")
)

server <- function(input, output, session) {
  # Initialize the audio progress
  observe({
    session$sendCustomMessage(type = "initAudio", message = NULL)
  })
  
  # Skip to 10 seconds when button is clicked
  observeEvent(input$skipButton, {
    session$sendCustomMessage(type = "skipAudio", message = 10)
  })
}

# JavaScript code for audio control
jsCode <- "
Shiny.addCustomMessageHandler('initAudio', function(message) {
  var audio = document.getElementById('audioPlayer');
  var progressBar = document.getElementById('progressBar');
  
  audio.ontimeupdate = function() {
    var percentage = (audio.currentTime / audio.duration) * 100;
    progressBar.value = percentage;
  };
});

Shiny.addCustomMessageHandler('skipAudio', function(seconds) {
  var audio = document.getElementById('audioPlayer');
  audio.currentTime = seconds;
});
"

# Run the Shiny app
shinyApp(
  ui = tagList(
    tags$head(tags$script(HTML(jsCode))),
    ui
  ), 
  server = server
)

Answer 1

我能够在 Linux 中使用 Chrome 重现您的错误。

这里的答案确实有帮助，但是那里提出的

.b64EncodeFile()

函数对音频文件进行编码，因为

base64

在

markdown

包中不再可用。

相反，我们可以使用

xfun::base64_uri()

函数。一旦编码为

base64

，浏览器显然能够访问文件的正确标头。

该错误已被删除：

local_audio_file <- "www/audio_db6591201e.mp3"
as_b64 = xfun::base64_uri(local_audio_file)

ui <- fluidPage(
  tags$h2("Local Audio Player"),
  
  # Audio player
  tags$audio(id = "audioPlayer", 
             src = as_b64,  # Use the base64 encoded file
             type = "audio/mpeg", 
             controls = TRUE),

# ...