Support self_contained for embedded audio

[robertfromont]

It would be great if HTML audio tags like <audio controls><source src="something.wav" type="audio/wav"></audio> caused the audio file to be included in the output .html file like images are, when self_contained is true.

---

By filing an issue to this repo, I promise that

• I have fully read the issue guide at https://yihui.org/issue/.
• I have provided the necessary information about my issue.
  • If I'm asking a question, I have already asked it on Stack Overflow or RStudio Community, waited for at least 24 hours, and included a link to my question there.
  • If I'm filing a bug report, I have included a minimal, self-contained, and reproducible example, and have also included xfun::session_info('xaringan'). I have upgraded all my packages to their latest versions (e.g., R, RStudio, and R packages), and also tried the development version: remotes::install_github('yihui/xaringan').
  • If I have posted the same issue elsewhere, I have also mentioned it in this issue.
• I have learned the Github Markdown syntax, and formatted my issue correctly.

I understand that my issue may be closed if I don't fulfill my promises.

[yihui]

Done. You can install and test the development version via

remotes::install_github('yihui/xaringan')

Thanks!

[robertfromont]

Thanks for doing this so quick!

It Knits, but the audio won't play in the resulting HTML document.

The current HTML document generated is like:

<audio controls><source src="data:image/png;base64,#something.wav" type="audio/wav"></audio>
...
<script>(function(data, token) {
  // data is an object of the form { path: base64 data }; we need to move base64
  // data back to HTML nodes (e.g., into the 'src' attribute of <img>)
  var i, s, d, el, els;
  els = document.querySelectorAll('img[src^="' + token + '"]');
  for (i = 0; i < els.length; i++) {
    el = els[i]; s = el.src.replace(token, ''); d = data[s];
    if (d) el.src = d;
  }
  ...
})({
"something.wav": "data:audio/x-wav;base64,UklGR...AlgA="
}, 'data:image/png;base64,#');</script>

It works if I hack it to be like:

  ...
  els = document.querySelectorAll('img[src^="' + token + '"], source[src^="' + token + '"]');
  ...

Can that be tweaked?

[yihui]

@robertfromont Oops, sorry about the oversight. Yes, I should have selected <source> tags in the JS code, too. I just pushed the fix. Next time please feel free to submit a pull request. Thank you!

[robertfromont]

Works, thanks!

[robertfromont]

It turns out that media structured <audio src...> (rather than <audio><source src...></audio>) is more robust, so I added support for that in #355