/
howler.Rmd
84 lines (64 loc) · 3.03 KB
/
howler.Rmd
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
---
title: "Adding Audio with howler.js"
output: rmarkdown::html_vignette
vignette: >
%\VignetteIndexEntry{Adding Audio with howler.js}
%\VignetteEngine{knitr::rmarkdown}
%\VignetteEncoding{UTF-8}
---
<!-- badges: start -->
[](https://lifecycle.r-lib.org/articles/stages.html#experimental)
[](https://app.codecov.io/gh/ashbaldry/howler?branch=main)
[](https://github.com/ashbaldry/howler/actions)
<!-- badges: end -->
# {howler} - Interactive Audio Player <img src="https://raw.githubusercontent.com/ashbaldry/howler/master/man/figures/logo.png" align="right" width="120"/>
`{howler}` is a package that utilises the [howler.js](https://github.com/goldfire/howler.js) library to play audio on the modern web.
## Installation
This package is not yet available on CRAN. To install the latest version:
```r
install.packages("devtools")
devtools::install_github("ashbaldry/howler")
```
## Usage
The HTML way to include an audio file in any shiny application/web page is to use the `<audio>` tag. This can generally only handle one audio file, and cannot (easily) be manipulated from the server side.
```r
tags$audio(src = "audio/sound.mp3", type = "audio/mp3", autoplay = NA, controls = NA)
```
howler.js uses the [Web Audio API](https://webaudio.github.io/web-audio-api/), and with this we are able to create an audio player that can solve both of the above issues and more:
```r
library(shiny)
library(howler)
ui <- fluidPage(
title = "howler Example",
howler(
elementId = "sound",
tracks = list("Track 1" = "audio/track_1.mp3", "Track 2" = "audio/track_2.mp3"),
auto_continue = TRUE,
auto_loop = TRUE,
seek_ping_rate = 1000
),
howlerPreviousButton("sound"),
howlerPlayPauseButton("sound"),
howlerNextButton("sound")
)
server <- function(input, output, session) {
observe({
req(input$sound_seek)
if (round(input$sound_seek) == 10) {
pauseHowl("sound")
} else if (round(input$sound_seek) == 20) {
changeTrack("sound", "Track 2")
}
})
}
shinyApp(ui, server)
```
### Module
The `{howler}` package also includes a lightweight module `howlerModuleUI` and `howlerModuleServer` that adds a bit of styling to replicate the style of a standard `<audio>` HTML player.
## Examples
All examples are available in the [Examples](https://github.com/ashbaldry/howler/tree/main/inst/examples) directory and can be run locally by installing the `{howler}` package:
- [Basic Player](https://github.com/ashbaldry/howler/tree/main/inst/examples/basic)
- [Full Controls](https://github.com/ashbaldry/howler/tree/main/inst/examples/full)
- [Module Player](https://github.com/ashbaldry/howler/tree/main/inst/examples/module)
- [Server-Side Controls](https://github.com/ashbaldry/howler/tree/main/inst/examples/server)