0

Hi I'm trying to develop a Shiny app where a moveable slider triggers the audio samples, whereby each point in a slider (say ranging from 0 to 100) is mapped to a specific audio. So moving the slider will alter the sound according to the slider position. Ideally, I would want the transition between slider positions to smooth sounding and highly interactive.

I'm guessing I would need to use the code below to map each slider value to a specific audio file.

tags$audio(src = "sound.mp3", type = "audio/mp3", autoplay = NA, controls = NA)

Anyone know of the best approach for getting such task done or give me some pointers?

ismirsehregal
  • 30,045
  • 5
  • 31
  • 78
Craftwerk
  • 57
  • 4

1 Answers1

1

You can change the src argument via JS and trigger the change with the slider. Please check the following:

library(shiny)
library(htmltools)
library(tuneR)
library(shinyjs)

xseq <- round(seq(from = 440, to = 880, length.out = 100), digits = 0)

if(!dir.exists("audio")){
  dir.create("audio")
}

# create some audio files
filenames = paste0("audio/", xseq, ".wav")
for (i in seq_along(xseq)) {
  Wobj <- sine(xseq[i])
  writeWave(Wobj, filename = filenames[i])
}

# Add directory of static resources to Shiny's web server
addResourcePath(prefix = "audioResources", directoryPath = "audio")

myAudioResources <- paste0("audioResources/", xseq, ".wav")

ui <- fluidPage(
  useShinyjs(),
  tags$audio(id = "myaudio", controls = NA, autoplay = NA, src = ""),
  sliderInput(inputId = "selectTrack", "Select track", min = 1,
              max = length(xseq),
              value = 1)
)

server <- function(input, output, session) {
  observeEvent(input$selectTrack, {
    runjs(sprintf("document.getElementById('myaudio').src = '%s';", myAudioResources[input$selectTrack])) # dynamically change src
  })
}

shinyApp(ui, server)

This is based on my earlier answer here.

ismirsehregal
  • 30,045
  • 5
  • 31
  • 78
  • thanks for this answer but I was wondering how can I modify this to input my own mp3 files instead of generated sine tones. Could you give me pointers? – Craftwerk Oct 23 '20 at 14:49
  • You need to make the folder containing the mp3s available to the webserver via `addResourcePath` and point the `src` to the according file. – ismirsehregal Oct 27 '20 at 08:51