Link Search Menu Expand Document

Online Authoring

Haptics can be authored using the browser-based Studio web application at This tool converts audio files into haptic clips using the same analysis algorithms as the Studio desktop app and provides some light editing features. The haptics created can be played in your application via the Studio frameworks, libraries, and plug-ins.

The general workflow for authoring haptics is:

  1. In your browser, navigate to
  2. Drag and drop an audio file into the envelope editor area—the Audio Analyzer runs automatically to generate the initial haptic effect.
  3. Audition the haptic effect with the Studio mobile app on your phone. If necessary, edit the haptic effect in the browser and validate the changes with the Studio mobile app.
  4. Download the final haptic clip to disk.

Authoring Workflow

NOTE: Even if your software has no audio, or you want to create haptics for events that have no corresponding audio, you will still need to use some kind of audio file as a starting point when authoring haptics in the Studio web app. This process is faster—and the results will likely be more rich and interesting—than designing haptic effects purely by hand.

Creating a Haptic Clip from an Audio File

To create the initial haptic, simply drag an audio file into your browser and drop it into the timeline area of app. The Studio web app will immediately begin analyzing the audio and, after a few seconds, the resulting haptic envelopes will appear in the editor.

Editing Envelopes

The Studio web app gives you full control over the haptics you create, enabling you to directly edit the haptic envelopes to achieve your desired results.


The Studio web app has an intuitive visual interface that displays envelopes—representations of how the amplitude and frequency values change over time. Envelopes look just like line graphs with time mapped across the horizontal axis.

The Amplitude Envelope represents how the intensity of the haptic changes over time. The intensity is shown in the vertical axis with full intensity at the top (indicated with a value of 1.0) and no vibration at the bottom (indicated with a value of 0.0).

On the iPhone, the Frequency Envelope represents how the frequency (the “pitch” or “tone” of the haptic effect) changes over time. Frequency is also represented in the vertical axis, where the lowest frequency is at the bottom (represented with 0.0) and the highest frequency is at the top (represented by 1.0).

Neither the Amplitude Envelope nor the Frequency Envelope represents absolute or exact values. The performance of haptic actuators might be different from one devices model to the next. Lofelt Studio automatically maps these abstract amplitude and frequency ranges to the capabilities of the devices at runtime. This is what allows you to create one haptic clip that is then used by all devices supported by Lofelt Studio.

Envelope Selector

The Studio web app designs haptics using the concurrently running Amplitude and Frequency Envelopes, which you can visualize simultaneously in the editor window. Use the Envelope Selector to choose which of the envelopes you want to edit. You can see the Enveloper Selector on the upper-right corner of the window.

Envelope Selector

Click on one of the envelopes to select it. You will see the associated envelope move to the foreground in the main editor on the right. The Amplitude Envelope is blue; the Frequency Envelope is yellow.

Editing Envelopes

After selecting the envelope you wish to edit using the Envelope Selector, you can then begin to manipulate the selected envelope in the main editor window at the right. You can add, move, and delete breakpoints from the envelopes.


A breakpoint is a single point in time that has a specific value. When creating two breakpoints next to each other, the Studio web app automatically connects those two breakpoints and interpolates values for the time between them. If you delete a breakpoint, the app then fills the gap by creating a connection between the remaining breakpoints on the left and right. Breakpoints are visualized by small, unfilled circles:

Breakpoint Hover

Deleting a Breakpoint

To remove a breakpoint from an envelope, simply click on an existing breakpoint.

Breakpoint Delete

Moving a Breakpoint

To move a breakpoint, click-and-drag it to a new location.

NOTE: Lateral movement of the breakpoints is limited by any other breakpoints to the left or right of your selection. It is not possible to drag breakpoints over others that already exist.

Breakpoint Moving

Adding a Breakpoint

To add new breakpoints, place the cursor where you want the new breakpoint to appear. The mouse cursor will change to a “+”. Click to create a new breakpoint at that location.

Breakpoint Adding

Auditioning Haptics on the Studio Mobile App

It’s important to understand how the envelopes created by the Studio web app actually feel on the platform where your app will run. Use the Studio mobile app to play back the haptics directly on an Apple or Android phone. If you haven’t already, download the Lofelt Studio mobile app from the Apple App Store or Google Play Store. You can also just search for “Lofelt Studio” on those stores to find the app.

For the Studio mobile app to know what haptic you want to audition, you must make a connection between the Studio web app and Studio mobile app. This is done via a quick scan of a QR code as follows:

Reveal the QR Code

In the Studio web app, click on the button in the bottom-right corner that looks like a mobile phone. A QR code will appear.

Reveal QR Code

The QR code will be different for each authoring session you conduct with the Studio web app.

Scan the QR Code

On your phone, launch the Studio mobile app. At the bottom of the app are a series of selector buttons. Tap on the “Audition” button:

Audition Button

NOTE: If this is your first time using the Audition feature of the Studio mobile app, the app might ask you for permission to access the device’s camera. Please confirm to allow access, otherwise the app will not be able to use the camera for scanning the QR code.

Point the phone’s camera at the QR code shown in the browser window of your desktop computer.

Scan QR Code

Audition the Haptic

Once the QR code is read, a connection is established between the Studio web app and Studio mobile app. The screen then changes to show a large “play” button.

Audition Haptics

Press and hold the play button to both feel the haptic experience and hear the corresponding audio. Playback will stop when you remove your finger from the button.

NOTE: For the best experience, use headphones to hear the audio while you feel the haptic on the phone. By using headphones, you avoid creating any extra vibrations from the phone’s internal speaker, which might influence your evaluation of the pure haptic experience generated by the phone’s actuator.

Exporting Haptic Clips

After validating the haptic experience with the Studio mobile app, export the haptic information from the Studio web app as a haptic clip.

To export, click the “Download Haptic Clip” button:

Export Haptic

The downloaded haptic clip will use the same name as the audio file you provided. This helps keep audio files and their associated haptic clips neatly organized on your computer. So, for example, if you used an audio file called footstep1.wav, the name for the downloaded haptic clip will be footstep1.haptic. This haptic clip is then ready to be played using the Studio frameworks, libraries, and plug-ins.

< Prev Next >

Copyright © 2020-2021 Lofelt GmbH. All rights reserved.