Class: Sample

@bldr/vue-plugin-media~Sample

A sample (snippet, sprite) of a media file which can be played. A sample has typically a start time and a duration. If the start time is missing, the media file gets played from the beginning. If the duration is missing, the whole media file gets played.

                 currentTimeSec
                 |
 fadeIn          |        fadeOut
        /|-------+------|\           <- mediaElementCurrentVolume_
     /   |       |      |   \
  /      |       |      |     \
#|#######|#######|######|#####|#### <- mediaElement
 ^                            ^
 startTimeSec                 endTimeSec
                        ^
                        |
                        fadeOutStartTime

 | <-      durationSec      ->|

new Sample (mediaFile, specs)

Name Type Description
mediaFile MediaFile
specs object
Properties:
Name Type Description
specs.title String
specs.id String | Number
specs.startTime String | Number

The start time in seconds.

specs.fadeIn String | Number

The fade in time in seconds. The duration is not affected by this time specification.

specs.duration String | Number

The duration in seconds of the sample.

specs.fadeOut String | Number

The fade out time in seconds. The duration is not affected by this time specification.

specs.endTime String | Number

The end time in seconds.

specs.shortcut String

A custom shortcut

Members

currentTimeSec Number

The current time of the sample. It starts from zero.

defaultFadeInSec Number

We fade in very short and smoothly to avoid audio artefacts.

defaultFadeOutSec Number

We never stop. Instead we fade out very short and smoothly.

defaultPlayDelayMsec Number

Number of milliseconds to wait before the media file is played.

durationRemainingSec Number

The remaining duration of the sample in seconds.

durationSec Number

The duration of the sample in seconds. If the duration is set on the sample, it is the same as sample.durationSec_.

durationSec_ Number private

Use the getter functions sample.durationSec.

fadeInSec Number

Time in seconds to fade in.

fadeInSec_ Number private

Use the getter function sample.fadeInSec

fadeOutSec Number

Time in seconds to fade out.

fadeOutSec_ Number private

Use the getter function sample.fadeOutSec

fadeOutStartTimeMsec_ private

In how many milliseconds we have to start a fade out process.

id String

The ID of the sample. The ID is used to build the URI of the sample, for example uri#id: id:Beethoven#complete or filename:beethoven.jpg#Theme_1.

mediaElement HTMLMediaElement

The corresponding HTML media element, a object of the corresponding <audio/> or <video/> element.

mediaElementCurrentTimeSec_ Number private

The current time of the parent media Element. This value gets stored when the sample is paused.

mediaElementCurrentVolume_ Number private

The current volume of the parent media Element. This value gets stored when the sample is paused. It is needed to restore the volume.

The parent media file object.

playbackState

The state of the current playback.

  • started
  • fadein
  • playing
  • fadeout
  • stopped

progress Number

A number between 0 and 1. 0: the sample starts from the beginning. 1: the sample reaches the end.

shortcut Number

The actual shortcut. If shortcutCustom is set, it is the same as this value.

shortcutCustom String

A custom shortcut, for example “k 1”

shortcutNo Number

The shortcut number. 1 means: To play the sample type in “a 1” if it is a audio file or “v 1” if it is a video file.

startTimeSec Number

The start time in seconds. The sample is played from this start time using the mediaElement of the mediaFile. It is the “zero” second for the sample.

title String

The title of the sample. For example komplett, Hook-Line.

titleFormated String

If the sample is the complete media file get the title of the media file. For example Glocken (Das große Tor von Kiew)

uri String

The URI of the sample in the format uri#id: for example id:Beethoven#complete, filename:beethoven.jpg#Theme_1.

volume

Set the volume and simultaneously the opacity of a video element, to be able to fade out or fade in a video and a audio file.

Methods

backward (interval)

Jump backwards.

Name Type Default Description
interval Number 10

Time interval in seconds.

fadeIn (targetVolume, duration)Promise async

Fade in. Set the volume to 0 and reach after a time intervale, specified with duration the targetVolume.

Name Type Default Description
targetVolume Number 1

End volume value of the fade in process. A number from 0 - 1.

duration Number

in seconds

Returns:
Type Description
Promise

fadeOut (duration)Promise async

Name Type Description
duration Number

in seconds

Returns:
Type Description
Promise

forward (interval)

Jump forwards.

Name Type Default Description
interval Number 10

Time interval in seconds.

jump_ (interval, direction) private

Jump to a new time position.

Name Type Default Description
interval Number 10

Time interval in seconds.

direction String forward

forward or backward

pause () async

Pause the sample at the current position and set the video element to opacity 0. The properties mediaElementCurrentTimeSec_ and mediaElementCurrentVolume_ are set or updated.

play (targetVolume, startTimeSec)

Play a sample from startTimeSec.

Name Type Description
targetVolume Number

End volume value of the fade in process. A number from 0 - 1.

startTimeSec Number

Position in the sample from where to play the sample

scheduleFadeOut_ () private

Schedule when the fade out process has to start. Always fade out at the end. Maybe the samples are cut without a fade out.

start (targetVolume)

Start and play a sample from the beginning.

Name Type Description
targetVolume Number

End volume value of the fade in process. A number from 0 - 1.

stop (fadeOutSec) async

Stop the playback of a sample and reset the current play position to the beginning of the sample. If the sample is a video, show the poster (the preview image) again by triggering the load() method of the corresponding media element.

Name Type Description
fadeOutSec Number

Duration in seconds to fade out the sample.

toggle ()

Toggle between sample.pause() and sample.play(). If a sample is loaded start this sample.

toSec_ (timeIntervaleString) private

Convert strings to numbers, so we can use them as seconds.

Name Type Description
timeIntervaleString String | Number