audio_x

audio_x

一个功能强大的轻巧（8KB GZIP）音频播放器，用于零依赖性的现代Web应用程序。

为什么要audio_x ？

• 通用格式支持– 播放MP3，AAC，MP4，HLS（M3U8）等等
• UI自由– 没有内置的UI，可以完全控制玩家的外观
• 手机准备– 对通知和锁定屏幕控件的支持
• ?高级音频功能– 内置均衡器和队列管理
• Analytics准备就绪– 使用内置播放器跟踪实际播放时间
• type -safe-开箱即用的完整打字稿支持
• ⚛️反应兼容– 与React无缝地工作，无需其他包装

快速开始

 npm install audio_x 

audio_x\”;

// Create and initialize player
const audio = new AudioX();
audio.init({
autoPlay: false,
useDefaultEventListeners: true,
showNotificationActions: true
});

// Play your first track
audio.addMedia({
source: \”https://ex*a*mple.*com/stream.mp3\”,
title: \”My Awesome Song\”,
artist: \”Amazing Artist\”
});
audio.play();\”>

 import { AudioX } from \" audio_x \" ;

// Create and initialize player
const audio = new AudioX ( ) ;
audio . init ( {
  autoPlay : false ,
  useDefaultEventListeners : true ,
  showNotificationActions : true
} ) ;

// Play your first track
audio . addMedia ( {
  source : \"https://ex*a*mple.*com/stream.mp3\" ,
  title : \"My Awesome Song\" ,
  artist : \"Amazing Artist\"
} ) ;
audio . play ( ) ; 

支持格式

功能路线图

✅发行

• 均衡器
• 队列支持
• 增强的开发人员体验API

?即将来临

• 铸造支持
• 破折号媒体播放
• DRM
• 广告支持

综合指南

完整配置

audio_x\”;

const audio = new AudioX();

audio.init({
autoPlay: false, // Enable/disable autoplay
useDefaultEventListeners: true, // Use built-in event handlers
showNotificationActions: true, // Enable mobile notifications
preloadStrategy: \”auto\”, // Control preloading behavior
playbackRate: 1, // Set playback speed
enablePlayLog: true, // Track actual playtime
enableHls: true, // Enable HLS support
hlsConfig: { backBufferLength: 2000 } // HLS configuration
});\”>

 import { AUDIO_STATE , AudioState , AudioX , MediaTrack } from \" audio_x \" ;

const audio = new AudioX ( ) ;

audio . init ( {
  autoPlay : false ,                // Enable/disable autoplay
  useDefaultEventListeners : true , // Use built-in event handlers
  showNotificationActions : true ,  // Enable mobile notifications
  preloadStrategy : \"auto\" ,       // Control preloading behavior
  playbackRate : 1 ,               // Set playback speed
  enablePlayLog : true ,           // Track actual playtime
  enableHls : true ,               // Enable HLS support
  hlsConfig : { backBufferLength : 2000 } // HLS configuration
} ) ;

创建轨道

 const track : MediaTrack = {
  id : 1 ,
  artwork : [
    {
      src : \"https://exa*m*p*le.com/image.png\" ,
      name : \"image-name\" ,
      sizes : \"512x512\" ,
    } ,
  ] ,
  source : \"https://ex*a*mple.*com/stream.mp3\" ,
  title : \"My Awesome Song\" ,
  album : \"Awesome Album\" ,
  artist : \"Amazing Artist\" ,
  comment : \"\" ,
  duration : 309 ,
  genre : \"Pop\" ,
  year : 2023 ,
} ;

audio . addMedia ( track ) ;

播放控制

 // Basic controls
audio . play ( ) ;
audio . pause ( ) ;
audio . seek ( 30 ) ;      // Seek to 30 seconds
audio . seekBy ( 5 ) ;     // Seek forward 5 seconds

// Queue management
audio . playNext ( ) ;
audio . playPrevious ( ) ;
audio . toggleShuffle ( ) ;
audio . loop ( \"SINGLE\" ) ; // Options: \"SINGLE\" | \"QUEUE\" | \"OFF\"

玩家状态管理

audio_x_STATE\”, (audioState: AudioState) => {
console.log(audioState);
});

// Sample state object
{
\”playbackState\”: \”paused\”,
\”duration\”: null,
\”bufferedDuration\”: 0,
\”progress\”: 35.003483,
\”volume\”: 50,
\”playbackRate\”: 1,
\”error\”: {
\”code\”: null,
\”message\”: \”\”,
\”readable\”: \”\”
},
\”currentTrack\”: {
// Track details here
},
\”currentTrackPlayTime\”: 35.003483,
\”previousTrackPlayTime\”: 35.003483
}\”>

 audio . subscribe ( \" audio_x _STATE\" , ( audioState : AudioState ) => {
  console . log ( audioState ) ;
} ) ;

// Sample state object
{
  \"playbackState\" : \"paused\" ,
  \"duration\" : null ,
  \"bufferedDuration\" : 0 ,
  \"progress\" : 35.003483 ,
  \"volume\" : 50 ,
  \"playbackRate\" : 1 ,
  \"error\" : {
    \"code\" : null ,
    \"message\" : \"\" ,
    \"readable\" : \"\"
  } ,
  \"currentTrack\" : {
    // Track details here
  } ,
  \"currentTrackPlayTime\" : 35.003483 ,
  \"previousTrackPlayTime\" : 35.003483
}

自定义活动处理

方法1：事件图

 const eventListenerMap : EventListenerCallbackMap = {
  CAN_PLAY_THROUGH : ( e , audioInstance , isPlayLogEnabled ) => {
    console . log ( e , audioInstance , isPlayLogEnabled ) ;
  } ,
  PLAY : ( e , audioInstance , isPlayLogEnabled ) => {
    console . log ( e , audioInstance , isPlayLogEnabled ) ;
  } ,
} ;

audio . init ( {
  useDefaultEventListeners : false ,
  customEventListeners : eventListenerMap ,
  // ... other options
} ) ;

注意：自定义事件听众优先于默认情况。使用自定义侦听器时，您需要手动处理所有事件。

方法2：直接事件听众

 audio . addEventListener ( \"pause\" , ( data : any ) => {
  console . log ( data ) ;
} ) ;

均衡器功能

 // Get preset equalizer settings
const presets = audio . getPresets ( ) ;

// Apply a preset
audio . setPreset ( \'preset_default\' ) ;

// Custom equalizer settings
const gainsValue = preset [ 0 ] . gains ;   // Default: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
gainsValue [ 0 ] = 2.5 ;                  // Modify first band
audio . setCustomEQ ( gainsValue ) ;

队列管理

 // Add multiple tracks
const tracks = [ track1 , track2 , track3 ] ;
audio . addQueue ( tracks , \"DEFAULT\" ) ;  // Playback types: \"DEFAULT\" | \"REVERSE\" | \"SHUFFLE\"

// Dynamic source loading
audio . addMediaAndPlay ( null , async ( currentTrack : MediaTrack ) => {
  const res = await fetch ( \'url\' ) ;
  currentTrack . source = res . data . url ;
} ) ;

// Queue operations
audio . addToQueue ( track ) ;           // Add single track
audio . addToQueue ( [ track1 , track2 ] ) ; // Add multiple tracks
audio . clearQueue ( ) ;                // Clear queue
audio . isShuffledEnabled ( ) ;         // Check shuffle status
audio . getLoopMode ( ) ;               // Get current loop mode

高级访问

 const instance = AudioX . getAudioInstance ( ) ;  // Get raw audio element 

贡献

找到一个错误？想添加功能吗？欢迎捐款！请提出问题或提交公关。

作者

Ashish Kumar- afkcodes