Audio files in R markdown

Publishing Your Results
1

Hi!

I was writing a report, where I had to include some audio files. I did using ![caption](location) format, and knit the document as HTML. I opened in Chrome, and all the files started to be played automatically simultaneously. After that, it was possible to play them separately, but the start was really annoying.

So, my first question is that is it possible to stop this auto-play?

Then, I sent the report to one of my friend, and he told me that he was unable to play the audio files. He was using Firefox. So, I tried with that and noticed that was indeed the case. I repeated with Edge and Opera, and noted that while Opera opens the exactly as Chrome, Edge fails to play the audio just like Firefox.

So, my second question is that is it that audio files can be included only for Chromium based browsers, and if that is not the case, how to do it for any browser?

Here's a small example:

---
title: "Example"
output: html_document
---

some text

![attached audio](reprex.wav)

some text

Obviously, this will need a reprex.wav file in the directory of the .Rmd file. I used this. I obtained the following:

reprex

The following are the screenshots of the different browsers:

Brave

brave
brave1366×768 14.9 KB

Chrome

chrome
chrome1366×768 13.9 KB

Edge

edge
edge1366×768 12.4 KB

Firefox

firefox
firefox1366×768 11.8 KB

Internet Explorer

ie
ie1366×768 15.3 KB

Opera

opera
opera1366×768 20.7 KB

Any help will be appreciated.

2

I believe you have to deal with that using HTML. At the end, rmarkdown generates markdown, then html thanks to pandoc. ![caption](location) is for image html tag. You may need to use another HTML tag for audio file.

In HTML5 you have a special one,
https://www.w3schools.com/html/html5_audio.asp
https://www.w3schools.com/TAGS/tag_audio.asp
You could try it.

if you write html in Rmd, it will be kept.

Note: rmarkdown produce by default HTML4. So we will see if HTML5 if ok. Otherwise, I'll see what could be done in the code to get support. I let you try, and you'll tell me if it is working.

1 Like
3

Thanks for the reply. But I've no idea at all about HTML. I've programmed only in R, and the only other language I have some knowledge about is python.

So basically, I just imitated (without much understanding) from the links you provided, and also those given here. This is what I've done:

---
title: "R Notebook"
output: html_document
---

some text

<html>
<audio controls>
  <source src="reprex.wav" type="audio/wav">
</audio></html>

some text

<html>
<audio controls>
  <source src="xerper.wav" type="audio/wav">
</audio></html>

some text

I used the following audio files: 1 and 2. What I obtained is this.

As far as I can tell, it seems to work perfectly, at least for this example. It may be the case that I need to modify it for different cases, though can't think of any right now.

Update

---
title: "Example"
output: html_document
---
  
```{r include = FALSE}
html_tag_audio <- function(file,
                           type = "wav")
{
  htmltools::tags$audio(controls = NA,
                        htmltools::tags$source(src = file,
                                               type = glue::glue("audio/{type}",
                                                                 type = type)))
}
```

some text 1

`r html_tag_audio("reprex.wav")`

some text 2

`r html_tag_audio("xerper.wav")`

some text 3

This yields the following:

https://ufile.io/zr8yx

Audio files used are 1 and 2, same as earlier.

1 Like
4

Reading documentation and Imitating is a great way to learn too !

What you need to keep in mind:

  • When you use html_document with Rmarkdown, you'll get html at the end
  • I you provide directly in you Rmd some html code it will be kept as is in markdown and during the conversion in html by pandoc
  • When you want to do some advanced customisation that does not seems to be an included feature of Rmarkdown or any :package:, you'll always get the possibility to use HTML and CSS directly.

About your example

I think you don't need the <html> and </html> surrouding your audio tag. This will do

<audio controls>
  <source src="reprex.wav" type="audio/wav">
</audio>

You can also now do some R function to create this. To play with HTML, in a R way, htmltoos :package: is really good. It is used behind shiny also. You can easily generates tags to include in markdown document. They will be recognized very well in notebook and Rmd.

html_tag_audio <- function(file, type = c("wav")) {
  type <- match.arg(type)
  htmltools::tags$audio(
    controls = NA,
    htmltools::tags$source(
      src = file,
      type = glue::glue("audio/{type}", type = type)
    )
  )
}

html_tag_audio("reprex.wav", type = "wav")

will generate this html code

<audio controls>
    <source src="reprex.wav" type="audio/wav"/>
</audio>

You can include directly in a Rmarkdown document

---
output:
  html_document
---

```{r setup, include = FALSE}
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)
    )
  )
}
```

```{r}
html_tag_audio("reprex.wav", type = "wav")
```

Now that your issue is resolved, would you mind choosing a solution? It helps other people see which questions still need help, or find solutions if they have similar problems. Here’s how to do it:

3 Likes
5

Thanks for the reply.

I marked my previous reply as the chosen solution, because it contained a working example.

I really like the idea of using the :package: htmltools. I updated my answer.

However, I do have one question. I had the the idea that / is used in HTML as some sort of closing operator. So how are the following two equivalent?

<audio controls>
<source src="reprex.wav" type="audio/wav">
</audio>

and

<audio controls>
  <source src="reprex.wav" type="audio/wav"/>
  </audio>

What does the / do just before the end of 2nd line in the 2nd case?

Thanks.

1 Like
6

yes you are right, it is better to have one as closing statement.
you would have either

<source src="somefile"/>

or

<source src="somefile">sometext</source>

so either /> or a closing tag </source>

7

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