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 ( ) ;
支持格式
| 格式 | 支持 |
|---|---|
| .mp3 | [✓] |
| .aac | [✓] |
| .mp4 | [✓] |
| .m3U8（HLS） | [✓] |
功能路线图
✅发行
- 均衡器
- 队列支持
- 增强的开发人员体验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
下载源码
通过命令行克隆项目:
git clone https://github.com/afkcodes/audio_x.git