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)

Thumbnails#

Generate thumbnail previews using the rp-thumb-capture package. This is a fairly complex process, it is demonstrated in the deep dive.

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