Embed sound player in quarto book

[tspeidel]

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?

[cderv]

It is possible the auto detection is not catching the sound file, and so not move it to _site

Did you try already to manually tell Quarto to consider the mp3 as a resource file ?
Using

project:
  type: website
  resources: 
    - "Sound/mylocalsoundfile.mp3"

Quarto - Website Tools

I'll check the auto detection code

[tspeidel]

@cderv

tell Quarto to consider the mp

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")

[cderv]

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 ?

I want to confirm if we have an issue here or not.
I have open this issue to track `<source src=>` is not identified for resource detection · Issue #5268 · quarto-dev/quarto-cli · GitHub

Usually with resources used in documents:

• 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

[tspeidel]

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 ![](Video/myvideo.m4v)) My tree structure looks like:

.
├── _book
│   ├── Figures
│   ├── index.html
│   ├── search.json
│   ├── site_libs
│   │   ├── bootstrap
│   │   │   ├── bootstrap-icons.css
│   │   │   ├── bootstrap-icons.woff
│   │   │   ├── bootstrap.min.css
│   │   │   └── bootstrap.min.js
│   │   ├── clipboard
│   │   │   └── clipboard.min.js
│   │   ├── crosstalk
│   │   │   ├── css
│   │   │   │   └── crosstalk.min.css
│   │   │   ├── js
│   │   │   │   ├── crosstalk.js
│   │   │   │   ├── crosstalk.js.map
│   │   │   │   ├── crosstalk.min.js
│   │   │   │   └── crosstalk.min.js.map
│   │   │   └── scss
│   │   │       └── crosstalk.scss
│   │   ├── datatables-binding
│   │   │   └── datatables.js
│   │   ├── datatables-css
│   │   │   └── datatables-crosstalk.css
│   │   ├── dt-core
│   │   │   ├── css
│   │   │   │   ├── jquery.dataTables.extra.css
│   │   │   │   └── jquery.dataTables.min.css
│   │   │   └── js
│   │   │       └── jquery.dataTables.min.js
│   │   ├── dt-ext-buttons
│   │   │   ├── css
│   │   │   │   └── buttons.dataTables.min.css
│   │   │   └── js
│   │   │       ├── buttons.colVis.min.js
│   │   │       ├── buttons.html5.min.js
│   │   │       ├── buttons.print.min.js
│   │   │       └── dataTables.buttons.min.js
│   │   ├── dt-ext-keytable
│   │   │   ├── css
│   │   │   │   └── keyTable.dataTables.min.css
│   │   │   └── js
│   │   │       └── dataTables.keyTable.min.js
│   │   ├── htmlwidgets
│   │   │   └── htmlwidgets.js
│   │   ├── jquery
│   │   │   ├── jquery-3.6.0.js
│   │   │   ├── jquery-3.6.0.min.js
│   │   │   └── jquery-3.6.0.min.map
│   │   ├── jszip
│   │   │   └── jszip.min.js
│   │   ├── kePrint
│   │   │   └── kePrint.js
│   │   ├── lightable
│   │   │   └── lightable.css
│   │   ├── pdfmake
│   │   │   ├── pdfmake.js
│   │   │   └── vfs_fonts.js
│   │   ├── quarto-html
│   │   │   ├── anchor.min.js
│   │   │   ├── popper.min.js
│   │   │   ├── quarto.js
│   │   │   ├── quarto-syntax-highlighting.css
│   │   │   ├── tippy.css
│   │   │   └── tippy.umd.min.js
│   │   ├── quarto-nav
│   │   │   ├── headroom.min.js
│   │   │   └── quarto-nav.js
│   │   └── quarto-search
│   │       ├── autocomplete.umd.js
│   │       ├── fuse.min.js
│   │       └── quarto-search.js
│   └── Video
│       └── myvideo.m4v
├── Figures
├── index.qmd
├── _quarto.yml
├── Sound
│   └── mylocalsoundfile.mp3
└── Video
    └── myvideo.m4v

I'm on:
RStudio 2023.05.0-daily+229 "Mountain Hydrangea" Daily (2b33be08175490bb522147451d3ee3e0b7deea12, 2023-04-14) for RHEL 9
Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) rstudio/2023.05.0-daily+229 Chrome/110.0.5481.177 Electron/23.1.2 Safari/537.36

[cderv]

@tspeidel

(unlike sound, the video is not called via src, but via ![](Video/myvideo.m4v))

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.

[tspeidel]

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!

[cderv]

@tspeidel

but the autoconfiguration somehow misses src specified locations

Yes this is the issue and we'll fix this - you should follow the issue `<source src=>` is not identified for resource detection · Issue #5268 · quarto-dev/quarto-cli · GitHub for resolution