Reproduce music after click an actionBttn shiny flexdashboard

Hi all!
I'd like to reproduce a sound after click the actionbttn. I read that using the library shinyjs could work. But I don't know how to do it. Any recommendation? please.
I tried to follow what is mentioned in this post:

Here is the code:

---
title: "Music"
author: "Cruddy"
output:
  flexdashboard::flex_dashboard:
  orientation: rows
  social: menu
runtime: shiny
---

```{r}
library(shiny)
library(shinydashboard)
library(shinyWidgets)
library(shinyjs)

Pestaña

shiny::includeScript('www/howler.js')

Sidebar {.sidebar}

actionBttn("go","Save","pill"
   ,"warning", icon = icon("check-circle"))

observeEvent(input$go, ({
  shinyjs::runjs("var music = new Howl({src: ['www/tono.mp3'],autoplay: true});")
})
)

Please see my related answers here and here.

@agus do you have any advice? thanks

Hi! Nice to see that my previous answer somewhat helped :).

From the code you shared above it's not clear to me whether you have included useShinyjs() in your UI. or whether you have www/howler.js file in your app dir.

Have you tried running this example to test whether you can hear the coin sound?

Yes, I tried your example and worked!
Nevertheless, now I'm using flexdashboard, i.e. I'm running the app through a .rmd markdown file. So there is not a ui, nor server variable.

Here is a picture of the code:


And as far as I know, I'm correctly using the howler file.

Thanks for answering @agus !

Ok, but it seems that you can add useShinyjs(rmd = TRUE) in your first chunk, as in these examples.

HTH

Now is working!! (using an internet file) :slight_smile:

Just a little detail. Instead of an internet sound, I want to use a local .mp3 file. So I changed the line from:

observeEvent(input$go, ({
   shinyjs::runjs(
       "var music = new Howl({src:['http://www.sonidosmp3gratis.com/sounds/mario-coin.mp3'],
                               autoplay: true});")
})

to this new:

observeEvent(input$go, ({
         shinyjs::runjs(
      "var music = new Howl({src:['www/tono.mp3'],
                               autoplay: true});")
})

And in this case, it doesn't work. I don't know why :confused:
Here is the proof that the music file is in the correct folder.
mp3file

Have you tried dropping the www folder:

src:['/tono.mp3']?

Yes, doesn't work :confused: @ismirsehregal

Please see this related post:

Nop, is not working :confused: @ismirsehregal

Progress!

Ok, there must be some issue with the relative path.

Have you tried with src:['tono.mp3'] (without the fwd slash)?

If this doesn't work, maybe you can also try adding the full (not relative) path of your file, like D:/path/to/your/file/tono.mp3 (this seems unlikely to work, but it's worth a try since it is really easy to test).

Last, if everything fails, one very lousy workaround would be to have your .mp3 file hosted somewhere (github?) and source it from there.

HTH

Hey @cruddy, did this work in the end?

@agus no :confused:
It works only using the complete link from internet.
But there is something else. When I open the app on the browser (microsoft edge), the sound doesn't play, but locally on R studio, does.

Thanks for the help!

This topic was automatically closed 54 days after the last reply. New replies are no longer allowed.

If you have a query related to it or one of the replies, start a new topic and refer back with a link.