Как изменить громкость с помощью Javascript в Shiny?

Question

Я пытаюсь изменить громкость звукового тега в приложении Shiny. Некоторые сайты, на которые я смотрел, показывают, что вы можете напрямую использовать аргумент «громкость» в аудио-теге, чтобы установить его, но я не смог его воспроизвести.

Этот сайт https://www.w3schools.com/jsref/prop_audio_volume.asp и https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_audio_volume, которые я обнаружил, используют Javascript для обновления тома, но я не могу понять, как вызвать функцию, созданную в Javascript в Shiny. Любая помощь очень ценится.

library(shiny)
library(shinyjs)

ui <- fluidPage(
  useShinyjs(),
  tags$audio(id = "myAudio", controls = NA, autoplay = NA, tags$source(src="aud.mpeg")),
  br(),
  actionButton("mybutton", "Submit"),

  tags$script('
    var x = document.getElementById("myAudio").onclick 
    function setHalfVolume() {
      x.volume = 0.2;
    };
  ')
)

server <- function(input, output) {
  observeEvent(input$mybutton, {
    setHalfVolume()
  })

}

shinyApp(ui = ui, server = server)

Answer 1

Вы очень близки к цели, но у вас есть некоторые проблемы с получением правильных идентификаторов.

Чтобы следовать по пути, замените скрипт на:

document.getElementById("mybutton").onclick = 
    function setHalfVolume() {
        document.getElementById("myAudio").volume = 0.2;
    };

Атрибут onclick кнопка должна быть изменена, а не атрибут аудио. И аудио DOM имеет атрибут громкости, который нужно изменить.

Еще одним подходом было бы непосредственное использование атрибута onclick для actionButton.

tags$script('
    decrease = function(){ document.getElementById("myAudio").volume = 0.2;}
')
tags$audio(id = "myAudio", controls = NA, autoplay = NA,     tags$source(src="sound.mp3")),
actionButton("lowerButton", "lower", onclick="decrease()")

Answer 2

Спасибо за вопрос и ответ. Это очень помогло. У меня есть продолжение: можно ли изменить громкость с помощью ползунка? Таким образом, было бы необходимо иметь входную переменную для сценария. Примерно так (но, похоже, не работает):

tags$script('volumeChange = function(in){ document.getElementById("myAudio").volume = in;}'),
#calibration slider
sliderInput("levelSlider", "Level:",min = 0, max = 1, value = 0.3),
# calibrate level button
actionButton("playButton", "Play sound", onclick=paste0("volumeChange(","levelSlider$value",")")),