Audio Player and Recorder Components

The Audio Prelisten Player is located in the Details Pane and configured as part of the Details Pane Template.

Audio Prelisten Player Configuration

Code

XML

{{#if model.hasAudioFile}}
    {{audio-controls validateEntry=true legacyController=legacyController}}
{{/if}}

Look & Feel in DPE Content Manager 2.x

Look & Feel in DPE Content Manager 3.x

Default EAO as Audio Prelisten Player and Recorder Configuration

Code

XML

{{#if model.hasAudioFile}}
    {{content-manager/details-eao}}
    <div class="details-level-meter">
      <span>Level Meter</span>
      <eao-level-meter orientation="horizontal" channel-width="15" scale-width="20" eao={{eao}} appearance="stepped" display-scale="true">
        <i class="fa fa-microphone" slot="inputMonitoringIcon"></i>
      </eao-level-meter>
    </div>
{{/if}}
{{#if creatingNewEntry}}
    {{content-manager/details-eao recordMode=true audioConstraints=(hash echoCancellation=false noiseSuppression=false autoGainControl=false)}}
    <div class="details-level-meter">
      <span>Level Meter</span>
      <eao-level-meter orientation="horizontal" channel-width="15" scale-width="20" eao={{eao}} appearance="stepped" display-scale="true">
        <i class="fa fa-microphone" slot="inputMonitoringIcon"></i>
      </eao-level-meter>
    </div>
{{/if}}

HTTPS is required by the browser so that the recording capability works. Make sure the DPE server is running on HTTPS protocol.

For recording configuration, use audioConstraints attribute for advanced microphone configuration. See https://developer.mozilla.org/en-US/docs/Web/API/MediaTrackConstraints

The Audio Prelisten Player and Default EAO can be used in parallel, e.g., in different details pane tabs, or even in the same tab.

A default Details Pane Configuration with player can also be loaded from the file ContentManager_Details_PlayerWithWaveform.PAR, which is delivered with the DPE installation package (in the subfolder “PAR_examples”).

Audio Prelistening in Low or High Resolution

Audio prelistening in Content Manager is by default in low resolution. You can prelisten the audio in high resolution by creating or editing the |ContentManager|HiResPreListen parameter key and set its value to True.
You can also specify an audio resolution per table, see Audio resolution functionality at Database/Table Configuration. The table audio resolution overwrites the Content Manager audio resolution.