assets_audio_player_web 패키지는 Flutter 애플리케이션이 앱의 리소스 디렉터리에 저장된 오디오 파일을 웹 플랫폼에서 직접 재생할 수 있도록 해주는 웹 전용 플러그인입니다. core assets_audio_player 패키지의 기능을 확장하여 최적화된 웹 호환성을 제공함으로써, 외부 서버 없이 로컬 자산 파일에서 오디오를 스트리밍하고 제어할 수 있게 합니다. 이는 Android, iOS, macOS 및 웹 환경에서 일관된 동작으로 원활한 오디오 재생을 보장합니다.
사용 사례
웹 기반 게임에서 배경 음악 재생
웹 앱에서 앱 자산에서 오디오 스트리밍
웹 플러터 앱에서 오프라인 오디오 재생 활성화
웹 튜토리얼에 음성 내레이션 통합
웹 양식에서 오디오 피드백 지원
주요 기능
자산에서의 웹 전용 오디오 재생
assets_audio_player와의 원활한 통합
MP3, WAV 및 기타 일반 형식을 지원
Flutter pub add를 사용한 최소 설정
모바일 및 웹에서의 크로스 플랫폼 일관성
적합한 대상
Flutter 개발자가 웹 오디오 앱을 만들고 있습니다
오프라인 오디오 재생이 필요한 앱
교육적 또는 상호작용 웹 콘텐츠
임베디드 사운드 효과가 포함된 게임
다중 플랫폼에서 assets_audio_player 사용 프로젝트
고려 사항
웹 플랫폼에서만 작동합니다
pubspec.yaml에 자산을 올바르게 선언해야 합니다
assets에 저장된 오디오 파일로 제한
URL에서 스트리밍을 지원하지 않습니다
부모 자산_audio_player 패키지에 종속됨
원본 README
연결된 소스 저장소의 README 원문 스냅샷입니다. 최신 내용은 저장소에서 확인하세요.
🎧 assets_audio_player 🔊
Play music/audio stored in assets files (simultaneously) directly from Flutter (android / ios / web / macos).
You can also use play audio files from network using their url, radios/livestream and local files
Notification can be displayed on Android & iOS, and bluetooth actions are handled
AssetsAudioPlayer.setupNotificationsOpenAction((notification) {
//custom actionreturntrue; //true : handled, does not notify others listeners//false : enable others listeners to handle it
});
Then if you want a custom action on widget
AssetsAudioPlayer.addNotificationOpenAction((notification) {
//custom actionreturnfalse; //true : handled, does not notify others listeners//false : enable others listeners to handle it
});
Custom actions
You can enable/disable a notification action
open(AUDIO,
showNotification: true,
notificationSettings: NotificationSettings(
prevEnabled: false, //disable the previous button//and have a custom next action (will disable the default action)
customNextAction: (player) {
print("next");
}
)
)
Update audio's metas / notification content
After your audio creation, just call
audio.updateMetas(
player: _assetsAudioPlayer, //add the player if the audio is actually played
title: "My new title",
artist: "My new artist",
//if I not provide a new album, it keep the old one
image: MetasImage.network(
//my new image url
),
);
You can create new AssetsAudioPlayer using AssetsAudioPlayer.newPlayer(),
which will play songs in a different native Media Player
This will enable to play two songs simultaneously
You can have as many player as you want !
///play 3 songs in parallelAssetsAudioPlayer.newPlayer().open(
Audio("assets/audios/song1.mp3")
);
AssetsAudioPlayer.newPlayer().open(
Audio("assets/audios/song2.mp3")
);
//another way, with create, open, play & dispose the player on finishAssetsAudioPlayer.playAndForget(
Audio("assets/audios/song3.mp3")
);
Each player has an unique generated id, you can retrieve or create them manually using
final player = AssetsAudioPlayer.withId(id: "MY_UNIQUE_ID");
🗄️ Playlist
assetsAudioPlayer.open(
Playlist(
audios: [
Audio("assets/audios/song1.mp3"),
Audio("assets/audios/song2.mp3")
]
),
loopMode: LoopMode.playlist //loop the full playlist
);
assetsAudioPlayer.next();
assetsAudioPlayer.prev();
assetsAudioPlayer.playlistPlayAtIndex(1);
Audio Widget
If you want a more flutter way to play audio, try the AudioWidget !
Just remove the Audio from the tree !
Or simply keep play: false
🎧 Listeners
All listeners exposes Streams
Using RxDart, AssetsAudioPlayer exposes some listeners as ValueObservable (Observable that provides synchronous access to the last emitted item);
🎵 Current song
//The current playing audio, filled with the total song duration
assetsAudioPlayer.current //ValueObservable<PlayingAudio>//Retrieve directly the current played assetfinalPlayingAudio playing = assetsAudioPlayer.current.value;
//Listen to the current playing song
assetsAudioPlayer.current.listen((playingAudio){
final asset = playingAudio.assetAudio;
final songDuration = playingAudio.duration;
})
⌛ Current song duration
//Listen to the current playing songfinal duration = assetsAudioPlayer.current.value.duration;
⏳ Current position (in seconds)
assetsAudioPlayer.currentPosition //ValueObservable<Duration>//retrieve directly the current song positionfinalDuration position = assetsAudioPlayer.currentPosition.value;
returnStreamBuilder(
stream: assetsAudioPlayer.currentPosition,
builder: (context, asyncSnapshot) {
finalDuration duration = asyncSnapshot.data;
returnText(duration.toString());
}),
finalLoopMode loopMode = assetsAudioPlayer.loop;
// possible values// LoopMode.none : not looping// LoopMode.single : looping a single audio// LoopMode.playlist : looping the fyll playlist
assetsAudioPlayer.setLoopMode(LoopMode.single);
assetsAudioPlayer.loopMode.listen((loopMode){
//listen to loop
})
assetsAudioPlayer.toggleLoop(); //toggle the value of looping
🏃 Play Speed
assetsAudioPlayer.setPlaySpeed(1.5);
assetsAudioPlayer.playSpeed.listen((playSpeed){
//listen to playSpeed
})
//change play speed for a particular AudioAudio audio = Audio.network(
url,
playSpeed: 1.5
);
assetsAudioPlayer.open(audio);
🎙️ Pitch
assetsAudioPlayer.setPitch(1.2);
assetsAudioPlayer.pitch.listen((pitch){
//listen to pitch
})
//change pitch for a particular AudioAudio audio = Audio.network(
url,
pitch: 1.2
);
assetsAudioPlayer.open(audio);
Android only allow HTTPS calls, you will have an error if you're using HTTP,
don't forget to add INTERNET permission and seet usesCleartextTraffic="true" in your AndroidManifest.xml
iOS only allow HTTPS calls, you will have an error if you're using HTTP,
don't forget to edit your info.plist and set NSAppTransportSecurity to NSAllowsArbitraryLoads
