I'm converting a website I developed in markdown into a quarto book.
I used to have a sound player, that looked like so:
html_tag_audio <- function(file, type = c("wav")) {
type <- match.arg(type)
htmltools::tags$audio(
controls = "",
htmltools::tags$source(
src = file,
type = glue::glue("audio/{type}", type = type)
)
)
}
and then, I would refer to it like so:
html_tag_audio("Sound/mylocalsoundfile.mp3", type = "wav")
This doesn't seem to work any longer in quarto. I feel this has something to do with the file/folder structure since I get a notification during rendering saying: /Sound/mylocalsoundfile.mp3 (404: Not Found).
How do I properly include a sound player and link a local file?
It works now with absolute paths. So it looks like quarto paths are a bit different than regular Rmd. This works: html_tag_audio("../Sound/mylocalsoundfile.mp3", type = "wav")
It shoudn't be that different. If you are willing too, can you share more about you project structure ?
It seemed to be we are not detecting <audio><source src = > from what I can see in our resource detection, so I wouldn't expect this to work.
Are you sure you fix is working if you deployed the website (meaning only the _site folder ?)
It seems to be by using ../ you are allowing the HTML page to reach outside of _site folder, so if you open your project locally it would find the source Sound directory. But does it work if you run quarto preview or deploy your website ?
We are supposed to detect them, at least to our best
For those not found, the resources configuration allow to tell quarto which are external resources tô copy to the _site folder because required by the deployed website
Mmmhh you're correct... This will not work once deployed (and indeed it does not work in preview mode). For some reason, the Sound folder is not being copied inside the _site (in my case it's _book) directory. It's really strange because another multimedia directory (Video) does get copied over (unlike sound, the video is not called via src, but via ) My tree structure looks like:
I think this work using this syntax because it will be parsed as Markdown and handled for detection, before being outputed to HTML. When you provide HTML code directly in the .qmd (as with htmltools), it is another code where we post process the HTML, and we are missing the tags. See issue.
I modified my YAML to include a manual resource configuration:
project:
type: book
resources:
- "*.mp3"
- "*.m4a"
The Sound folder now gets copied over into the _book directory. I can confirm this fixes, but the autoconfiguration somehow misses src specified locations. Many thanks for the help!
