feat: add artplayer-plugin-audio-track for audio synchronization with video

- Implemented the audio track plugin for ArtPlayer, allowing audio to be synchronized with video playback.
- Added main functionality in `src/index.js` to handle audio playback, synchronization, and event listeners for play, pause, seek, and volume changes.
- Created TypeScript definitions for the plugin in `types/artplayer-plugin-audio-track.d.ts`.
- Included necessary build files in `dist/` for various module formats (CommonJS, ES Module, and legacy).
- Updated package metadata in `package.json` and added a README for documentation.
- Added `.npmignore` to exclude unnecessary files from the package.

docs/assets/example/audio.track.js

@@ -0,0 +1,14 @@
+// npm i artplayer-plugin-audio-track
+// import artplayerPluginAudioTrack from 'artplayer-plugin-audio-track';
+
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/sprite-fight.mp4',
+    plugins: [
+        artplayerPluginAudioTrack({
+            url: '/assets/sample/sprite-fight.aac',
+            offset: 0, 
+            sync: 0.3, 
+        }),
+    ],
+});

docs/assets/js/common.js

@@ -66,6 +66,7 @@
       './assets/ts/artplayer-plugin-liquid-glass.d.ts',
       './assets/ts/artplayer-proxy-canvas.d.ts',
       './assets/ts/artplayer-proxy-mediabunny.d.ts',
+      './assets/ts/artplayer-plugin-audio-track.d.ts',
       './assets/ts/artplayer.d.ts',
     ]
 

docs/assets/ts/artplayer-plugin-ads.d.ts

@@ -48,5 +48,5 @@ declare const artplayerPluginAds: (option: Option) => (art: Artplayer) => Ads
 
 export default artplayerPluginAds
 
-export = artplayerPluginAds
-export as namespace artplayerPluginAds;
+export = artplayerPluginAds;
+export as namespace artplayerPluginAds;

docs/assets/ts/artplayer-plugin-ambilight.d.ts

@@ -16,5 +16,5 @@ declare const artplayerPluginAmbilight: (option: Option) => (art: Artplayer) =>
 
 export default artplayerPluginAmbilight
 
-export = artplayerPluginAmbilight
-export as namespace artplayerPluginAmbilight;
+export = artplayerPluginAmbilight;
+export as namespace artplayerPluginAmbilight;

docs/assets/ts/artplayer-plugin-asr.d.ts

@@ -22,5 +22,5 @@ declare function artplayerPluginAsr(option?: AsrPluginOption): (art: Artplayer)
 
 export default artplayerPluginAsr
 
-export = artplayerPluginAsr
-export as namespace artplayerPluginAsr;
+export = artplayerPluginAsr;
+export as namespace artplayerPluginAsr;

docs/assets/ts/artplayer-plugin-audio-track.d.ts

@@ -0,0 +1,35 @@
+interface Option {
+  /**
+   * Audio track URL
+   */
+  url: string
+
+  /**
+   * Time offset in seconds between video and audio
+   * Positive value means audio plays ahead of video
+   * Negative value means audio plays behind video
+   * @default 0
+   */
+  offset?: number
+
+  /**
+   * Synchronization threshold in seconds
+   * @default 0.3
+   */
+  sync?: number
+}
+
+interface Result {
+  name: 'artplayerPluginAudioTrack'
+  /**
+   * The audio element
+   */
+  audio: HTMLAudioElement
+}
+
+declare const artplayerPluginAudioTrack: (option: Option) => (art: Artplayer) => Result
+
+export default artplayerPluginAudioTrack
+
+export = artplayerPluginAudioTrack;
+export as namespace artplayerPluginAudioTrack;

docs/assets/ts/artplayer-plugin-auto-thumbnail.d.ts

@@ -13,5 +13,5 @@ declare const artplayerPluginAutoThumbnail: (option: Option) => (art: Artplayer)
 
 export default artplayerPluginAutoThumbnail
 
-export = artplayerPluginAutoThumbnail
-export as namespace artplayerPluginAutoThumbnail;
+export = artplayerPluginAutoThumbnail;
+export as namespace artplayerPluginAutoThumbnail;

docs/assets/ts/artplayer-plugin-chapter.d.ts

@@ -17,5 +17,5 @@ declare const artplayerPluginChapter: (option: Option) => (art: Artplayer) => Re
 
 export default artplayerPluginChapter
 
-export = artplayerPluginChapter
-export as namespace artplayerPluginChapter;
+export = artplayerPluginChapter;
+export as namespace artplayerPluginChapter;

docs/assets/ts/artplayer-plugin-chromecast.d.ts

@@ -13,5 +13,5 @@ declare const artplayerPluginChromecast: (option: Option) => (art: Artplayer) =>
 
 export default artplayerPluginChromecast
 
-export = artplayerPluginChromecast
-export as namespace artplayerPluginChromecast;
+export = artplayerPluginChromecast;
+export as namespace artplayerPluginChromecast;

docs/assets/ts/artplayer-plugin-danmuku-mask.d.ts

@@ -21,5 +21,5 @@ declare const artplayerPluginDanmukuMask: (option?: Option) => (art: Artplayer)
 
 export default artplayerPluginDanmukuMask
 
-export = artplayerPluginDanmukuMask
-export as namespace artplayerPluginDanmukuMask;
+export = artplayerPluginDanmukuMask;
+export as namespace artplayerPluginDanmukuMask;

docs/assets/ts/artplayer-plugin-danmuku.d.ts

@@ -255,5 +255,5 @@ declare const artplayerPluginDanmuku: (option: Option) => (art: Artplayer) => Re
 
 export default artplayerPluginDanmuku
 
-export = artplayerPluginDanmuku
-export as namespace artplayerPluginDanmuku;
+export = artplayerPluginDanmuku;
+export as namespace artplayerPluginDanmuku;

docs/assets/ts/artplayer-plugin-dash-control.d.ts

@@ -13,5 +13,5 @@ declare const artplayerPluginDashControl: (option: { quality?: Config, audio?: C
 
 export default artplayerPluginDashControl
 
-export = artplayerPluginDashControl
-export as namespace artplayerPluginDashControl;
+export = artplayerPluginDashControl;
+export as namespace artplayerPluginDashControl;

docs/assets/ts/artplayer-plugin-document-pip.d.ts

@@ -18,5 +18,5 @@ declare const artplayerPluginDocumentPip: (option: Option) => (art: Artplayer) =
 
 export default artplayerPluginDocumentPip
 
-export = artplayerPluginDocumentPip
-export as namespace artplayerPluginDocumentPip;
+export = artplayerPluginDocumentPip;
+export as namespace artplayerPluginDocumentPip;

docs/assets/ts/artplayer-plugin-hls-control.d.ts

@@ -13,5 +13,5 @@ declare const artplayerPluginHlsControl: (option: { quality?: Config, audio?: Co
 
 export default artplayerPluginHlsControl
 
-export = artplayerPluginHlsControl
-export as namespace artplayerPluginHlsControl;
+export = artplayerPluginHlsControl;
+export as namespace artplayerPluginHlsControl;

docs/assets/ts/artplayer-plugin-iframe.d.ts

@@ -28,5 +28,5 @@ declare class ArtplayerPluginIframe {
 
 export default ArtplayerPluginIframe
 
-export = artplayerPluginIframe
-export as namespace artplayerPluginIframe;
+export = artplayerPluginIframe;
+export as namespace artplayerPluginIframe;

docs/assets/ts/artplayer-plugin-libass.d.ts

@@ -11,5 +11,5 @@ declare const artplayerPluginAss: (options: Options) => (art: Artplayer) => {
 
 export default artplayerPluginAss
 
-export = artplayerPluginLibass
-export as namespace artplayerPluginLibass;
+export = artplayerPluginLibass;
+export as namespace artplayerPluginLibass;

docs/assets/ts/artplayer-plugin-liquid-glass.d.ts

@@ -12,5 +12,5 @@ declare const artplayerPluginLiquidGlass: (option?: Option) => (art: Artplayer)
 
 export default artplayerPluginLiquidGlass
 
-export = artplayerPluginLiquidGlass
-export as namespace artplayerPluginLiquidGlass;
+export = artplayerPluginLiquidGlass;
+export as namespace artplayerPluginLiquidGlass;

docs/assets/ts/artplayer-plugin-multiple-subtitles.d.ts

@@ -12,5 +12,5 @@ declare const artplayerPluginMultipleSubtitles: (option: {
 
 export default artplayerPluginMultipleSubtitles
 
-export = artplayerPluginMultipleSubtitles
-export as namespace artplayerPluginMultipleSubtitles;
+export = artplayerPluginMultipleSubtitles;
+export as namespace artplayerPluginMultipleSubtitles;

docs/assets/ts/artplayer-plugin-vast.d.ts

@@ -29,5 +29,5 @@ declare function artplayerPluginVast(
 
 export default artplayerPluginVast
 
-export = artplayerPluginVast
-export as namespace artplayerPluginVast;
+export = artplayerPluginVast;
+export as namespace artplayerPluginVast;

docs/assets/ts/artplayer-plugin-vtt-thumbnail.d.ts

@@ -6,5 +6,5 @@ declare const artplayerPluginVttThumbnail: (option: { vtt?: string, style?: Part
 
 export default artplayerPluginVttThumbnail
 
-export = artplayerPluginVttThumbnail
-export as namespace artplayerPluginVttThumbnail;
+export = artplayerPluginVttThumbnail;
+export as namespace artplayerPluginVttThumbnail;

docs/assets/ts/artplayer-proxy-canvas.d.ts

@@ -6,5 +6,5 @@ declare const artplayerProxyCanvas: (option?: Option) => (art: Artplayer) => Res
 
 export default artplayerProxyCanvas
 
-export = artplayerProxyCanvas
-export as namespace artplayerProxyCanvas;
+export = artplayerProxyCanvas;
+export as namespace artplayerProxyCanvas;

docs/assets/ts/artplayer-proxy-mediabunny.d.ts

@@ -75,5 +75,5 @@ declare const artplayerProxyMediabunny: (option?: Option) => (art: Artplayer) =>
 
 export default artplayerProxyMediabunny
 
-export = artplayerProxyMediabunny
-export as namespace artplayerProxyMediabunny;
+export = artplayerProxyMediabunny;
+export as namespace artplayerProxyMediabunny;

docs/assets/ts/artplayer.d.ts

@@ -126,6 +126,8 @@ export interface Subtitle {
   onVttLoad?: (vtt: string) => string
 }
 
+
+
 export interface SettingOption extends Omit<Setting, 'html' | 'icon' | 'tooltip'> {
   html: string
   icon: string | undefined
@@ -237,6 +239,10 @@ export interface Quality {
   url: string
 }
 
+
+
+
+
 export type AspectRatio = 'default' | '4:3' | '16:9' | (`${number}:${number}` & Record<never, never>)
 export type PlaybackRate = 0.5 | 0.75 | 1.0 | 1.25 | 1.5 | 1.75 | 2.0 | (number & Record<never, never>)
 export type Flip = 'normal' | 'horizontal' | 'vertical' | (string & Record<never, never>)
@@ -346,6 +352,15 @@ export declare class Player {
   reset(): void
 }
 
+
+
+
+
+
+
+
+
+
 export type CustomType
   = | 'flv'
     | 'm3u8'
@@ -754,6 +769,9 @@ declare module 'artplayer/i18n/*' {
   export default lang
 }
 
+
+
+
 export type Bar = 'loaded' | 'played' | 'hover'
 
 export interface Events {
@@ -853,28 +871,15 @@ export interface CssVar {
   '--art-theme': string
   '--art-font-color': string
   '--art-background-color': string
-  '--art-font-size-sm': string
   '--art-text-shadow-color': string
   '--art-transition-duration': string
-  '--art-ease-standard': string
   '--art-padding': string
   '--art-border-radius': string
-  '--art-mobile-padding': string
-  '--art-mobile-radius': string
-  '--art-radius-sm': string
-  '--art-space-xxs': string
-  '--art-space-xs': string
-  '--art-surface-hover-color': string
-  '--art-surface-border-color': string
-  '--art-surface-muted-color': string
-  '--art-surface-range-color': string
   '--art-progress-height': string
   '--art-progress-color': string
   '--art-progress-top-gap': string
   '--art-hover-color': string
   '--art-loaded-color': string
-  '--art-tip-padding': string
-  '--art-tip-offset': string
   '--art-state-size': string
   '--art-state-opacity': number
   '--art-bottom-height': string
@@ -886,7 +891,6 @@ export interface CssVar {
   '--art-control-opacity': number
   '--art-control-icon-size': string
   '--art-control-icon-scale': number
-  '--art-touch-hit-size': string
   '--art-volume-height': string
   '--art-volume-handle-size': string
   '--art-lock-size': string
@@ -897,7 +901,6 @@ export interface CssVar {
   '--art-settings-max-height': string
   '--art-selector-max-height': string
   '--art-contextmenus-min-width': string
-  '--art-contextmenu-padding-x': string
   '--art-subtitle-font-size': string
   '--art-subtitle-gap': string
   '--art-subtitle-bottom': string
@@ -908,13 +911,6 @@ export interface CssVar {
   '--art-scrollbar-background': string
   '--art-scrollbar-background-hover': string
   '--art-mini-progress-height': string
-  '--art-shadow-low': string
-  '--art-shadow-medium': string
-  '--art-shadow-high': string
-  '--art-shadow-elevated': string
-  '--art-icon-small-size': string
-  '--art-overlay-dim': string
-  '--art-overlay-strong': string
 }
 
 export interface Config {
@@ -999,6 +995,8 @@ export interface Config {
   ]
 }
 
+
+
 export interface Selector {
   /**
    * Whether the default is selected
@@ -1130,6 +1128,18 @@ export interface ComponentOption {
   onSelect?: (this: Artplayer, selector: Selector, element: HTMLElement, event: Event) => void
 }
 
+
+
+
+
+
+
+
+
+
+
+
+
 export type {
   Config,
   Events,
@@ -1319,5 +1329,5 @@ export default class Artplayer extends Player {
   } & Record<string, unknown>
 }
 
-export = Artplayer
-export as namespace Artplayer;
+export = Artplayer;
+export as namespace Artplayer;