web/notify.moe
Code Issues Pull Requests Activity

Improved audio player UX (status messages)

Browse Source
This commit is contained in:
Eduard Urbach 2018-05-31 16:38:46 +09:00
parent 51e95e45cf
commit ac2ec39fd0
1 changed files with 18 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
scripts/AudioPlayer.ts
View File

@ -91,11 +91,17 @@ export default class AudioPlayer {
// without any error and also wouldn't work on audio source changes. // without any error and also wouldn't work on audio source changes.
this.gainNode.connect(this.audioContext.destination) this.gainNode.connect(this.audioContext.destination)
// Show status message
this.arn.statusMessage.showInfo("Decoding audio...", -1)
this.audioContext.decodeAudioData(request.response, async buffer => { this.audioContext.decodeAudioData(request.response, async buffer => {
if(currentPlayId !== this.playId) { if(currentPlayId !== this.playId) {
return return
} }
// Close status message
this.arn.statusMessage.showInfo(`Playing "${this.trackLink.textContent}"`)
// Mark as ready // Mark as ready
this.audioPlayer.classList.add("decoded") this.audioPlayer.classList.add("decoded")
@ -115,10 +121,22 @@ export default class AudioPlayer {
}, console.error) }, console.error)
} }
request.onprogress = e => {
if(!e.lengthComputable) {
return
}
let progress = e.loaded / e.total * 100
this.arn.statusMessage.showInfo(`Loading audio...${progress.toFixed(1)}%`, -1)
}
request.onerror = () => { request.onerror = () => {
this.arn.loading(false) this.arn.loading(false)
} }
// Show status message
this.arn.statusMessage.showInfo("Loading audio...", -1)
this.lastRequest = request this.lastRequest = request
request.send() request.send()