Audio
The <ef-audio> is a custom HTML element that extends the functionality of the standard HTML audio element. It's designed to work seamlessly with the <ef-timegroup> element.
Basic Usage
Attributes
assetId
asset-idassetIdstringThe asset ID of the audio.
An asset ID is a unique identifier for a media file that has been uploaded to Editframe. This is documented in the Processing Files section.
src
srcsrcstringThe source URL/path of the audio.
⚠️ This property is not yet supported in all circumstances. Providing an arbitrary URL or path will not work unless the server is configured to respond with a precise, not-yet-documented, format.
Demonstration projects with such a server are available via npm create @editframe@beta. These are not intended for production use. When complete, a specialized server should not be required, though there will be specific encoding/muxing limitations.
Instead upload media to Editframe and use the assetId property.
🚫 This property should only be used for development, testing, and previewing media to end-users in real-time. When submitting a render job, all media should be uploaded to Editframe and the assetId property should be used. Our render servers will render in parallel, and in order to operate efficiently we need to be able to load only the slice of media that is needed to render a small segment of the timeline.
startTimeMs
numberThe start time of the audio in milliseconds. This time is relative to the timeline describe by the root timegroup the audio is contained within.
endTimeMs
numberThe end time of the audio in milliseconds. This time is relative to the timeline describe by the root timegroup the audio is contained within.
durationMs
numberThe duration of the audio in milliseconds. This is equivalent to the difference between endTimeMs and startTimeMs.
currentTimesMs
numberThe current time of the audio in milliseconds. This time is the time within the timeline of the root timegroup the audio is contained within.
ownCurrentTimeMs
numberThe current time of the audio in milliseconds. This time is scoped directly to the audio element itself.
currentSourceTimeMs
numberThis property is the current time of the audio in milliseconds scoped to the source media. If no trimStart or sourceIn are set, this property is equivalent to ownCurrentTimeMs.
💡 If you want to associate data to a audio clip, but it's important that the data is not affected by trimming, use this property. For example, if you were tracking an object in the audio, you should use this time, so that tracking would hold true even if a trimStart value is set later.
trimStart
trimstarttrimStarttimestringA string representing time duration (e.g. "5s", "1.5s", "500ms")
A duration of time to trim off from the start of the audio.
This time is relative to the start of the audio.
Setting trimStart to 10s will result in the audio starting 10 seconds into the source media.
This property is intended to be used with the trimEnd property.
trimEnd
trimendtrimEndtimestringA string representing time duration (e.g. "5s", "1.5s", "500ms")
A duration of time to trim off from the end of the audio.
This time is relative to the end of the audio.
Setting trimEnd to 10s will result in the audio ending 10 seconds into the source media.
This property is intended to be used with the trimStart.
sourceIn
sourceinsourceIntimestringA string representing time duration (e.g. "5s", "1.5s", "500ms")
A duration of time to trim off from the start of the audio.
This time is an absolute value in the timeline of the source media.
Setting sourceIn to 10s will result in the audio starting 10 seconds into the source media.
This property is intended to be used with the sourceOut property.
sourceOut
sourceoutsourceOuttimestringA string representing time duration (e.g. "5s", "1.5s", "500ms")
A duration of time to trim off from the end of the audio.
This time is an absolute value in the timeline of the source media.
Setting sourceOut to 10s will result in the audio ending 10 seconds into the source media.
This property is intended to be used with the sourceIn property.
parentTimegroup
<ef-timegroup> | nullThe closest timegroup element that contains the audio.
rootTimegroup
<ef-timegroup> | nullThe outermost timegroup element that contains the audio.
fftSize
fft-sizefftSizenumber512The size of the FFT (Fast Fourier Transform) to use for audio analysis.
This property is used when associated the audio with a waveform or other audio analysis.
The value MUST be a power of 2. Higher values will result in more granular waveforms. Though this is not always more aesthetically pleasing.
fftDecay
fft-decayfftDecaynumber8The decay of the FFT (Fast Fourier Transform) to use for audio analysis.
To create a smoother waveform animation, we average together several frames worth of audio data. This property controls the number of frames to average.
Higher values will result in a smoother animation. Extremely high values will increase computational cost.
fftGain
fft-gainfftGainnumber3The gain of the FFT (Fast Fourier Transform) to use for audio analysis.
This property is used when associated the audio with a waveform or other audio analysis.
Higher values will result in a more pronounced waveform.
interpolateFrequencies
interpolate-frequenciesinterpolateFrequenciesbooleanfalseSome input audio may have been fed through a highpass, resulting in waveform visualizations that appear to be missing data.
For example, if audio was recorded through a telephone network, which typically cuts out frequencies above ~4khz, the waveform will appear to be missing data above this frequency.
Setting this property will ignore zero values on the high end of the frequency spectrum, and interpolate the data to fill in the missing values.
This will result in a more aesthetically pleasing waveform, but it may also result in a loss of precision.
mute
mutemutebooleanfalseMutes the audio.
When set to true, the audio will not produce any sound. Note that any waveforms connected to the media will continue to produce visual output, as mute only affects audio output via speakers.