Podcast#

This module provides a customizable audio player with unique progress bar visualizations and extensive styling options. Designed for enhanced playback experiences, it includes options for displaying metadata, configuring playback controls, and customizing player themes.

Features#

• Custom Progress Bar: Choose between visualizations based on the audio buffer or a randomized wave, with styles 'rounded' and 'lacerated'.
• Header Customization: Add a title, subtitle, and image to the player header.
• Volume and Speed Control: Change volume and playback playing.
• Time Displays: Enable displays for current time, remaining time, and duration.
• Additional Buttons: Include options for skip (forward/backward), share, playback speed, and download buttons.
• Theme and Style Customization: Adjust colors, tooltip styles, and other visual elements to match your design.

Requires player tag to be audio.

Usage Example#

window.initPlayer('my-video', {
  tag: 'audio',
  podcastPlugin: {
    progressBar: {
      wave: 'lacerated',
    },
    title: 'Default podcast title',
    poweredBy: {
      link: 'https://www.kwikmotion.com/KWIKplayer/7/en',
      logo: 'https://www.kwikmotion.com/images/KWIKmotionLogo.png',
      title: 'Powered by KWIKmotion',
    },
    podcastDesignStudio: {
      progressHolderColor: 'black',
      background: 'transparent',
      playProgressColor: 'orange',
      controlsColor: 'orange',
      textColor: 'orange',
      themeColor: 'blue',
      tooltipBgColor: 'black',
      tooltipTextColor: 'white',
    },
    volume: {
      enable: true,
    },
    speed: {
      enable: true,
    },
  },
});

Podcast Module Options#

The Podcast module offers extensive customization through the following options:

General Options#

• title (string): The title displayed for the podcast player.
• titleWrapperClass (string): CSS class name applied to the wrapper containing the title.
• subtitle (string): The subtitle displayed for the podcast player.
• subtitleWrapperClass (string): CSS class name applied to the wrapper containing the subtitle.
• image (string): URL or path to the image associated with the podcast player.
• imageWrapperClass (string): CSS class name applied to the wrapper containing the image.

Powered By#

poweredBy

• link (string): URL link for the "powered by" section.
• logo (string): URL or path to the logo displayed in the "powered by" section.
• title (string): Title or text displayed in the "powered by" section.
• wrapperClass (string): CSS class name applied to the wrapper containing the "powered by" section.

Design Options#

podcastDesignStudio

• themeColor (string): Primary theme color for the podcast player.
• background (string): Background color for the podcast player.
• progressHolderColor (string): Color for the progress bar holder.
• playProgressColor (string): Color for the progress indicating playback.
• controlsColor (string): Color used for control icons and buttons.
• textColor (string): Text color used in the player.
• tooltipBgColor (string): Background color for tooltips.
• tooltipTextColor (string): Text color used in tooltips.

Download Options#

download

• enable (boolean): Enables or disables the download button.
• text (string): Text displayed on the download button.
• downloadName (string): Default name for the downloaded audio file.
• wrapperClass (string): CSS class name applied to the wrapper containing the download button.

Share Options#

share

• enable (boolean): Enables or disables the share button.
• text (string): Text displayed on the share button.
• wrapperClass (string): CSS class name applied to the wrapper containing the share button.

Speed Control#

speed

• enable (boolean): Enables or disables the speed control button.
• text (string): Text displayed on the speed control button.
• wrapperClass (string): CSS class name applied to the wrapper containing the speed control button.
• defaultPlaybackRate (number): Default playback speed (e.g., 1.0 for normal speed).

Volume Control#

volume

• enable (boolean): Enables or disables the volume control.
• wrapperClass (string): CSS class name applied to the wrapper containing the volume control.

Skip Controls#

skipControls

• Forward Skip:
  forward
  • enable (boolean): Enables or disables the forward skip control.
  • text (string | function): Text displayed for the forward skip control. Can be a string or a function.
    Example: "Skip 15 seconds" or (value) => \Skip ${value} seconds`.
  • wrapperClass (string): CSS class name applied to the wrapper containing the forward skip control.
• Backward Skip
  backward:
  • enable (boolean): Enables or disables the backward skip control.
  • text (string | function): Text displayed for the backward skip control. Can be a string or a function.
    Example: "Rewind 15 seconds" or (value) => \Rewind ${value} seconds`.
  • wrapperClass (string): CSS class name applied to the wrapper containing the backward skip control.

Progress Bar Options#

progressBar

• wave ('rounded' | 'lacerated'): Style of the wave in the progress bar.
• waveBasedOnAudioBuffer (boolean): Whether the progress bar wave is based on the audio buffer.

Time Displays#

timeDisplays

• currentTimeDisplay (boolean): Enables or disables the display of the current playback time.
• currentTimeDisplayWrapperClass (string): CSS class name applied to the wrapper containing the current time display.
• durationDisplay (boolean): Enables or disables the display of the total duration.
• durationDisplayWrapperClass (string): CSS class name applied to the wrapper containing the duration display.
• remainingTimeDisplay (boolean): Enables or disables the display of the remaining playback time.
• remainingTimeDisplayWrapperClass (string): CSS class name applied to the wrapper containing the remaining time display.

Audio File#

• file (string): URL of the audio file to be played.