Bringing HowlerJS to Drupal

Episode 1: The first steps

by petrakis.design

Whaaat? Why? Who?

In case, you want to have an audio playback option in the browser...

And since we live in the HTML5 era...

You may want to consider HowlerJS, an "audio library for the modern web".

It's quite slick, isn't it? Great! Show me the module.

Current contribs for audio web-playback

Module D7  D8 Last commit # o. issues # act. installs
audiofield ✔ ✔ > 1 d 52 12484
mediaelement ✔ ✗ 5 y 102 13159
jplayer ✔ ✗ 1 y 107 8504
mediafront ✔ ✗ 2 y 421 5352
audio_streaming_player (✔) ✗ 10 m 2 100
mp3player (✔) ✗ 3 m 48 1311
soundmanager2 (✔) ✗ 4 y 64 2462
scm_music_player (✔) ✗ 1 y 4 25

Ehm... HowlerJS is not there. What do we do?

(a) Use another library? Supported by one of the existing contribs, like audiofield? :-)

(b) If you insist, maybe check how to integrate HowlerJS with one of the existing contribs?

(c) If you really insist and wanna DIY, you should implement your own module

Okay, we are epic Drupallers, let's create another module

N.B.: Not really serious about this. We probably should go with audiofield.

Unless the requirements' overlap is too small

Talking of requirements:

  • Support WebM and mp3
  • Support uploads and URLs
  • Support for playlists
  • Metadata reading (id3 tags)
  • Convert between audio formats
  • D8 is a priority, D7 would be a nice to-have

Disclaimer: R.I.P. MP3 ?

Some say yes:

Some say no:

Next steps

  • Check our requirements against audiofield and/or other contribs without using HowlerJS
  • Check the option of integrating HowlerJS with audiofield
  • Decide on going the brand new module or the integration with audiofield way

Tiny prototype of our own module

  1. Shortcuts
    drupal generate:module
drupal generate:plugin:fieldformatter
  2. Make a twig template out of the player example
  3. Tweak that twig and register it with hook_theme()
  4. Register the needed libs in your .libraries.yml
  5. Pass infos via drupalSettings to HowlerJS
  6. The (recorded) result
  7. The code

Thank you!

A präsentation by https://petrakis.design