Skip to main content

Mastering

Once you are done recording, there are still a few steps required to get your ractive polished and cross-compatible. We call this the mastering or post-processing phase.

At the end we provide a checklist to go through when deploying a ractive to production.

Audio#

Joining audio#

It can be convenient to record several audio segments separately. However, due to the Web Autoplay Policy, you need to join them into a single audio file when you are finished. See https://trac.ffmpeg.org/wiki/Concatenate#demuxer for how to do this with ffmpeg.

Fixing the browser recording#

The audio file produced by the browser will not have the correct metadata for seeking. To fix it:

ffmpeg -i audio.webm -strict -2 audio-fixed.webm
mv audio-fixed.webm audio.webm

Converting audio#

It is necessary to provide audio in both webm and mp4 format. To convert the webm recording:

ffmpeg -i audio.webm audio.mp4

Other tips#

How to do noise reduction using ffmpeg and sox (skip steps 1 and 5)

Static video#

You may want a "static" (traditional mp4/webm) version of your ractive so that you can upload it to Facebook/YouTube/Twitter (and then link to the interactive version). You can make these with the rp-master render command:

npx rp-master render -a ./audio/audio.mp4 http://localhost:8080 out.mp4

For this you will need to have ffmpeg installed. In case you have have issues installing it, this guide may help.

Thumbnails#

Your ractive will be a lot easier to navigate if you have thumbnail previews on the scrubber bar. These can be generated with the rp-master thumbs command:

npx rp-master thumbs http://localhost:8080

These are then passed to the thumbs prop of Player.

Mastering Checklist#

  1. Remove the rp-recording <script> tag
  2. Ensure fat-fingers etc. for mobile
  3. Make sure that mouseUp events are appropriately intercepted.
  4. Join audio audio files into a single file.
  5. Fix webm file produced by browser.
  6. Ensure that audio files are available as both webm and mp4.
  7. Generate thumbnails and add highlights.
  8. Make sure there is CSS to load custom fonts etc.
  9. Make sure MEDIA_URL is set to production assets host
  10. Compress Javascript
  11. Compress CSS
  12. Make sure the hosting page has Javascript/CSS for fake fullscreen
  13. Make static recordings for social media/discoverability